ngtools/webpack: components of lazy-loaded routes are not rebuilt in watch mode when using `extensions: ['.js', '.ts']`

[ztan]

Bug Report or Feature Request (mark with an x)

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

Versions.

"@angular/animations": "^5.0.1",
"@angular/common": "^5.0.1",
"@angular/compiler": "^5.0.1",
"@angular/core": "^5.0.1",
"@angular/forms": "^5.0.1",
"@angular/platform-browser": "^5.0.1",
"@angular/platform-browser-dynamic": "^5.0.1",
"@angular/router": "^5.0.1",
"rxjs": "5.5.2",
"zone.js": "^0.8.18"
"@angular/compiler-cli": "^5.0.1",
"@ngtools/webpack": "^1.8.0",
"typescript": "^2.6.1"

Repro steps.

Here is a part of the config we used for our development builds. It worked all fine in the initial compilation. However when in watch mode we changed a component routed in a lazy-loaded module, webpack didn't rebuild the files.

module: {
	rules: [
		{
			test: /\.ts$/,
			exclude: [/node_modules/, /\.spec\.(js|ts)$/],
			use: ['@ngtools/webpack']
		}
	]
},
plugins: [
	new AngularCompilerPlugin({
		tsConfigPath: path.join(process.cwd(), 'tsconfig.json'),
		entryModule: path.join(process.cwd(), 'src/app/index#AppModule'),
		mainPath: path.join(process.cwd(), 'src/index'),
		compilerOptions: {
			sourceMap: true
		}
	}),
]

Before Angular 5 upgrade, we had ['ng-router-loader', 'ts-loader', 'angular2-template-loader'] as the loader chain. With the Angular team now recommend AOT for dev builds as well, we figured we should use ngtool/webpack for both prod and dev. This bug is preventing us from doing so

The log given by the failure.

No error from the logs

Desired functionality.

Webpack should recompile the changes from a component of lazy-loaded routes, when the routes are processed by ngtools/webpack.

Mention any other details that might be useful.

[ztan]

This morning I found that this issue only happened when skipCodeGeneration is set to true. Could you please confirm if this is intended behaviour?

Please ignore this comment, it is still not working either way.

[filipesilva]

I just tried making a new component in a Angular CLI project, putting it in a lazy module, then serving with ng serve --aot.

Changes to both the component TS and HTML file resulted in reloads reflecting those changes. I cannot reproduce what you are seeing.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[ztan]

minial repo here:
https://github.com/ztan/angular-dev-test
use yarn start to test

It turned out having nothing to do with lazy loaded routes. This section of webpack configuration was the culprit

resolve: {
	extensions: ['.js', '.ts']
}

After I changed the order of extensions, i.e. ['.ts', '.js'], everything worked fine.

[filipesilva]

Hm.... I'm not sure if that's intended, but it's interesting that the order in extensions addressed it. I expect the order to matter, but haven't given it much tough. https://webpack.js.org/configuration/resolve/#resolve-extensions doesn't detail much about it either.

I guess what happens is that since .js was before .ts, webpack resolved some modules to .js and watched those (virtual) files. Since they didn't change, no rebuild was triggered. This didn't affect non-lazy modules because those were actually resolved from main.ts and so somewhere in the dependency chain the TS files were being watched?

That's my theory anyway.

[ztan]

Thanks for looking into it. Without you mentioning minimal repo, I would not have noticed the difference in webpack configurations. Can we close this task now?