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)
@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:
This used to work with the older version of typescript and angular-cli. I’ve changed the file to:
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 thed.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 thesource
typescript files from the publishing process (which was our fault to begin with since they shouldnt be published, only thejs
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
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.
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.
@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
andng build
to work with beta.21.But I can’t do
ng build -aot
@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
: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:
@Splaktar - adding the following property to my
./src/tsconfig.json
file fixed the--aot
error inbeta.21
:@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 inangular-cli: 1.0.0-beta.24
) whenever I try to runng 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 myenvironment.prod.ts
file) I get the same error:Interestingly, the build succeeds with
--env
if I modify theenvironment
import from my./src/main.ts
file:To point directly to the environment file I’m trying to use (e.g.,
environment.prod.ts
):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.