[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 👍