ERROR in Cannot read property 'map' of undefined, resolving symbol AppModule

[anand-ma]

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"
  }
}

• Angular version:
  "@angular/core": "^2.3.1",

---

Thanks! We'll be in touch soon.

[tvblomberg]

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.

[anand-ma]

@tvblomberg yes, I have researched nook and corner, and I have googled every possible site with reputation. I'm hoping atleast someone will give some directions on what to check

[junglebarry]

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.

[xcaliber-private]

Related: angular/angular#13952

[filipesilva]

Closing as it is a ngc issue in reported in angular/angular#13952.

[tkestowicz]

I am getting similar error as you guys. The error says: "Cannot read property 'map' of undefined, resolving symbol CoreModule" and I don't know what is wrong. It started showing after I updated @angular/cli from beta-21 to beta-32.3.

@junglebarry could you explain following part:

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.

What did you do to add debugging and investigate the issue?

[junglebarry]

@tkestowicz I followed the stack trace into node_modules and put some manual debugging inside the offending methods in tsc-wrapped.

I'm afraid I don't have the same version of the code now, or I would be less vague... IIRC the line in my stacktrace (@angular/tsc-wrapped/src/evaluator.js:302:54) was inside a method that was evaluating symbols. I just console.logged the symbol values to find that I had some null values, then added logging to calling methods until I could log out which symbols were being evaluated at the time. I found that certain things I was doing (anonymous typescript classes) did not play nicely with tsc-wrapped, even though they seemed ok with tsc.

I hope that's of some help.

[brockklein]

I would be very grateful for some advanced help on this issue. I'm new to Angular dev, but have been diving in pretty deep for about 4 weeks now. This issue recently popped up for me on a build that had previously been working just fine.

The frustrating thing is if I follow these steps my app compiles fine:

1. ng s and let it fail
2. Comment out some import in my app.module.ts
3. Let the compiler automatically restart
4. Success! (weird)
5. Uncomment the import and let it recompile
6. Success! (even weirder)

(Video for anyone that doesn't believe me.)

But all attempts at ng build --prod fail.

My Webpack/compiler voodoo isn't very strong, so my best guess is there's something about the running change listener with ng s that is somehow being more forgiving with its compiling than ng build.

Anyway, @junglebarry I get the gist of your approach but am at a bit of a loss at how to implement it in my case. If you have time and could offer a couple detailed steps I would be very grateful (e.g. I'm not sure I understand the (npm bin)/ngc -p src/tsconfig.json command - like I said, my compiler voodoo is not strong).

My configuration is almost identical to the OP's, but here it is in case I've missed something:

app.module.ts

// Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

// Third party
import 'rxjs/Rx';
import 'jquery';
import { AngularFireModule, AngularFireAuth, FirebaseAuthState } from 'angularfire2';   // https://angularfire2.com/api/
import { CustomFormsModule } from 'ng2-validation';                                     // https://www.npmjs.com/package/ng2-validation
import { Md2Module } from 'md2';                                                        // https://www.npmjs.com/package/md2
import { MaterializeModule } from 'angular2-materialize';                               // https://www.npmjs.com/package/angular2-materialize

// Configs
import { firebaseConfig, firebaseAuthConfig } from "./firebase.config";

// Services
import { AuthService } from './shared/services/auth.service';
import { OrganizationsService } from './shared/services/organizations.service';
import { EventsService } from './shared/services/events.service';
import { ProductsService } from './shared/services/products.service';
import { ProgramsService } from './shared/services/programs.service';
import { StoreHelper } from './shared/services/appState.service';
import { UsersService } from './shared/services/user.service';

// Guards
// import { CanDeactivateGuard } from './shared/guards/can-deactivate-guard.service';
// import { AuthGuard } from './shared/guards/auth-guard.service';



// App
import { appRouting } from './app.routing';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AppStore } from './shared/models/appStore';
import { NavComponent } from './nav/nav.component';
import { LoginComponent } from './users/login/login.component';
import { SideNavComponent } from './nav/side-nav/side-nav.component';
import { NavbarComponent } from './nav/navbar/navbar.component';
import { OrganizationsComponent } from './organizations/organizations/organizations.component';
import { ProductsComponent } from './products/products/products.component';
import { OrganizationFormComponent } from './organizations/organization-form/organization-form.component';
import { ProductFormComponent } from './products/product-form/product-form.component';



@NgModule({
  imports: [ 
    BrowserModule, 
    FormsModule,
    ReactiveFormsModule,
    appRouting,
    MaterializeModule,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
    CustomFormsModule,
    Md2Module.forRoot()
  ],
  declarations: [ 
    AppComponent,
    NotFoundComponent,
    NavComponent,
    LoginComponent,
    NavbarComponent,
    SideNavComponent,
    OrganizationsComponent,
    ProductsComponent,
    OrganizationFormComponent,
    ProductFormComponent
  ],
  providers: [
    // AuthGuard,
    // CanDeactivateGuard,
    AppStore,
    AuthService,
    OrganizationsService,
    UsersService,
    EventsService,
    ProductsService,
    ProgramsService,
    StoreHelper
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.28.3",
    "name": "myappname"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "styles": [
        "../node_modules/materialize-css/dist/css/materialize.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/hammerjs/hammer.min.js",
        "../node_modules/materialize-css/dist/js/materialize.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

package.json

{
  "name": "myappname",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "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",
    "angular2-materialize": "^6.7.0",
    "angularfire2": "^2.0.0-beta.7",
    "core-js": "^2.4.1",
    "firebase": "^3.6.9",
    "hammerjs": "^2.0.8",
    "jquery": "2.2.4",
    "materialize-css": "^0.98.0",
    "md2": "0.0.13-1",
    "ng2-validation": "^3.3.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "velocity-animate": "^1.4.2",
    "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.28.3",
    "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-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

main.ts

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

[brockklein]

Ah me. Like a true rookie I had created and registered a store (a la redux) provider with a default state....but without defining any of the properties in the default state. And what happens when you try to .map() an undefined property? Cannot read property 'map' of undefined happens. Imagine that.

I found it by commenting out my own imports to find which service was causing the problem.

Lesson for me is that an error when compiling isn't necessarily a compiler problem.

[srinivasan-g]

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

[DanielKucal]

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 🤣

[gowthamgts]

I got it working by uninstalling angular-cli and installing @angular/cli. You can do it by:

npm uninstall --save angular-cli
npm install --save @angular/cli

[cue232s]

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.

[rodrigowindows]

These steps worked for me:
1)Clear package.json with the importat packages for example I have delete my package and insert one by one here is my

{
"name": "test-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "^6.4.2",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/flex-layout": "^6.0.0-beta.17",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.2",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"angular2-uuid": "^1.1.1",
"chartist": "^0.11.0",
"core-js": "^2.5.4",
"jquery": "^3.3.1",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"webpack": "^4.16.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "^6.1.2",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"npm-install-webpack-plugin": "^4.0.5",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.7.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
delete package_locked.json
delete node_modules folder
npm install
Then ng build --prod was successful.