ng serve --watch --aot and lazy loaded modules - doesn't work anymore

[alvipeo]

CLI 6.0.1
angular 6.0.1
Windows 10 x64

I use the following when I work on the project:

ng serve --ssl --host %NetworkIP% --port 4200 --proxy-config proxy.config.json --watch --aot

and the first time I run the project everything works. But for all subsequent changes in any file of the lazy loaded modules, the module does not load and throws the error:

Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at webpack_require (bootstrap:81)
at Object../src/app/collaboration/components/availableView.component.ngfactory.js (availableCollView.component.ts:20)
at webpack_require (bootstrap:81)
at Object../src/app/collaboration/containers/availableColls.component.ngfactory.js (workCard.component.ts:30)
at webpack_require (bootstrap:81)
at Object../src/app/collaboration/collaboration.module.ngfactory.js (collaboration-routing.module.ts:85)
at webpack_require (bootstrap:81)
at $_lazy_route_resource lazy namespace object:61

etc. So I have to restart ng serve every time.

Here's the routing config:

const routes: Routes = [
    ...
   {
      path: "collaboration",
      canActivate: [RoleAuthorizationGuard],
      loadChildren: "./collaboration/collaboration.module#IlgCollaborationModule"
   },
   ...
];

@NgModule({
   imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule],
   providers: [CanDeactivateGuard]
})
export class AppRoutingModule {}

[alvipeo]

Another variant of the error:

Uncaught (in promise): Error: Cannot find 'IlgCollaborationModule' in './collaboration/collaboration.module'
Error: Cannot find 'IlgCollaborationModule' in './collaboration/collaboration.module'
at checkNotEmpty (core.js:5588) [angular]
at vendor.js:33707:47 [angular]
at Object.onInvoke (core.js:4062) [angular]
at polyfills.js:3194:34 [angular]
at Object.onInvokeTask (core.js:4053) [angular]
at drainMicroTaskQueue (zone.js:595) []

[TomDemulierChevret]

Same issue here, having to restart the serve every time is quitte cumbersome.

[krilllind]

Facing the same issue as @alvipeo, I feel like this need an urgent fix.
This is my configuration:

Angular CLI: 6.0.3
Node: 8.11.1
OS: win32 x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

[alvipeo]

Yes, 6.0.3 doesn't work either..

[kritisoft]

Same issue here, Please find a fix for this or a workaround.

[kernwig]

Workaround please. I tried disabling AOT, but that results in dependency injection failing. I don't see an easy to disable router lazy loading.

[kernwig]

Found my temporary workaround. For dev, I disabled AOT and, as a result, had to uncomment
import 'core-js/es7/reflect'; in polyfills.ts, per the comment stating that it is needed for JIT.

[krilllind]

Tried updating today and see if the new changes would make a difference, but I still face the same problems. My new versions look like this:

Angular CLI: 6.0.5
Node: 8.11.1
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

[manojvignesh]

I too have the same issue. I tried debugging and found that some module is trying to load "./node_modules/rxjs/internal/Observable.js" But i've checked my code and no where i'm using such import statement.

[TomDemulierChevret]

Any news on this ? It would be good to have at least an official statement about the resolution of this issue.

[alexfung888]

Seems fixed in @angular/cli@6.0.7

[TomDemulierChevret]

Not for me.

[alexfung888]

@TomDemulierChevret then aot plus lazy loading is not the only criteria. I have two repositories both with aot and lazy loading. They shows this error (crash when I change source to trigger a recompile). After my upgrade to cli607, neither repository show this problem any more.

[TomDemulierChevret]

Can you do an ng -v of both projects to see if we have the same version for other packages ?

And I don't know the exact source of this issue, but it definitly appeared after upgrading to Angular 6.

[alexfung888]

Yes I am sure I start having the problem somewhere on Angular 6. Then one day one of my repos stop displaying the problem and I spent a long time finding the differences between them.

My two projects are very similar in dependencies.

Angular CLI: 6.0.7
Node: 8.11.0
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cdk                      6.2.0
@angular/cli                      6.0.7
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.2.0
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Angular CLI: 6.0.7
Node: 8.11.0
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cdk                      6.2.0
@angular/cli                      6.0.7
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.2.0
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

[alexfung888]

by the way, I always serve using

ng serve --aot

and if I add --build-optimizer it will hang (takes forever to compile, staying more than 5 hours at a certain percentage). I have never been able to enable this flag in Angular 6.

[kernwig]

After updating, I can now use aot and optimization, without the polyfill, via the angular.json configuration. (angular.json configurations are the new way in Angular v6, rather than using --aot on the command-line.)

---

Correction - had to keep the polyfill. 😕

[alexfung888]

@kernwig do you mean that if I have
"aot": true,
"buildOptimizer": true,
in the angular.json, I don't need to say --aot and --build-optimizer on ng serve?
Where can I find documentation beyond the brief Angular CLI? In my angular.json under architect/serve/configurations, there is only one production entry. The architect/build/configurations (where the aot: true is found) also only has production entry. How should I edit it for development builds?

[kernwig]

@alexfung888 , yes!

angular.json is documented at https://github.com/angular/angular-cli/wiki/angular-workspace
You'll want to follow the link to the JSON Schema of the project type that you are using, undoubtedly @angular-devkit/build-angular:browser. If you add a configuration in the build section, you'll also need a matching one in the serve section.

It's precise documentation, but not the most human friendly. :-(

[alexfung888]

@kernwig your link is the same as mine. I suppose you mean I should duplicate the production branch to make a development one.

[kernwig]

