X Tutup
The Wayback Machine - https://web.archive.org/web/20220131125113/https://github.com/angular/angular/issues/44096
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue when upgrading to ng 13 #44096

Closed
LanderBeeuwsaert opened this issue Nov 6, 2021 · 2 comments
Closed

Issue when upgrading to ng 13 #44096

LanderBeeuwsaert opened this issue Nov 6, 2021 · 2 comments

Comments

@LanderBeeuwsaert
Copy link

@LanderBeeuwsaert LanderBeeuwsaert commented Nov 6, 2021 •
edited by petebacondarwin

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

In our project, we have some angular services (that have a @Injectable({ providedIn: 'root' }) and an import { Injectable } from '@angular/core';)
During our CI process we re-use these services outside of our angular application to dynamically populate our test database.
We do this through calling these services in a ts-node script.
When upgrading to angular 13, when we do "ts-node populate.ts" we get:

POPULATE ERROR: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\lander\devprojects\acro-companion\node_modules\@angular\core\fesm2015\core.mjs not supported.
Instead change the require of C:\lander\devprojects\acro-companion\node_modules\@angular\core\fesm2015\core.mjs to a dynamic import() which is available in all CommonJS modules.

Is this expected?
Do we need to change something to the tsconfig.json file (see below) with which we call the ts-node script?

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    "types": [],
    "module": "commonjs",
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": ["src"]
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

angular 13.0.0 (cli 13.0.1)
node: v16
npm: v7

Anything else?

No response
@petebacondarwin
Copy link
Member

@petebacondarwin petebacondarwin commented Nov 6, 2021

This is expected. The Angular packages no longer contain CommonJS (UMD) formatted bundles, only ESM formatted ones.

In your populate.ts script you will need to access the @angular/core via an ESM import. I suspect that ts-node is outputting CommonJS, which will convert import statements to require() calls. You cannot use require() to import ESM modules.

Given that you are running node v16, you should be able to target ESM modules in your tsconfig.json natively. Try changing "module": "commonjs", to "module": "ES2020",.

Alternatively you could switch to using async import expressions to load in the Angular code.

See https://www.typescriptlang.org/docs/handbook/modules.html for more info.

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Dec 7, 2021

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@petebacondarwin @LanderBeeuwsaert
X Tutup