Angular-cli: [1.5.0-rc.5] Failed to load templateUrl path when enabling hmr

[aitboudad]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0-rc.6
Node: 8.6.0
OS: linux x64
Angular: 5.0.0-rc.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0-rc.6
@angular-devkit/build-optimizer: 0.0.31
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.6
@schematics/angular: 0.0.48
typescript: 2.5.3
webpack: 3.8.1

Repro steps.

• https://github.com/aitboudad/ng-cli-19994
• ng serve --hmr -e=hmr

The log given by the failure.

[filipesilva]

@aitboudad heya, can you try doing ng serve --hmr -e=hmr --no-aot? With Angular 5 + CLI 1.5 serve defaults to AOT, and I suspect HMR doesn't work with AOT.

[aitboudad]

@filipesilva it's work with --no-aot when using hmr, I suggest to turn off aot

[aitboudad]

@filipesilva for the build part ng build --prod --build-optimizer -sm produce a large bundle size that contains @angular/compiler!!

[filipesilva]

I'll make a PR to add this information to the HMR docs.

I think you're getting @angular/compiler in your production bundle because of the import { createNewHosts } from '@angularclass/hmr'; import. To compile updated components on the fly it must be using the compiler.

[aitboudad]

another issue I've got when using lazy load route:

ERROR in ./src/app/child/child.module.ts
Module build failed: Error: ..../child/child.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:693:23)
    at plugin.done.then (node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://127.0.0.1:9096/ webpack/hot/dev-server ./src/main.ts

[filipesilva]

That one seems very similar to what's reported in #8207, but I haven't been able to reproduce it yet. Can you tell me exactly how to reproduce it please? Also would like to know if it only happens with HMR on.

[aitboudad]

added a simple example ng-cli-19994#5c2e355f and I also I checked several scenario

| cmd | status |
| ------------- | ------------- |
| ng serve | work |
| ng serve --hmr -e=hmr --no-aot | not working |
|ng serve --no-aot | not working |

if I removed the hmr code in the main.js script with ng serve --no-aot the error appear but the build continue to work

[aitboudad]

I think you're getting @angular/compiler in your production bundle because of the import { createNewHosts } from '@angularclass/hmr'; import. To compile updated components on the fly it must be using the compiler.

It's not hmr but on how we call bootstrapModule try with:

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
bootstrap();

and you'll noticed that the @angular/compiler is part of main bundle.

[filipesilva]

Thanks a lot for setting up that repro, it really helps to debug what's going on 👍

[filipesilva]

I'm trying your repo and this is what I get:

• ng serve --aot: builds correctly but fails at runtime with the following error:

GET http://localhost:4200/ui-select/ui-select.html 404 (Not Found)
Unhandled Promise rejection: Failed to load ../ui-select/ui-select.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ../ui-select/ui-select.html undefined

• ng serve --no-aot: fails to build with the following error:

ERROR in ./src/app/home/home.module.ts
Module build failed: Error: D:\sandbox\ng-cli-19994\src\app\home\home.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (D:\sandbox\ng-cli-19994\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:693:23)
    at plugin.done.then (D:\sandbox\ng-cli-19994\node_modules\@ngtools\webpack\src\loader.js:467:39)
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

• ng serve --hmr -e=hmr --no-aot: same as ng serve --no-aot

Investigating further.

[filipesilva]

I also tried your repro but with CLI 1.4.9, Angular packages at 4.4.6 and TypeScript at 2.3.2:

• ng serve --aot: builds correctly and does not fail at runtime
• ng serve --no-aot: same as above
• ng serve --hmr -e=hmr --aot: same as above
• ng serve --hmr -e=hmr --no-aot: same as above

So all of these worked before, but are not working with 1.5. This is a bug and will be fixed.

[filipesilva]

I'm working on these errors (and others) in https://github.com/angular/angular-cli/pull/8215.

It looks like there's some problem in the bootstrap replacement as you mentioned.

// doesn't work
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

// works
function bootstrap () {
  return platformBrowserDynamic().bootstrapModule(AppModule);
}

[asadsahi]

@filipesilva related to your comments here https://github.com/angular/angular-cli/issues/8207#issuecomment-340177756 and in this issue, what is the issue? I have tried, with or without aot and with or without hmr. no option works for me.

Is it a cli issue or angular's?

[filipesilva]

@asadsahi it is a CLI issue. Have you tried https://github.com/angular/angular-cli/issues/8234#issuecomment-340202362? (replacing the bootstrap)

[asadsahi]

@filipesilva with angular 5.0.0-rc.8 & angular-cli 1.5.0-rc.6 tried following:

aot + hmr = doesn't work
no aot + no hmr = doesn't work

I have tried with both bootstrap options:

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

OR

function bootstrap () {
return platformBrowserDynamic().bootstrapModule(AppModule);
}

getting these errors:

[0]  @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
[0] ERROR in ./src/app/+profile/profile.module.ts
[0] Module build failed: Error: c:\Users\Asad\ngnode-fullstack\src\app\+profile\profile.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
[0]     at AngularCompilerPlugin.getCompiledFile (c:\Users\Asad\ngnode-fullstack\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:693:23)
[0]     at plugin.done.then (c:\Users\Asad\ngnode-fullstack\node_modules\@ngtools\webpack\src\loader.js:467:39)
[0]     at <anonymous>
[0]  @ ./src/$$_lazy_route_resource lazy
[0]  @ ./node_modules/@angular/core/esm5/core.js
[0]  @ ./src/main.ts
[0]  @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
[0] ERROR in ./src/app/+register/register.module.ts
[0] Module build failed: Error: c:\Users\Asad\ngnode-fullstack\src\app\+register\register.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Do you want me to try any other option?

[filipesilva]

I can confirm that (locally) the fixes I have in https://github.com/angular/angular-cli/pull/8215 together with changing the bootstrap as I mention in https://github.com/angular/angular-cli/issues/8234#issuecomment-340202362 make all the scenarios that previously worked in 1.4.9 also work in 1.5.0 (https://github.com/angular/angular-cli/issues/8234#issuecomment-340186316).

I'm still working out the kinks out of that PR but it should be good to go for the next release. Thanks for bearing with me while I debug this.

[filipesilva]

Heya, pushed a new commit into https://github.com/angular/angular-cli/pull/8215 that should take care of the bootstrap problem.

@asadsahi the problems you're seeing should also be fixed in that PR.

[asadsahi]

@filipesilva should the fix be in angular-cli v1.5.0-rc.7 ? can't see any difference.

Also with cli v1.5.0+ is following bootstrap a permanent change?
function bootstrap() {
return platformBrowserDynamic().bootstrapModule(AppModule);
}

[filipesilva]

@asadsahi it's not merged yet, but should be merged for the next release. You should be able to use const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); when that PR is merged.

[filipesilva]

@aitboudad @asadsahi the fix for this is coming out as @angular/[email protected]. Please try it together with @angular/[email protected] (and other Angular packages) and let me know if you're still seeing this.

[elvisbegovic]

@filipesilva initial step seems to be faster I build initial step "ng s --sm=false" in 65seconds.

BUT unfortunatly when I edit file the recompilation takes still:
on 0% = 30 seconds like before then the rest in 10seconds

Angular CLI: 1.5.0-rc.8
Node: 6.11.0
OS: win32 x64
Angular: 5.0.0-rc.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0-rc.8
@angular-devkit/build-optimizer: 0.0.31
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.8
@schematics/angular: 0.0.49
typescript: 2.5.3
webpack: 3.8.1

otherwise for your information now I can build with --no-aot in 21seconds without this error:
bail.module.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

[aitboudad]

@filipesilva I can confirm that everything is working now :+1: , the only remark I have is the incremental update is a little bit slow for AOT mode

[filipesilva]

@istiti @aitboudad with CLI 1.5 and Angular 5, ng serve will default to using AOT. It should be much faster than before, but it seems it still isn't very fast in your projects. You can turn it off with --no-aot but I would also like to make it faster if I can.

Would you be interested in submitting a CPU profile showing where the time is spent on your rebuilds? I can use that to figure out bottlenecks. I put detailed instructions on how you can do that here: https://github.com/angular/angular-cli/issues/8259

[angular-automatic-lock-bot[bot]]

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._}