angular-cli: 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.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 4
  • Comments: 35 (5 by maintainers)

Most upvoted comments

@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

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)

There’s a good chance TypeScript is the future, and I’m quite sure there are many people interested in having TypeScript everywhere, without the extra build steps to JS. That’s painful, inconvenient, lossy… and unnecessary.

Let’s make the future happen, not force everyone back into the past.

@metavurt but what if I prefer to have 3rd-party libraries in TS instead of JS? It’s really convenient. I understand that removing TS files from the library is just a workaround.

@SimonErich

My mistake was the wrong use of “export default”.

I used to export an object like this:

export default { … };

That is 100% valid TypeScript code. incidentally it is also 100% valid JavaScript. If it causes the CLI to fail the CLI is wrong.

I get the same error after upgrading from angular-cli 1.0.0-beta.19-3. I’ve done all the steps in the migration guide and also copied the src folder into a new angular-cli 1.0.0.rc2 project, but still no luck.

I’ve also installed typings for socket.io and stuff like that.

ERROR in Cannot read property 'text' of undefined

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/simon/Nodes/project/src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.t

Is there any way to get more debugging information to find the source of this problem? Or any ideas how to solve that?

I’ve tried a couple of things recommended (like adding “typings.d.ts”, “main”, … to tsconfig), but still no luck.

I’ve even checked if I use a property “text” somewhere in my Code, but no.

Any ideas?

@istvanszoboszlai no im not using covalent. I get the below error on each of my 5 angular services wen trying to build with the --prod flag. No idea how to solve.

ERROR in ../x-shared/services/user.service.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at Object.getTokenPosOfNode (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/typescript/lib/typescript.js:5692:71)
    at IdentifierObject.TokenOrIdentifierObject.getStart (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/typescript/lib/typescript.js:53623:23)
    at IdentifierObject.TokenOrIdentifierObject.getText (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/typescript/lib/typescript.js:53644:77)
    at refactor.findAstNodes.filter (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/@ngtools/webpack/src/loader.js:138:44)
    at Array.filter (native)
    at refactor.findAstNodes.forEach.node (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/@ngtools/webpack/src/loader.js:137:14)
    at Array.forEach (native)
    at _removeDecorators (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/@ngtools/webpack/src/loader.js:128:10)
    at Promise.resolve.then (/Users/jimmywestcott/Documents/github/QMonitor/web/node_modules/@ngtools/webpack/src/loader.js:304:33)
 @ ./src/$$_gendir/app/app.module.ngfactory.ts 99:0-65
 @ ./src/main.ts
 @ multi ./src/main.ts

@emoralesb05, have you found a solution for this? I have the same issue after upgrading to covalent 1.0.0-beta.1 l. I on @angular/cli-beta.31.

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

@metavurt This is exactly my point. I do want TS files in there. I have a monorepo with a bunch of TS packages managed by Lerna, which basically copies (or symlinks) the packages into node_modules. I want them to just build correctly with plain TS depedencies, so that I don’t have to compile each of them to ES.

Good grief. That did it. @emoralesb05 THANK YOU.

@emoralesb05 somehow solved it in Covalent. Maybe he knows what the root of the issue was

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

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

"exclude": [ "test.ts" ]

@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.

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.