ng serve: Cannot read property 'text' of undefined

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.

[SimonErich]

@metavurt Thank you very much for your answer. I’ve tried npm cache clear and installing everything from scratch already, but always copied my files in there.

After your answer I decided to try to add the main parts of the application slowly and one by one and found the mistake. It was indeed in my own code, but I the debugging message didn’t make sense anyway.

For future reference: My mistake was the wrong use of “export default”.

I used to export an object like this:

export default {
   ...
};

This used to work with the older version of typescript and angular-cli. I’ve changed the file to:

export const config = {
   ...
};

and now everything works. I hope it helps someone.

Thank you for help @metavurt though

[emoralesb05]

So, check if the 3rd party component has ts source files published in the module (excluding the d.ts files since those are needed).

The CLI errored out in our case if they are there.

e.g.

/node_modules/@covalent/core/index.ts was the guilty file, so we had to remove the source typescript files from the publishing process (which was our fault to begin with since they shouldnt be published, only the js files should be published)