3

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

Brandon Rader
  • 916
  • 9
  • 24
  • Things I have tried that haven't worked: Update npm packages, deleting node_modules and package-lock.json and re-running npm install, comparing package versions against a new Angular 13 application. – Brandon Rader May 26 '22 at 15:54
  • I'm having similar issues and have been noticing it since ng13 upgrade. I think this is a bug in the caching mechanisms that they are probably going to work out but haven't seen even a confirmation of the bug yet. Did you find a solution? – dudewad Jun 17 '22 at 18:50
  • Tagging you @dudewad, I just posted an answer that worked for me. The details of my answer are specific to using Angular within a .NET Core site, but the general idea may apply to other situations – Brandon Rader Jul 13 '22 at 14:28

1 Answers1

2

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).

// Build a service provider and use it to get IHostEnvironment.
IServiceProvider provider = services.BuildServiceProvider();
IHostEnvironment? env = provider.GetRequiredService<IHostEnvironment>();

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");
}
Brandon Rader
  • 916
  • 9
  • 24
  • Can you post the entire startup.cs please? I'm running into the same problem but I think the AddSpaStaticFiles call is in a different place than yours. – Alex Jul 29 '22 at 21:15
  • I'm on VS 2019 running .net 5 BTW – Alex Jul 29 '22 at 21:36
  • @Alex I take it that IHostEnvironment is not available to you because you are calling it in ConfigureServices (which is the correct place to make the call). But you can get it by building your service provider in that method. I've edited the first code block in my answer to show how this is done. You can do this with any dependencies you might need as long as you build after you have added it to the services collection. – Brandon Rader Aug 03 '22 at 21:22
  • Thanks. I just tried your suggestion but there are a couple of issues. I get a warning on the line IServiceProvider provider = services.BuildServiceProvider(); stating it causes another copy of a singleton (though it doesn't block compilation). The second blocking issue is that the app doesn't load. The browser displays this: To use UseSpaStaticFiles, you must first register an ISpaStaticFileProvider in the service provider, typically by calling services.AddSpaStaticFiles. I already had your second block as well but not firing AddSpaStaticFiles is preventing the app from running – Alex Aug 04 '22 at 17:18
  • I haven’t experienced that before, but I wonder if you could call BuildServiceProvider before you add any singleton services to the collection. Call it at the top of ConfigureServices even. – Brandon Rader Aug 06 '22 at 02:36
  • Just recently updated from 12 and ran into this exact issue, which fixed the problem. Great find. – user2040277 Jun 06 '23 at 19:50