Issue
I recently upgraded from Angular 11 -> 12 -> 13 using update.angular.io. The site works fine after the upgrade, but ng serve
no longer works correctly. It does detect changes and re-builds the site, but I can't see the changes in the browser. The browser doesn't detect and automatically refresh, but even if I do clear the cache and refresh, I still get the same site without changes. It seems to me that ng serve
is not serving up the updated bundles. The only solution I've found is to stop the dev server, delete "dist" and then re-build and run ng serve
. I have blown away "node_module" folder and package-lock.json file multiple times and cleared my npm cache.
From packages.json:
"dependencies": {
"@angular/animations": "^13.3.5",
"@angular/common": "^13.3.5",
"@angular/compiler": "^13.3.5",
"@angular/core": "^13.3.5",
"@angular/forms": "^13.3.5",
"@angular/localize": "^13.3.5",
"@angular/platform-browser": "^13.3.5",
"@angular/platform-browser-dynamic": "^13.3.5",
"@angular/router": "^13.3.5",
"@fortawesome/angular-fontawesome": "^0.10.2",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@microsoft/signalr": "^3.1.24",
"@ngrx/effects": "^13.1.0",
"@ngrx/store": "^13.1.0",
"@ngrx/store-devtools": "^13.1.0",
"bootstrap": "^4.6.1",
"ngx-bootstrap": "^6.1.0",
"ngx-cookie-service": "^13.2.0",
"oidc-client": "^1.10.1",
"reflect-metadata": "^0.1.13",
"rxjs": "^7.5.5",
"simplebar-angular": "^2.3.6",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.3.3",
"@angular-devkit/build-webpack": "^0.1303.3",
"@angular/cli": "^13.3.4",
"@angular/compiler-cli": "^13.3.5",
"@angular/language-service": "^13.3.5",
"@schematics/angular": "^13.3.3",
"@types/jasmine": "~4.0.3",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^17.0.27",
"file-saver": "^2.0.2",
"jasmine-core": "~4.1.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.3.19",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts-node": "^10.7.0",
"tslint": "~6.1.0",
"typescript": "~4.6.3",
"webpack-bundle-analyzer": "^4.5.0"
}
Edit: I think it may be related to this error:
Uncaught TypeError: __webpack_require__.h is not a function
at Module.41276 (styles.js:1061:44)
at __webpack_require__ (bootstrap:19:1)
at __webpack_exec__ (styles.js:3075:48)
at styles.js:3076:37
at webpackJsonpCallback (jsonp chunk loading:71:1)
at styles.js:1:87
Other than some file names and line numbers, the error matches this unanswered question: TypeError: __webpack_require__.h is not a function
Solution
For me, the issue was that the ASP.NET Core site that I was running Angular in was loading the angular site and also proxying to the webpack development server. So it was running twice.
In the Startup.cs class, I had to add an environment check here and ignore when running in Development. Because I wasn't checking this before, the SPA static files were being added to the services when they aren't needed (when debugging).
if (!env.IsDevelopment())
{
// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = $"{SPA_ROOT_DIRECTORY_NAME}/dist";
});
}
I didn't change this code, but for reference, this shows later in Startup.cs where the proxy to the webpack dev server is being setup.
spa.Options.SourcePath = SPA_ROOT_DIRECTORY_NAME;
if (env.IsDevelopment() &&
bool.TryParse(Configuration["UseProxyToSpaDevelopmentServer"],
out bool useProxyToSpaDevelopmentServer) &&
useProxyToSpaDevelopmentServer)
{
//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
Answered By - Brandon Rader
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.