__NG_CLI_RESOURCE__0 is not defined

[alyahmedaly]

🐞 Bug report

Command (ng test)

• 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

angular-cli/packages/ngtools/webpack/src/transformers/replace_resources.ts

Line 131 in 60a42c2

const importName = createResourceImport(node.initializer, directTemplateLoading ? '!raw-loader!' : '', resourceImportDeclarations);

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

[alyahmedaly]

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?

[alan-agius4]

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.

[alyahmedaly]

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]

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

Should I open bug for typescript or this is known limitation?

[alan-agius4]

More info: microsoft/TypeScript#18369 (comment)

Will land a fix tomorrow.

[coffeymatt]

I'm seeing the same error just running ng serve since going from 10.0.8 to 10.1.0, can't start my project