The problem mysteriously returned. :-(

Some digging and I found that my IDE had added import {combineLatest, Subject} from "rxjs/index"; in one of my components files. I changed it to the proper ... from "rxjs", and the error went away. And then it came back again! Then worked again. Can't really correlate anything i do because it's just inconsistent.

[krilllind]

@kernwig What polyfill are you talking about?

[krilllind]

So, after a lot of debugging and trying back and forth, I finally found the issue related to the "call of undefined" error.

I manage to resolve the issue by removing ALL of my parameters used when running ng serve, and putting them in the new angular.json file. The problem was for me that the automatic migration
from angular-cli.json to angular.json had made my serve configuration point to my build configuration.

So in my configurations object I had a property browserTarget pointing to test-project:build:dev.
I will share my configuration with you all to have a better understanding of how to set up the angular.json schema, as it seems to be the problmen to why builds are not working with lazy modules.

Here is my package.json file:

{
  "name": "test-project",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "ng serve --configuration=dev",
    "build:sv": "ng build --configuration=prod:sv",
    "build:en": "ng build --configuration=prod:en",
    "build:nb": "ng build --configuration=prod:nb",
    "build": "npm run build:en && npm run build:sv && npm run build:nb",
    "extract-i18n": "ng xi18n --locale en --i18nFormat=xlf -p ./tsconfig.json --out-file ./locale/messages.xlf && xliffmerge --profile ./src/locale/xliffmerge.json",
    "stats": "ng build --configuration=prod:en:stats"
  },
  "private": true,
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

And my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "publish",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              ...
            ]
          },
          "configurations": {
            "prod:sv": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.sv.ts"
                }
              ],
              "baseHref": "/",
              "i18nLocale": "sv-SE",
              "i18nFile": "src/locale/messages.sv.xlf",
              "i18nFormat": "xlf",
              "outputPath": "publish/sv",
              "verbose": true,
              "buildOptimizer": true,
              "namedChunks": true,
              "sourceMap": false,
              "aot": true
            },
            "prod:en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.en.ts"
                }
              ],
              "baseHref": "/",
              "i18nLocale": "en-US",
              "i18nFile": "src/locale/messages.en.xlf",
              "i18nFormat": "xlf",
              "outputPath": "publish/en",
              "verbose": true,
              "buildOptimizer": true,
              "namedChunks": true,
              "sourceMap": false,
              "aot": true
            },
            "prod:nb": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.nb.ts"
                }
              ],
              "baseHref": "/",
              "i18nLocale": "nb-NO",
              "i18nFile": "src/locale/messages.nb.xlf",
              "i18nFormat": "xlf",
              "outputPath": "publish/nb",
              "verbose": true,
              "buildOptimizer": true,
              "namedChunks": true,
              "sourceMap": false,
              "aot": true
            },
            "prod:en:stats": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.en.ts"
                }
              ],
              "baseHref": "/",
              "i18nLocale": "en-US",
              "i18nFile": "src/locale/messages.en.xlf",
              "i18nFormat": "xlf",
              "outputPath": "publish/en",
              "verbose": true,
              "buildOptimizer": true,
              "namedChunks": true,
              "sourceMap": false,
              "aot": true,
              "statsJson": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "test-project:build",
            "aot": true,
            "port": 3000,
            "proxyConfig": "proxy.config.json"
          },
          "configurations": {
            "dev": {}
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "test-project:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "test-project",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": ""
    }
  }
}

As you can see, when I run npm run start, angular will spin up a dev-server with the configuration given inside of angular.json test-project > architect > serve > configurations > dev. But for my dev-server, I am not supplying any extra (overrides) settings, so angular will only use the settings defined
inside test-project > architect > serve > options. And as you can see, here I define that I want to use aot.

Note that inside options, propery browserTarget is pointing to the configuration for my build settings, and this is required. Just make sure not to put general settings for your builds in the options configuration, as it will be used for serving your application aswell.

I hope this will resolve this issue for all of you.

PS. For those who want to know what versions I am running, I will share my output from ng -v here:

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

[kernwig]

@krilllind See my May 24th comment:

Found my temporary workaround. For dev, I disabled AOT and, as a result, had to uncomment
import 'core-js/es7/reflect'; in polyfills.ts, per the comment stating that it is needed for JIT.

I'm using AOT again, but still that polyfill. It seems to help, but my failure is now inconsistent.

You're configuration seems odd to me. My understanding is that the configuration blocks under build and serve should match up. Thus I have the build.configurations.dev:

            "dev": {
              "aot": true,
              "sourceMap": true,
              "optimization": false,
              "extractLicenses": true
            },

Then serve.configurations.dev:

            "dev": {
              "browserTarget": "spog:build:dev"
            },

When running npm start, it's use the dev server configuration, which simply says to use the "dev" build configuration. ("spog" being my project name.)

[kernwig]

I gave up and turned off AOT in the dev configuration. :-(

[siimveskilt]

Long story short, use
"@angular-devkit/build-angular": "0.7.0-rc.0",
and problem solved!

[MickL]

That did the trick! Anyway it takes nearly 2 seconds when nothing has changed (only assets)?

[banjankri]

TLDR: "commonChunk": false in your angular.json config for serve command and it may help.

Have tried the upgrade, but it did not work in our case. In the end it turned out that the webpack build used under the hood is producing a common.js chunk which was never loaded (!) neither via html or dynamic import, thus the modules defined in it were missing and bootstrapping failed on first one. This resulted in the error being thrown, mentioned in the bug report (cannot invoke call of undefined) when webpack was trying to initialize a missing module.

[alexfung888]

@banjankri where to add it? under architect/build/configurations?

[banjankri]

In my case I added in under architect/serve/options as I was using similar coomand to @alvipeo and did not want to affect the build, in which in my case it seems common chunk works just fine.

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}