angular-cli: ERROR in Cannot read property 'map' of undefined, resolving symbol AppModule

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 7 professional

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here:

ng --version angular-cli: 1.0.0-beta.24 node: 6.6.0 os: win32 x64

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.

webpack: bundle is now INVALID. webpack: wait until bundle finished: /index.html Hash: 63e75ff62ec19674e859 Time: 7591ms chunk {0} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 76.7 kB {3} [initial] chunk {1} main.bundle.js, main.bundle.map (main) 11.8 kB {2} [initial] chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 4.08 MB [initial] chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]

ERROR in Cannot read property ‘map’ of undefined, resolving symbol AppModule in C:/Users/507644/Workspace/ATT/shared/*****/src/app/app.modul e.ts, resolving symbol AppModule in C:/Users/507644/Workspace/ATT/shared/****/src/app/app.module.ts webpack: bundle is now VALID.

app.module.ts

  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    routing
  ],

angular cli

{
  "name": "****",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "ng2-translate": "^5.0.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "phantomjs-prebuilt": "^2.1.14",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

Thanks! We’ll be in touch soon.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 15 (1 by maintainers)

Most upvoted comments

I am receiving a similar error on beta24.

ERROR in Cannot read property ‘map’ of undefined.

There is absolutely no detail to what is causing this error. Searching through my own code I cannot find this map undefined issue.

Hi, Iam using angular-seed Running the app with out AoT works fine.

compile.ahead.prod TypeError: cannot read property map of undefined at evaluator at evaluateNode evaluator.ts 332:48 image

I don’t pretend to know the answer to the question, but in my case it was possible to dig a little further, so I thought I’d share in case it’s helpful to others.

I got the same exception, and can reproduce it by manually invoking the angular compiler:

$(npm bin)/ngc -p src/tsconfig.json

which yields the same message with a stacktrace:

TypeError: Cannot read property 'map' of undefined
    at Evaluator.evaluateNode (/path/to/my/app/node_modules/@angular/tsc-wrapped/src/evaluator.js:302:54)
    at _loop_1 (/path/to/my/app/node_modules/@angular/tsc-wrapped/src/collector.js:388:54)
    at /path/to/my/app/node_modules/@angular/tsc-wrapped/src/collector.js:447:25
    at visitEachNode (/path/to/my/app/node_modules/typescript/lib/typescript.js:8338:30)
    at Object.forEachChild (/path/to/my/app/node_modules/typescript/lib/typescript.js:8498:24)
    at MetadataCollector.getMetadata (/path/to/my/app/node_modules/@angular/tsc-wrapped/src/collector.js:271:12)
    at CompilerHost.getMetadataFor (/path/to/my/app/node_modules/@angular/compiler-cli/src/compiler_host.js:179:51)
    at StaticSymbolResolver.getModuleMetadata (/path/to/my/app/node_modules/@angular/compiler/bundles/compiler.umd.js:26154:64)
    at StaticSymbolResolver._createSymbolsOf (/path/to/my/app/node_modules/@angular/compiler/bundles/compiler.umd.js:26015:48)
    at StaticSymbolResolver.getSymbolsOf (/path/to/my/app/node_modules/@angular/compiler/bundles/compiler.umd.js:25996:16)
Compilation failed

From here, I could add some debugging around the offending line in the evaluator to see what was being processed at the time, and found a Typescript construct that doesn’t compile with ngc. In my case, it was a singleton instantiated with an anonymous class (export const SomeSingleton = new class { ... } - I don’t advocate the syntax, but tsc is fine with it).

Unfortunately, it doesn’t look like ngc and tsc agree on the code in my app. I can’t find any details about which constructs play nicely with ngc, so correcting issues like this is fraught with trial-and-error.

From the perspective of using ng for this, I think it might be advantageous for debugging if ng exposed the underlying exception, as at least it would be obvious that the problem lies with the application code. Perhaps this is already possible with CLI configuration options, but I haven’t found any way to do it yet.

based on @DanielKucal post I searched my code base for each instance on 'new ’ and located a case of object instantiation that existed without (); this was my culprit.

I have resolved it somehow…

  1. First run (npm bin)/ngc -p tsconfig.json - this will give you some stack trace.
  2. In a file from stack trace, for me it was @angular/tsc-wrapped/src/collector.js line 142, add console.log to print failing object.
  3. For me it was method and I was able to find failing file by name from stack trace.
  4. For me there was syntax new Class without (), so I added it.
  5. It can differ for you, but workflow should be similar. Good luck with resolving next errors 🤣