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

LPCmedia · 2021-11-03T11:23:02Z

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

The text was updated successfully, but these errors were encountered:

LPCmedia · 2021-11-03T11:32:30Z

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

muuvmuuv · 2021-11-04T07:19:14Z

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

Michsior14 · 2021-11-04T08:48:00Z

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 · 2021-11-04T09:19:34Z

we should wait for v 13.2
#7549

hugoebarboza · 2021-11-05T19:19:52Z

I have the same issue, any update ?

AgentEnder · 2021-11-05T20:19:29Z

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 · 2021-11-19T10:08:41Z

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 · 2021-11-19T14:27:08Z

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

OysteinAmundsen · 2021-11-19T15:48:45Z

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 · 2021-11-19T15:52:20Z

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

OysteinAmundsen · 2021-11-19T16:05:00Z

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:

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',
  },

ReferenceError: Cannot access 'MatButtonToggle' before initialization

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

This actually dissapeared by itself after resolving the other two.

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 · 2021-11-19T16:43:20Z

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 · 2021-11-19T16:56:22Z

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

Genesys-AlexW · 2021-11-19T18:45:32Z

@AgentEnder thanks!

EelcoLos · 2021-11-23T07:57:33Z

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 · 2021-11-24T09:09:28Z

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

benjamindamm · 2021-11-24T10:37:07Z

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 · 2021-11-27T17:47:48Z

@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 · 2021-11-27T22:21:34Z

@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 · 2021-12-14T15:34:58Z

Hi there
npx create-nx-workspace iwdf
npm i @nrwl/angular
I got
No matching version found for @nrwl/[email protected].

LPCmedia · 2021-12-16T03:10:36Z

@whisher that looks like a separate issue...

github-actions · 2023-03-23T05:05:49Z

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.

LPCmedia added the type: bug label Nov 3, 2021

AgentEnder added the scope: angular Issues related to Angular support in Nx label Nov 5, 2021

AgentEnder closed this as completed Nov 5, 2021

github-actions bot added the outdated label Mar 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LPCmedia commented Nov 3, 2021

LPCmedia commented Nov 3, 2021

muuvmuuv commented Nov 4, 2021

Michsior14 commented Nov 4, 2021

SvetlanaMuravlova commented Nov 4, 2021

hugoebarboza commented Nov 5, 2021

AgentEnder commented Nov 5, 2021

OysteinAmundsen commented Nov 19, 2021

AgentEnder commented Nov 19, 2021

OysteinAmundsen commented Nov 19, 2021 •

edited

Loading

AgentEnder commented Nov 19, 2021

OysteinAmundsen commented Nov 19, 2021 •

edited

Loading

Genesys-AlexW commented Nov 19, 2021 •

edited

Loading

AgentEnder commented Nov 19, 2021

Genesys-AlexW commented Nov 19, 2021

EelcoLos commented Nov 23, 2021 •

edited

Loading

EelcoLos commented Nov 24, 2021

benjamindamm commented Nov 24, 2021 •

edited

Loading

AgentEnder commented Nov 27, 2021

EelcoLos commented Nov 27, 2021

whisher commented Dec 14, 2021

LPCmedia commented Dec 16, 2021

github-actions bot commented Mar 23, 2023

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

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

Comments

LPCmedia commented Nov 3, 2021

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

LPCmedia commented Nov 3, 2021

muuvmuuv commented Nov 4, 2021

Michsior14 commented Nov 4, 2021

SvetlanaMuravlova commented Nov 4, 2021

hugoebarboza commented Nov 5, 2021

AgentEnder commented Nov 5, 2021

OysteinAmundsen commented Nov 19, 2021

AgentEnder commented Nov 19, 2021

OysteinAmundsen commented Nov 19, 2021 • edited Loading

AgentEnder commented Nov 19, 2021

OysteinAmundsen commented Nov 19, 2021 • edited Loading

Genesys-AlexW commented Nov 19, 2021 • edited Loading

AgentEnder commented Nov 19, 2021

Genesys-AlexW commented Nov 19, 2021

EelcoLos commented Nov 23, 2021 • edited Loading

EelcoLos commented Nov 24, 2021

benjamindamm commented Nov 24, 2021 • edited Loading

AgentEnder commented Nov 27, 2021

EelcoLos commented Nov 27, 2021

whisher commented Dec 14, 2021

LPCmedia commented Dec 16, 2021

github-actions bot commented Mar 23, 2023

OysteinAmundsen commented Nov 19, 2021 •

edited

Loading

OysteinAmundsen commented Nov 19, 2021 •

edited

Loading

Genesys-AlexW commented Nov 19, 2021 •

edited

Loading

EelcoLos commented Nov 23, 2021 •

edited

Loading

benjamindamm commented Nov 24, 2021 •

edited

Loading