ng serve: Cannot read property 'text' of undefined

[Splaktar]

OS?

Mac OS X El Capitan

Versions.

angular-cli: 1.0.0-beta.25.5, beta.24, beta.22-1
node: 7.3.0 or 6.9.2
os: darwin x64
@angular/common: 2.3.1
@angular/compiler: 2.3.1
@angular/core: 2.3.1
@angular/flex-layout: 2.0.0-beta.1
@angular/forms: 2.3.1
@angular/http: 2.3.1
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.3.1
@angular/platform-browser-dynamic: 2.3.1
@angular/platform-server: 2.3.1
@angular/router: 3.3.1
@angular/compiler-cli: 2.3.1

Repro steps.

Upgrading from beta.19-3 to beta.25.5.

Run upgrade guide including merging in of ng init output.

The log given by the failure.

ERROR in ./src/environments/environment.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (/Users/splaktar/Git/tf/webapp/node_modules/typescript/lib/typescript.js:53369:56)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (/Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./src/main.ts 4:0-57
 @ multi main

ERROR in ./src/app/app.module.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (/Users/splaktar/Git/tf/webapp/node_modules/typescript/lib/typescript.js:53369:56)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (/Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at /Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./src/main.ts 5:0-45
 @ multi main

Mention any other details that might be useful.

This seems to be related to https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/loader.ts#L94 which has two calls to .getText() which seems to assume that all properties have a name field and doesn't check to verify that name is defined.

refactor.findAstNodes(sourceFile, ts.SyntaxKind.ObjectLiteralExpression, true)
    // Get all their property assignments.
    .filter((node: ts.ObjectLiteralExpression) =>
      node.properties.some(prop => prop.name.getText() == 'moduleId'))
    .forEach((node: ts.ObjectLiteralExpression) => {
      const moduleIdProp = node.properties.filter((prop: ts.ObjectLiteralElement, idx: number) => {
        return prop.name.getText() == 'moduleId';
      })[0];
      // get the trailing comma
      const moduleIdCommaProp = moduleIdProp.parent.getChildAt(1).getChildren()[1];
      refactor.removeNodes(moduleIdProp, moduleIdCommaProp);
    });

My ./src/environments/environment.ts

export const environment = {
  production: false
};

My ./src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpModule, JsonpModule} from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import {FlexLayoutModule} from '@angular/flex-layout';
import {MaterialModule} from '@angular/material';
import 'hammerjs';

import {AppRoutingModule} from './app-routing.module';
import {SharedModule} from './shared';
import {NavService} from './nav.service';
import {UsersService} from './users.service';
import {ListingsService} from './listings.service';
import {ListhubMetricsService} from './listhub-metrics.service';
import {GoogleAnalyticsService} from './google-analytics.service';

import {AppComponent} from './app.component';
import {GlobalStylesComponent} from './shared/global-styles';
import {TopNavComponent} from './top-nav';

import {LandingComponent} from './+landing';
import {ListingsComponent} from './+listings';
import {ListingComponent} from './+listing';
import {ProfileComponent} from './+profile';
import {RegisterComponent} from './+register';

import {PropertyCardComponent} from './property-card';
import {PropertyInfoComponent} from './property-info';
import {PropertyGalleryComponent} from './property-gallery';
import {PropertyAppraiserInfoComponent} from './property-appraiser-info';
import {PropertyMapComponent} from './property-map';
import {PropertyDisclaimerComponent} from './property-disclaimer';
import {FeaturedListingsComponent} from './featured-listings';
import {BrokerInfoComponent} from './broker-info/broker-info.component';

import {BathsFilterComponent} from './property-filters/baths-filter/baths-filter.component';
import {BedsFilterComponent} from './property-filters/beds-filter/beds-filter.component';
import {PriceFilterComponent} from './property-filters/price-filter/price-filter.component';
import {SqftFilterComponent} from './property-filters/sqft-filter/sqft-filter.component';
import {TypeFilterComponent} from './property-filters/type-filter/type-filter.component';
import {ZipFilterComponent} from './property-filters/zip-filter/zip-filter.component';
import {PropertyFiltersComponent} from './property-filters/property-filters.component';
import {PropertyFiltersService} from './property-filters/property-filters.service';
import {NewsletterSubscribeComponent} from './newsletter-subscribe/newsletter-subscribe.component';

@NgModule({
  declarations: [
    AppComponent,
    GlobalStylesComponent,
    TopNavComponent,
    LandingComponent,
    ListingsComponent,
    ListingComponent,
    ProfileComponent,
    RegisterComponent,
    PropertyCardComponent,
    PropertyInfoComponent,
    PropertyGalleryComponent,
    PropertyAppraiserInfoComponent,
    PropertyMapComponent,
    PropertyDisclaimerComponent,
    FeaturedListingsComponent,
    BathsFilterComponent,
    BedsFilterComponent,
    PriceFilterComponent,
    SqftFilterComponent,
    TypeFilterComponent,
    ZipFilterComponent,
    PropertyFiltersComponent,
    FeaturedListingsComponent,
    BrokerInfoComponent,
    NewsletterSubscribeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    AppRoutingModule,
    MaterialModule.forRoot(),
    FlexLayoutModule.forRoot(),
    NgbModule.forRoot(),
    SharedModule
  ],
  providers: [
    ListingsService,
    NavService,
    UsersService,
    ListhubMetricsService,
    GoogleAnalyticsService,
    PropertyFiltersService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

It would be nice if this error message was more user friendly and gave the user some idea of what property was not properly defined or what part of the code/what module was being processed.

[Splaktar]

I was able to get ng serve and ng build to work with beta.21.

But I can't do ng build -aot

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/splaktar/Git/tf/webapp/src'
 @ ./src/main.ts 4:0-74
 @ multi main

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module not found: Error: Can't resolve '/Users/splaktar/Git/tf/webapp/src/$$_gendir' in '/Users/splaktar/Git/tf/webapp/node_modules/@angular/core/src/linker'
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 69:15-36 85:15-102
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

[saverett]

Dealing with a similar issue on angular-cli: 1.0.0-beta.25.5 (was also present in angular-cli: 1.0.0-beta.24) whenever I try to run ng build with the --env switch. The build works just fine whenever I exclude --env; however, as soon as I add something like --env=prod (corresponding to my environment.prod.ts file) I get the same error:

ERROR in ./config/environment.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
...

Interestingly, the build succeeds with --env if I modify the environment import from my ./src/main.ts file:

import './polyfills.ts';

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

To point directly to the environment file I'm trying to use (e.g., environment.prod.ts):

...
import { environment } from '../config/environment.prod';
...

Obviously this doesn't solve anything since it breaks the whole point of the --env switch, but hopefully this information will help lead to a solution.

[saverett]

@Splaktar - My issue was also resolved by moving back to angular-cli: 1.0.0-beta.21. Thanks for the suggestion. Hopefully this gets fixed in the coming versions.

[aaraggornn]

I get the same error in beta.25.5 (was working fine in beta.24):

ERROR in ./src/environments/environment.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (c:\???\???\node_modules\typescript\lib\typescript.js:53644:56)
    at c:\???\???\node_modules\@ngtools\webpack\src\loader.js:83:72
    at Array.some (native)
    at c:\???\???\node_modules\@ngtools\webpack\src\loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (c:\???\???\node_modules\@ngtools\webpack\src\loader.js:82:10)
    at c:\???\???\node_modules\@ngtools\webpack\src\loader.js:167:48
 @ ./src/main.ts 5:20-57
 @ multi main

Note: the paths in the error have been redacted.
The same error also shows for ./src/app/app.module.ts as well as all 5 of my modules

[saverett]

@Splaktar - adding the following property to my ./src/tsconfig.json file fixed the --aot error in beta.21:

"exclude": [ "test.ts" ]

[Splaktar]

@saverett I also needed to do the following in my tsconfig.json:

  "files": [
    "typings.d.ts",
    "main"
  ]

After that I was able to get -aot working, even in beta.25.5!

In addition, I updated a lot of dependencies beyond what is the default in angular-cli:

dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/flex-layout": "2.0.0-beta.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/platform-server": "2.4.3",
    "@angular/router": "3.4.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.18",
    "angular2-google-maps": "0.17.0",
    "angularfire2": "2.0.0-beta.7",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "2.4.1",
    "firebase": "3.6.6",
    "hammerjs": "2.0.8",
    "rxjs": "5.0.3",
    "ts-helpers": "1.1.2",
    "zone.js": "0.7.5"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.3",
    "@types/express": "4.0.34",
    "@types/glob": "5.0.30",
    "@types/google-maps": "3.2.0",
    "@types/googlemaps": "3.26.0",
    "@types/gulp": "3.8.32",
    "@types/jasmine": "2.5.40",
    "@types/node": "7.0.0",
    "@types/request": "0.0.39",
    "@types/zone.js": "0.0.27",
    "angular-cli": "1.0.0-beta.25.5",
    "codelyzer": "2.0.0-beta.4",
    "gulp": "3.9.1",
    "gulp-rename": "1.2.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.1.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-remap-istanbul": "0.4.0",
    "protractor": "5.0.0",
    "stylelint": "7.7.1",
    "ts-node": "2.0.0",
    "tslint": "4.3.1",
    "typescript": "2.0.10",
    "yargs": "6.6.0"
  }

[Dunos]

This is still a think for me, even in beta 26, when using "ng serve --prod" but it works fine if you do "ng serve --prod --aot"

[emoralesb05]

Was this supposed to be fixed? I never had this issue until today..