Angular-cli: __NG_CLI_RESOURCE__0 is not defined

Created on 7 Sep 2020 · 7Comments · Source: angular/angular-cli

🐞 Bug report

Command (`ng test`)

[X] test

Is this a regression?

Did this behavior used to work in the previous version?
Yes, 10.0 was working

Description

when running ng test and I have ng template with template url I got an error

🔬 Minimal Reproduction

commands:

npm install -g @angular/cli
ng new template-url-ng-cli-issue ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS
cd template-url-ng-cli-issue
add "module": "CommonJS" tsconfig.spec.json

🔥 Exception or Error


Chrome 85.0.4183.83 (Mac OS 10.15.5) ERROR
  An error was thrown in afterAll
  Uncaught ReferenceError: __NG_CLI_RESOURCE__0 is not defined
  ReferenceError: __NG_CLI_RESOURCE__0 is not defined
      at Object.Sy1n (http://localhost:9876/_karma_webpack_/src/app/app.component.ts:5:3)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
      at Object.eQIV (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:2:1)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
      at webpackContext (http://localhost:9876/_karma_webpack_/src sync \.spec\.ts$:8:1)
      at Array.map ()
      at Object.CB3P (http://localhost:9876/_karma_webpack_/src/test.ts:25:16)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
      at checkDeferredModules (http://localhost:9876/_karma_webpack_/webpack/bootstrap:45:1)
Chrome 85.0.4183.83 (Mac OS 10.15.5): Executed 0 of 0 ERROR (0.006 secs / 0 secs)

Example Repo

https://github.com/alyahmedaly/template-url-ng-cli-issue

Findings

I tried to debug the problem and here a repo with my findings

https://github.com/alyahmedaly/ng-bug-resourceload

if you checked output file for es2015 build looks correct

But for commonJS it's not correct.

If you check line 10 and line 17 you will see the variable name is not correct

Note: I did copy https://github.com/angular/angular-cli/blob/60a42c28f641d47f635bc1621c7c8ef45de87e76/packages/ngtools/webpack/src/transformers/replace_resources.ts#L131 to reproduce this problem

looks like it's typescript issue or because this happening in transform phase and ts symbols is already created I don't know 🤷‍♂️

🌍 Your Environment


Angular CLI: 10.1.0
Node: 12.18.3
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.0
@angular-devkit/core         10.1.0
@angular-devkit/schematics   10.1.0
@schematics/angular          10.1.0
@schematics/update           0.1001.0
rxjs                         6.6.2

ngtoolwebpack low regression bufix

Source

alyahmedaly

All 7 comments

I found this link which is saying I should not sure commonJS in tsconfig.json but if this the case are you guys had migration before for this case?

alyahmedaly on 7 Sep 2020

Any reason why you are using commonjs as a module for a web application? Typically commonjs is used for Node.Js applications.

Also using commonjs doesn’t breaks several things such as tree-shaking, requires extra ngcc entry-point processing and lazy loading among others.

Possibly, we can revert the change in introduce it in a major version if there are more people impacted by this, but I’d like to understand the reason why the module was set to commonjs in the first place.

Unfortunately TypeScript is unable to emit the created ES default import to a require statement successfully when targeting CommonJS.

alan-agius4 on 7 Sep 2020

I agree with everything you said there is no good reason to use commonjs here, but that was the case before upgrading to angular 10.1 for us we just changed to es2015, I wonder if other users still impacted.

Also, the error is very hard to debug if the angular cli users are not aware of how ng cli working so at least adding a friendly error message might help

alyahmedaly on 7 Sep 2020