Search code examples
angularangular-clihot-module-replacementangular-cli-v11

Angular 11 – [HMR] Update failed: NullInjectorError: No provider for ApplicationRef

So I have updated an Angular 10 project into an Angular 11 project.

Everything works fine except the new bright and shiny hot module replacement.

So I've went through all the steps and I have a compiling app. When using the --hmr flag everything looks nice. Until I come to the browser and see a warning on the console:

[WDS] App hot update... reloadApp.js:19
[HMR] Checking for updates on the server... log.js:24
[HMR] Update failed: NullInjectorError: No provider for ApplicationRef!
get@http://localhost:4200/vendor.js:23645:27
getToken@http://localhost:4200/vendor.js:80240:62
getApplicationRef@http://localhost:4200/vendor.js:80243:28
default_1/<@http://localhost:4200/vendor.js:80181:41
hotApplyInternal@http://localhost:4200/runtime.js:644:16
hotApply@http://localhost:4200/runtime.js:412:19
hotUpdateDownloaded/<@http://localhost:4200/runtime.js:387:22
invoke@http://localhost:4200/polyfills.js:9738:30
run@http://localhost:4200/polyfills.js:9497:47
scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:10231:40
invokeTask@http://localhost:4200/polyfills.js:9773:35
runTask@http://localhost:4200/polyfills.js:9541:51
drainMicroTaskQueue@http://localhost:4200/polyfills.js:9943:39
promise callback*scheduleMicroTask@http://localhost:4200/polyfills.js:9926:32
scheduleTask@http://localhost:4200/polyfills.js:9762:42
scheduleTask@http://localhost:4200/polyfills.js:9584:47
scheduleMicroTask@http://localhost:4200/polyfills.js:9604:29
scheduleResolveOrReject@http://localhost:4200/polyfills.js:10221:18
then@http://localhost:4200/polyfills.js:10353:44
hotUpdateDownloaded@http://localhost:4200/runtime.js:386:15
hotAddUpdateChunk@http://localhost:4200/runtime.js:362:13
webpackHotUpdateCallback@http://localhost:4200/runtime.js:58:29
@http://localhost:4200/soft-login-soft-login-module-ngfactory.4092c72c4d6fd794913e.hot-update.js:1:17

What is that and what do I need to do to fix it?

What I've done

  • Ran ng update @angular/core @angular/cli
  • Ran ng update @angular/material
  • Ran ng update
  • Deleted package-lock.json and node_modules
  • Ran npm cache clean --force to clean the NPM cache
  • Ran npm i to install everything again
Solution

  • Make sure you don't disable Ivy.

    I had this on my tsconfig.json

    ...
"angularCompilerOptions": {
    ... other flags
    "enableIvy": false
  }

    Removing the "enableIvy": false fixed the problem