enten
commented
6 years ago UPDATE: check next comment
I investigated this issue and unfortunately, I don't find a maintenable way to achieve HMR with @angular/material.
To summarize this issue: hmr doesn't work with angular-devkit server builder.
The issue triggered when webpack/hot/poll.js try to require hmr update from @angular/material/*.ngFactory.
It's due to design of @angular/material package exports,
I found a solution by include @material/material components in tsconfig.server.ts:
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../dist/out-tsc/app/server",
"module": "commonjs"
},
"angularCompilerOptions": {
"entryModule": "./app/app.server.module#AppServerModule"
},
+ "include": [
+ "./**/*",
+ "../node_modules/@angular/material/button*",
+ "../node_modules/@angular/material/card*",
+ "../node_modules/@angular/material/toolbar*"
]
}And bundle all dependencies in server build (in angular.json):
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/app/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json",
+ "bundleDependencies": "all"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},And finally replace webpack/hot/poll.js entry (in udk dev container) by a custom one which will use HMR Management API to not apply changes from modules @angular/material/*.ngfactory.
I found another solution based on typescript compiler paths option by resolving @angular/material/*.ngFactory to a proxy ngFactory which resolve the exists one in runtime.
May we can share this issue with angular/material team.
I am running
npm run devWhen I edit a file i get the error: [HMR] Cannot apply update. [HMR] Error: Cannot find module '@angular/material/toolbar.ngfactory'
After this I need to manually restart the server on serverside changes i'm making.
Hope someone can help me out.
Thanks