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


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