@nrwl/angular:package support for angular cli 13+

[LPCmedia]

Current Behavior

After updating to the latest angular 13 rc ( 13.0.0-rc.3 ) our libraries won't build via @nrwl/angular/src/executors/package/package.impl.js

Expected Behavior

libraries build

Steps to Reproduce

create a lib and the corresponding config in angular json
use angular 13.0.0-rc-3

"ngx-components": { "root": "libs/ngx-components", "sourceRoot": "libs/ngx-components/src", "projectType": "library", "prefix": "avn", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/ngx-components/tsconfig.dev.json", "project": "libs/ngx-components/ng-package.json", "buildableProjectDepsInPackageJsonType": "dependencies" }, "configurations": { "lpack": { "tsConfig": "libs/ngx-components/tsconfig.lib.json" }, "stylePreprocessorOptions": { "includePaths": ["libs/theming/src/scss"] } } },

other configurations have angularCompiler options set to use partial ivy build configuration.

Failure Logs

> nx run ngx-components:build:lpack Must use import to load ES Module: bla/node_modules/@angular/compiler-cli/bundles/index.js require() of ES modules is not supported. require() of bla/node_modules/@angular/compiler-cli/bundles/index.js from bla/node_modules/@nrwl/angular/src/executors/package/package.impl.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from bla/node_modules/@angular/compiler-cli/package.json.

Environment

Node : 14.17.0
OS : darwin x64
yarn : 1.22.4

nx : 13.1.2
@nrwl/angular : 13.1.2
@nrwl/cli : 13.1.2
@nrwl/cypress : 13.1.2
@nrwl/devkit : 13.1.2
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 13.1.2
@nrwl/linter : 13.1.2
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 13.1.2
@nrwl/web : Not Found
@nrwl/workspace : 13.1.2
@nrwl/storybook : 13.1.2
@nrwl/gatsby : Not Found
typescript : 4.4.4

[LPCmedia]

probably not a bug but it would be helpful to know when we can expect ng13 to work.

[muuvmuuv]

Does that still happen with the latest 13 stable release? It was released a few hours after your post ^^

[Michsior14]

Does that still happen with the latest 13 stable release? It was released a few hours after your post ^^

Yes, it's still happening on 13.0.0.

[SvetlanaMuravlova]

we should wait for v 13.2
#7549

[hugoebarboza]

I have the same issue, any update ?

[AgentEnder]

This will be fixed when angular 13 support lands, in Nx 13.2. Support for Angular 13 is currently in progress, and is tracked by #7161.

[OysteinAmundsen]

Still a problem for me in NX 13.2.0. Every single test in the application breaks with the same wordy message:

  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    ~\node_modules\@angular\core\fesm2015\testing.mjs:7
    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1723:14)

[AgentEnder]

Did you update through nx migrate? We provided migrations that should have updated jest configurations for esm angular changes

[OysteinAmundsen]

Yes. I ran:
npm run nx migrate latest && if test -f "migrations.json"; then npm run nx migrate -- --run-migrations=migrations.json; fi;

It looped over nearly every dependency I have, and updated first the package.json, then installed the dependencies and finally ran a series of migrations, that updated the following files:

• angular.json
• nx.json
• [apps|libs]/*/jest.config.js
• [apps|libs]/*/tsconfig.app.json
• [apps|libs]/*/tsconfig.editor.json
• [apps|libs]/**/tsconfig.json
• [apps|libs]/*/tsconfig.spec.json
• [apps|libs]/*/src/polyfills.ts
• A lot of scss files

There were warnings when running migration-v13 for Angular Material and Angular CDK which stated that it could not find Typescript project for my library project and all of my e2e projects, but all other migrations were silent.

This is my migrations.json:

