TypeError: Cannot read property 'members' of undefined

Question

I started upgrading from Angular 4.4.4 to 5.1.1 today. I have had to upgrade a number of other packages that rely on angular as well. I get an error with so little context that I have no idea where to start. Has anyone else seen this and know what the issue is?

$ ng serve --aot=false
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-19T15:26:36.137Z
Hash: bf0b773d5dfafdd9133b
Time: 16934ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 307 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 4.03 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 855 kB [initial] [rendered]

ERROR in TypeError: Cannot read property 'members' of undefined
    at AotSummaryResolver.resolveSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:32638:56)
    at CompileMetadataResolver._loadSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:14825:66)
    at CompileMetadataResolver._getEntryComponentMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15857:66)
    at C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15323:55
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15323:18)
    at CompileMetadataResolver.getNgModuleSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15157:52)
    at C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15245:72
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15230:49)
    at visitLazyRoute (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:31061:104)
    at AotCompiler.listLazyRoutes (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:31029:20)
    at AngularCompilerProgram.listLazyRoutes (C:\source\app\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\source\app\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\source\app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (C:\source\app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:562:50)

webpack: Failed to compile.

I find it strange that it starts in AotSummaryResolver when I have --aot=false in the serve command.

Here is my package.json:

{
  "name": "test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --aot=false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-devkit/schematics": "^0.0.42",
    "@angular/animations": "5.1.1",
    "@angular/cdk": "5.0.1",
    "@angular/common": "5.1.1",
    "@angular/compiler": "5.1.1",
    "@angular/core": "5.1.1",
    "@angular/forms": "5.1.1",
    "@angular/http": "5.1.1",
    "@angular/platform-browser": "5.1.1",
    "@angular/platform-browser-dynamic": "5.1.1",
    "@angular/platform-server": "5.1.1",
    "@angular/router": "5.1.1",
    "@auth0/angular-jwt": "^1.0.0-beta.9",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "@ng-idle/core": "^2.0.0-beta.13",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/entity": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@schematics/angular": "^0.1.11",
    "@schematics/schematics": "^0.0.11",
    "angular2-counto": "^1.2.3",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "d3": "^4.11.0",
    "echarts": "^3.6.0",
    "echarts-gl": "^1.0.0-alpha.5",
    "font-awesome": "^4.7.0",
    "global": "^4.3.2",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "moment": "^2.19.4",
    "ng2-dnd": "^5.0.2",
    "popper.js": "^1.11.0",
    "roboto-fontface": "^0.7.0",
    "rxjs": "^5.5.2",
    "toastr": "^2.1.2",
    "ts-action": "^3.2.2",
    "typings": "^2.1.1",
    "uuid": "^3.1.0",
    "web-animations-js": "^2.2.5",
    "yarn": "^0.24.5",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "5.1.1",
    "@types/d3": "^4.11.0",
    "@types/echarts": "^0.0.6",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.45",
    "@types/node": "^7.0.23",
    "@types/toastr": "^2.1.33",
    "@types/uuid": "^3.4.0",
    "codelyzer": "^4.0.2",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "json-server": "^0.12.0",
    "jsonwebtoken": "^7.4.1",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "^5.8.0",
    "typemoq": "^1.7.0",
    "typescript": "2.4.2"
  }
}

My angular-cli version is 1.6.1.

The error seems to occur here in the angular source code: https://github.com/angular/angular/blob/b3eb1db6dd57a0820cfc94af5460ceb3fea20610/packages/compiler/src/aot/summary_resolver.ts#L68

SOLUTION

Previously I thought it was related to ng-bootstrap which was incorrect.

I found some context for it by putting a console log at line 15207 in compiler.umd.js as follows:

if (meta.entryComponents) {
    console.log(meta);
    entryComponents.push.apply(entryComponents, flattenAndDedupeArray(meta.entryComponents)
                .map(function (type) { return /** @type {?} */ ((_this._getEntryComponentMetadata(type))); }));
}

Which resulted in:

...
entryComponents: [ undefined ],
...

I had a module with entryComponents: [MdProgressSpinner] where MdProgressSpinner was not imported. When I removed it that error went away... and the next one came :)

Solution 1

One of the reasons this can happen is in you app module, you have an entry components which the build process can't find a import for (in below example if I comment out the import line and leave the component then it causes this error).

Solution 2

I was getting this error message when creating a new library. It turned out that in public_api.ts of that library, I was importing an index.ts file. This type of bundle are still not handle well. Making separate imports to each file to expose the public API was the solution in my case.

Solution 3

I had the same issue and nearly gave up. Your question contained the tip that helped me pinpoint the problem, but I totally missed it because it was part of the question.

Put a console log at line 15258 in compiler.umd.js (or whatever exact line your error points you to):

if (meta.entryComponents) { console.log(meta); //<== Add this

My console log contained the following at the end: { ngMetadataName: 'NgModule', declarations: [ null ], ... entryComponents: [ null ] }

The issue turned out to be a Module that imported a class like this:

import MyComponent from "./my-component.component.ts";

The class was exported using default:

export default class MyComponent { ...

Removing default, and adding curly brackets to the import worked!

import { MyComponent } from "./my-component.component.ts";

Comments

[Sviatoslav Novosiadlyj]

Yes, I still cannot get why it affects only dynamic components, but export default doesnt work

[ali akbar azizkhani]

i have this problem in library . how you resolve that can you explain ?

[Laurent Jacquot]

I simply removed the index.ts files and replaced them by making the imports using full relative path. As an example, instead of importing via the index file such as "import { MyComponent } from './components'", you should import directly such as "import { MyComponent } from './components/my-component.ts'"

[Barry McNamara]

One reason this can apparently happen is the spread operator. If you want to use entry components from an array declared elsewhere, use concat.

[Hamed Zakery Miab]

Worked for me!! This should be the answer I think. did you created any ticket for this?

[Zdravko Kolev]

I had the same problem, thank you for pointing that out! github.com/IgniteUI/igniteui-angular/pull/5705/files import { IgxGridComponent } from '../grid'; .. to import { IgxGridComponent } from '../grid/grid.component';

[The Red Pea]

Hi Laurent, do you mean you were using the "barrel" style of import (archived link)? And it sounds like you did same as Gunther here, "Import it from the file where it is declared directly instead of the barrel." ? For reference 1) Angular once discouraged barrels, but the links are all broken, 2) barrels are OK, but instead, can use Angular NgModule to re-export.

[The Red Pea]

Another link about "barrels" (index.ts) file failing, due to the order of the export statements

[Alan Smith]

@BarryMcNamara thanks! That was my issue. Using concat worked.

[Alexander]

Confirming this is helpful :) Got rid of index.ts for Components (only) and it was enough. Seems like referencing Components in EntryComponents does not make friends with index.ts usage in public-api.

[John Smith]

Thank you for saving me a ton of time!