{
  "migrations": [
    {
      "version": "13.0.0-beta.1",
      "description": "Add default base to nx.json if its not currently set",
      "factory": "./src/migrations/update-13-0-0/set-default-base-if-not-set",
      "cli": "nx",
      "package": "@nrwl/workspace",
      "name": "set-default-base-if-not-set"
    },
    {
      "version": "13.0.0-beta.4",
      "description": "Move global settings into nx.json, and project specific settings into workspace.json",
      "cli": "nx",
      "implementation": "./src/migrations/update-13-0-0/config-locations/config-locations",
      "package": "@nrwl/workspace",
      "name": "13-0-0-config-locations"
    },
    {
      "version": "13.2.0",
      "description": "Set --parallel=1 for existing repos to preserve the existing behavior",
      "cli": "nx",
      "implementation": "./src/migrations/update-13-2-0/set-parallel-default",
      "package": "@nrwl/workspace",
      "name": "set-parallel-default"
    },
    {
      "cli": "nx",
      "version": "13.0.0-beta.10",
      "description": "Adds postcss packages needed for Tailwind support if ng-packagr is already installed.",
      "factory": "./src/migrations/update-13-0-0/add-postcss-packages",
      "package": "@nrwl/angular",
      "name": "add-postcss-packages"
    },
    {
      "cli": "nx",
      "version": "13.2.0-beta.1",
      "description": "Remove deprecated options from webpack-server and webpack-browser.",
      "factory": "./src/migrations/update-13-2-0/update-angular-config",
      "package": "@nrwl/angular",
      "name": "update-angular-config"
    },
    {
      "cli": "nx",
      "version": "13.2.0-beta.1",
      "description": "Remove enableIvy and add compilationMode to library tsconfig and remove deprecated ng-packagr options.",
      "factory": "./src/migrations/update-13-2-0/update-libraries",
      "package": "@nrwl/angular",
      "name": "update-libraries"
    },
    {
      "cli": "nx",
      "version": "13.2.0-beta.1",
      "description": "Update jest config to support jest-preset-angular",
      "factory": "./src/migrations/update-13-2-0/update-angular-jest-config",
      "package": "@nrwl/angular",
      "name": "update-angular-jest-config"
    },
    {
      "cli": "nx",
      "version": "13.2.0-beta.1",
      "description": "Move some imports from @nrwl/angular/testing to jasmine-marbles",
      "factory": "./src/migrations/update-13-2-0/update-testing-imports",
      "package": "@nrwl/angular",
      "name": "update-testing-imports"
    },
    {
      "version": "13.0.0",
      "factory": "./update-13/schematic-options",
      "description": "Remove no longer valid Angular schematic options from `angular.json`.",
      "package": "@angular/cli",
      "name": "schematic-options-13"
    },
    {
      "version": "13.0.0",
      "factory": "./update-13/update-angular-config",
      "description": "Remove deprecated options from 'angular.json' that are no longer present in v13.",
      "package": "@angular/cli",
      "name": "update-angular-config-v13"
    },
    {
      "version": "13.0.0",
      "factory": "./update-13/update-libraries",
      "description": "Update library projects to be published in partial mode and removed deprecated options from ng-packagr configuration.",
      "package": "@angular/cli",
      "name": "update-libraries-v13"
    },
    {
      "version": "13.0.0",
      "factory": "./update-13/drop-ie-polyfills",
      "description": "Remove polyfills required only for Internet Explorer which is no longer supported.",
      "package": "@angular/cli",
      "name": "drop-ie-polyfills"
    },
    {
      "version": "13.0.0",
      "factory": "./update-13/update-gitignore",
      "description": "Updating '.gitignore' to include '.angular/cache'.",
      "package": "@angular/cli",
      "name": "update-gitignore"
    },
    {
      "version": "13.0.0-beta",
      "description": "Migrates `[routerLink]=\"\"` in templates to `[routerLink]=\"[]\"` because these links are likely intended to route to the current page with updated fragment/query params.",
      "factory": "./migrations/router-link-empty-expression/index",
      "package": "@angular/core",
      "name": "migration-v13-router-link-empty-expression"
    },
    {
      "version": "13.0.0-beta",
      "description": "In Angular version 13, the `teardown` flag in `TestBed` will be enabled by default. This migration automatically opts out existing apps from the new teardown behavior.",
      "factory": "./migrations/testbed-teardown/index",
      "package": "@angular/core",
      "name": "migration-v13-testbed-teardown"
    },
    {
      "version": "13.0.0-0",
      "description": "Updates Angular Material to v13",
      "factory": "./ng-update/index#updateToV13",
      "package": "@angular/material",
      "name": "migration-v13"
    },
    {
      "version": "13.0.0-0",
      "description": "Updates the Angular CDK to v13",
      "factory": "./ng-update/index#updateToV13",
      "package": "@angular/cdk",
      "name": "migration-v13"
    },
    {
      "version": "13.1.2-beta.0",
      "cli": "nx",
      "description": "Support .test. file names in tsconfigs",
      "factory": "./src/migrations/update-13-1-2/update-tsconfigs-for-tests",
      "package": "@nrwl/jest",
      "name": "update-ts-config-for-test-filenames"
    }
  ]
}

[AgentEnder]

What does your jest config look like for the project that is failing?

[OysteinAmundsen]

Aha... I noticed that not all of my projects were updated with the migrations (unsure why). It managed to update all but my "defaultProject". I added the missing:

  transform: {
    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
  },
  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],

and got a little further.Now it fails on the following unique errors:

1. SyntaxError: Unexpected token 'function'

declare function plural(val: number): number;
            ^^^^^^^^

import localeNo from '@angular/common/locales/nb';

This was fixed by thymikee/jest-preset-angular#1147. I did have to modify the solution to make it work for me though. This is my fix (in jest.preset.js):

  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  moduleNameMapper: {
    '@angular/common/locales/(.*)$': '<rootDir>/../../node_modules/@angular/common/locales/$1.mjs',
  },

2. ReferenceError: Cannot access 'MatButtonToggle' before initialization

import { MatButtonToggleModule } from '@angular/material/button-toggle';

This actually dissapeared by itself after resolving the other two.

3. Unexpected value 'TranslateModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

 Importing TranslateModule which does not have a ɵmod property

This was fixed by removing node_modules, doing this: angular/angular#35805 (comment), and then reinstalling.

[Genesys-AlexW]

Running into the same issue. However, the jest.config.js files were all updated through the migration. Current jest.config.js:

module.exports = {
  displayName: 'app-name',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      stringifyContentPathRegex: '\\.(html|svg)$',

      tsconfig: '<rootDir>/tsconfig.spec.json',
    },
  },
  coverageDirectory: '../../coverage/apps/app-name',
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' },
};

Looks like it's missing the mjs in the transform? I'll manually add it to see what happens.

edit: Adding mjs to the transform did not change the error.

[AgentEnder]

@Genesys-AlexW You need transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'] as well

[Genesys-AlexW]

@AgentEnder thanks!

[EelcoLos]

Still a problem for me in NX 13.2.0. Every single test in the application breaks with the same wordy message:

  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    ~\node_modules\@angular\core\fesm2015\testing.mjs:7
    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1723:14)

I started NX just before version 13, upgraded to 13.2.2 now. I too have this issue:

~\node_modules\@angular\core\fesm2015\testing.mjs:7
    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

package.json:

"devDependencies": {
  "@angular-devkit/build-angular": "^13.0.3",
  "@angular-eslint/eslint-plugin": "13.0.1",
  "@angular-eslint/eslint-plugin-template": "13.0.1",
  "@angular-eslint/template-parser": "13.0.1",
  "@angular/cli": "^13.0.3",
  "@angular/compiler-cli": "^13.0.2",
  "@angular/language-service": "^13.0.2",
  "@nrwl/cli": "13.2.2",
  "@nrwl/cypress": "13.2.2",
  "@nrwl/eslint-plugin-nx": "13.2.2",
  "@nrwl/jest": "13.2.2",
  "@nrwl/linter": "13.2.2",
  "@nrwl/tao": "13.2.2",
  "@nrwl/workspace": "13.2.2",
  "@nx-dotnet/core": "^1.6.0",
  "@types/jest": "27.0.3",
  "@types/node": "16.11.9",
  "@typescript-eslint/eslint-plugin": "~5.4.0",
  "@typescript-eslint/parser": "~5.4.0",
  "eslint": "8.3.0",
  "eslint-config-prettier": "8.3.0",
  "eslint-plugin-cypress": "^2.12.1",
  "jest": "27.3.1",
  "jest-preset-angular": "11.0.1",
  "prettier": "^2.4.1",
  "ts-jest": "27.0.7",
  "typescript": "^4.4.4"
},
"dependencies": {
  "@angular/animations": "^13.0.2",
  "@angular/common": "^13.0.2",
  "@angular/compiler": "^13.0.2",
  "@angular/core": "^13.0.2",
  "@angular/forms": "^13.0.2",
  "@angular/platform-browser": "^13.0.2",
  "@angular/platform-browser-dynamic": "^13.0.2",
  "@angular/router": "^13.0.2",
  "rxjs": "7.4",
  "tslib": "^2.3.1",
  "zone.js": "~0.11.4"
}

jest.config.js:

const { getJestProjects } = require('@nrwl/jest');

module.exports = {
	projects: getJestProjects(),
	preset: 'jest-preset-angular',
	moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
	resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
	transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
	transform: {
		'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
	},
};

tried to look everywhere, nothing helped

[EelcoLos]

please reopen, as this is still an issue, even in 13.3.0-beta-2

[benjamindamm]

Same issue here. Adding .mjs to transformIgnorePatterns and transform seems not to do anything.

EDIT: Currently this code seems to work. But Jest has issues with all other modules imported.

transformIgnorePatterns: [ 'node_modules/(?!.*.mjs$)' ],

The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

[AgentEnder]

@EelcoLos What does the jest config look like for the individual projects? Its possible that transform is being overwritten in the projects jest config. Generally the transform is only set in the project config and not root (such that if you have angular and react packages as an example, jest-preset-angular is not affecting the react projects)

[EelcoLos]

@AgentEnder I tried using @Genesys-AlexW 's earlier comment, which didn't work at first (quoted it below). After some tweaking I got it working

const { getJestProjects } = require('@nrwl/jest');

module.exports = {
	projects: getJestProjects(),
	preset: 'jest-preset-angular',
	moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
	resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
	transform: {
		'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
	},
};

In the end I noticed the following lines being the change. I'm not sure which of these made it work, or a compound of all changes:

transform: {
		'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
	},

Added mjs to transform target

	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],

the directory backslashes (and said location in the regex) are very important to find the mjs files

Lastly, I used nx migrate next to update to 13.3.0-beta-2. All these combined seemed to have finally made it work

Running into the same issue. However, the jest.config.js files were all updated through the migration. Current jest.config.js:

module.exports = {
  displayName: 'app-name',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      stringifyContentPathRegex: '\\.(html|svg)$',

      tsconfig: '<rootDir>/tsconfig.spec.json',
    },
  },
  coverageDirectory: '../../coverage/apps/app-name',
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' },
};

Looks like it's missing the mjs in the transform? I'll manually add it to see what happens.

edit: Adding mjs to the transform did not change the error.

[whisher]

Hi there
npx create-nx-workspace iwdf
npm i @nrwl/angular
I got
No matching version found for @nrwl/cypress@13.3.3.

[LPCmedia]

@whisher that looks like a separate issue...

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.