Angular-cli: ERROR in : TypeError: Cannot read property 'text' of undefined

[dalla777]

Versions

Angular CLI: 1.6.3
Node: 6.11.4
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.6.3
@angular/http: 4.4.6
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

1. npm start (compiles fine)
2. edit and save a file
3. The following error when it tries to re-compile

Observed behavior

ERROR in : TypeError: Cannot read property 'text' of undefined
    at getErrorSpanForNode (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:7304:39)
    at createDiagnosticForNodeInSourceFile (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:7229:20)
    at Object.createDiagnosticForNode (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:7225:16)
    at error (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:27167:22)
    at resolveExternalModule (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:28226:17)
    at resolveExternalModuleNameWorker (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:28213:20)
    at Object.getExternalModuleFileFromDeclaration (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:47978:32)
    at tryGetModuleNameFromDeclaration (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:15517:50)
    at Object.getExternalModuleNameLiteral (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:15481:20)
    at createRequireCall (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:61248:33)
    at visitExportDeclaration (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:61310:45)
    at sourceElementVisitor (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:61091:28)
    at Object.visitNodes (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:49280:48)
    at transformCommonJSModule (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:60834:40)
    at transformSourceFile (/usr/local/src/angular/node_modules/typescript/lib/typescript.js:60808:27)
    at /usr/local/src/angular/node_modules/typescript/lib/typescript.js:2492:86

Desired behavior

Have a non-failing build

Mention any other details that might be useful (optional)

I see this issue was a problem previously in #8216, and it looks like a few other people are also having this problem more recently, although I don't see an issue for it (if there is one, sorry for the dupe).

[DaSchTour]

@dalla777 thanks for reopening this issue and happy new year 😀
I have this issue with ng serve -pc proxy.conf.local.json -ssl --env=test --aot
As this also seams to be a problem with normal npm start I guess the options doesn't matter.
But as this seams to be related to typescript I can confirm, that this error also occurs with typescript 2.5.3. While I looked this up, I discovered the following.

├─┬ @angular/[email protected]
│ └─┬ @angular-devkit/[email protected]
│   └── [email protected] 
└── [email protected]  

So it looks like build-optimizer might use another version of typescript?

[filipesilva]

Heya, I tried to reproduce this with a new project by editing src/app/app.component.ts and did not see the error you describe:

kamik@T460p MINGW64 /d/sandbox/master-project (master)
$ npm start

> [email protected] start D:\sandbox\master-project
> ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-02T09:59:02.431Z
Hash: fd739962ff633c8914c5
Time: 7537ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 20.4 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.7 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2018-01-02T09:59:16.858Z
Hash: 7669a199f38283c7d515
Time: 195ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 20.4 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial]
chunk {styles} styles.bundle.js (styles) 33.7 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2018-01-02T09:59:19.018Z
Hash: fd739962ff633c8914c5
Time: 124ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 20.4 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial]
chunk {styles} styles.bundle.js (styles) 33.7 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial]

webpack: Compiled successfully.

This might be related to your project proper. Can you please upload a reproduction that I can follow to see this happen? Without a reproduction we just can't investigate the issue.

@DaSchTour Build Optimizer uses a different version of TypeScript, yes. That is intended.

[LukeBillo]

Just to add to this - I have also experienced this issue, but it is when using ng build watch with --aot flag enabled. It seems to fail every other time (i.e. once every two compiles).

[wulfsberg]

I get what @LukeBillo describes consistently in one project, but it is a fairly complicated one consisting of several modules.
I've been doing some divide-and-conquer imports to try to figure out where it happens, and it seems to be when I import a module which exports a file which in turn import * as ol from 'openlayers';
Whether it's OpenLayers, the import as notation or something else, have yet to figure out.

In any case, it only happens when I ng serve --aot, and consistently on _exactly_ every other compile, which makes it more than a little puzzling.

[isaacplmann]

I'm getting this error too. 1.6.1 works fine, but 1.6.2 and 1.6.3 fail. I'm also using a --proxy-config and --aot=true. Working on steps to reproduce.

[isaacplmann]

If I take off --aot=true the build works without errors. Also, ng build --prod works fine.

[wulfsberg]

@isaacplmann Indeed, ng serve --prod works for me while ng serve --aot produces the error every other compile. Good (and rather strange) catch.
The fact that it seems to be triggered by the OpenLayers import for me and the stack trace includes transformCommonJSModule looks mightily suspicious, but I can't provoke a simple repro.

[LukeBillo]

The stack trace for me also includes transformCommonJSModule, if that's helpful. I'm not using OpenLayers, but it's certainly possible one of the (many) npm packages installed in the project I'm working on may use it.

[wulfsberg]

It is rather unlikely that you're using OpenLayers without knowing it, but I suspect it's more about using CommonJS/UMD modules in general.

Is the "Cannot read property 'text' of undefined" actually an internal TypeScript error, crashing as it is trying to tell us the actual error, akin to https://github.com/Microsoft/TypeScript/issues/17925 ?

[dalla777]

Well I was hoping to come back from holiday and have it magically fixed itself, sadly this was not the case.

@filipesilva I installed a new project and copied over my package file to see if I could replicate the issue, but I wasn't getting the error, so I'm not sure how to get you replication steps :

I can also confirm that turning off aot stops the error.

[isaacplmann]

For my app this error was being thrown when trying to import @types/redux-actions/index. My guess is that some of the aot generated code is directly importing that type file (since I'm not manually importing that type anywhere in my app code).

Unhelpful workaround:
If you manually edit the getErrorSpanForNode function in typescript.js inside node_modules you can bypass the error without any negative consequences.

Add this before the error line:

if (!sourceFile) {
  return ts.createTextSpan(0, 0);
}

Of course, you would have to re-add this any time you ran an npm install and it won't scale to multiple team members.

[earlyster]

I am also experiencing similar issue --- found that @isaacplmann solution stopped issue when I debugged into typescript.js I noticed that after the first change the node value was

TokenObject {
  pos: -1,
  end: -1,
  flags: 8,
  parent: undefined,
  kind: 9,
  text: '@types/express/index',
  modifierFlagsCache: 536870912,
  transformFlags: 536870912 }

I don't see node_modules/@types/express/index.js file I only see index.d.ts file

[xban1x]

I can confirm it started happening on 1.6.3 for me aswell using ng serve --aot on every other build.

[maximedupre]

This might be a bug for all CommonJS modules.

import Tone from 'tone';

Tone is undefined.

[dottodot]

I started seeing this too when my app auto rebuilds on a change, but on a second save I don't get the error.

[maximedupre]

Changing

import Tone from 'tone';

To

import * as Tone from 'tone';

Fixes the problem for me. Solution was found in #9058 .

[isaacplmann]

I was able to fix the issue in my app by removing all references to redux-actions and using class actions the same way the ngrx example-app does. Now I'm on the latest cli again.

[earlyster]

@maximedupre I couldn't find any imports that are using this style

import Tone from 'tone'; 

For my universal app I am using this

import * as express from 'express';
import { Request } from 'express';

I am still getting the error on same express type library.

[marvinosswald]

downgrade to 1.6.1 fixed it for me, for now

[filipesilva]

There's is a problem with the CommonJS like @maximedupre brought up, it's being tracked in https://github.com/angular/angular-cli/issues/9058 though and the error message shouldn't be the same as reported here (TypeError: Cannot read property 'text' of undefined at getErrorSpanForNode.), and it shouldn't be related to having --aot on or not.

I still need a reproduction of this issue to investigate though. Anyone had success in doing a minimal repro?

[dottodot]

@filipesilva Do you have and suggestions as to how I could find the cause of the error. I have 2 projects I'm working on and only 1 has this issue, but the error message doesn't provide any clue as to the cause, so it's hard to create any repro that has the same issue as it could be pretty much anything.

[filipesilva]

Hard to say, since the error seems deep into the typescript stack. Assuming you have a similar error stack to the one shown in the original report, I'd try adding some console logs to the TS functions related to module handling (like createRequireCall). That finding the variable there that shows the import might give you a good hint.

[dottodot]

OK thing I've found my issue. I had a server side service that had import { Request, Response } from 'express'; After removing that the error no longer occures

[groetzi]

if it's of any help, i'm getting this in a hybrid application and it seems like the plugin generates .ngfactory.ts files for non-angular modules. is that intended behavior? in these (non-angular) files, error happens for imports of this form import * as angular from 'angular'; (as some mentioned before). also if i add a null check in typescript compiler everything works out fine, each change appears correctly when browser reloads. so i'm wondering if the plugin is processing files that it shouldn't, just guessing though.

[filipesilva]

@groetzi that isn't intended and seems like https://github.com/angular/angular/issues/20115. Can you tell me the name of the library that's getting factory files generated?

[groetzi]

@filipesilva it's not an external library file but one that is part of our project in this case an angularjs http interceptor. but i can see this error propagate through non-angularjs modules as well when removing the imports file by file. so e.g. a simple module with this import import * as XLSX from 'xlsx'; will run into the sourcefile undefined error with something like excelutils.ngfactory.ts.

console.log(importNode) in createRequireCall seems like the processed token is something like that text: '@types/xlsx/index', while the console.log(currentSourceFile) exposes this text: 'import * as i0 from \'@angular/core\';\ni0.ComponentFactory;\n', (with filename being ...ExcelUtils.ngfactory.ts).

i'm not completly sure if it's a configuration error though (i have basically no experience with angular2+ btw), but we're supposed to let angular webpack plugin handle all typescript files in the project right? and it will figure out for which files to generate factory code? our tsconfig is configured to include any .ts files within the src folder of our project but exclude node_modules.

[filipesilva]

Yeah you shouldn't have to care about which files get a ngfactory or not, that's on our side. Could you setup a simple repro I can debug on please? Something like a ng new project, then add a file with no Angular with imports, and import it, so the error is shown. I can then use it to figure out where it's going wrong.

[groetzi]

ok. i couldnt reproduce this yet with a clean cli project, hope to find some time to dig deeper into this soon.

[filipesilva]

Thanks @groetzi, even if you don't get manage to get a full repro it still helps if you tell us the stuff you tried that didn't work. That might put someone else on the track for a repro.

[wulfsberg]

As an additional data point, I am using allowSyntheticDefaultImports. Are other people seeing the error also using that?

[SimonNodel-AI]

We've experienced this issue on Node 6 with aot flag and proxy config. I've upgraded to cli 1.6.5 node 8 and I am still getting same error. It seems that with angular cli 1.6.1 it worked fine.

[marvinosswald]

still existing in 1.7.0-beta.1

[victornoel]

@filipesilva please find a repro here: https://github.com/victornoel/repro-bug-angular-cli

[filipesilva]

@victornoel thank you so much for the repro!

[luchillo17]

So until a fix, workaround is downgrading to 1.6.1?

[filipesilva]

Hi all,

I looked into this yesterday and completely solving this problem is harder than it looks. The symptoms shown here are partial due to a performance optimization we have in ng serve where we set module: "commonjs" for typescript complication.

This greatly increases rebuild performance due to some limitations of Webpack 3. On the next major version of Angular CLI we will update to Webpack 4 which does not need this workaround. This should reduce the problem, but not eliminate it completely.

I've opened an issue in Angular itself https://github.com/angular/angular/issues/22193 for further investigation. It has some more details about the problem.

[filipesilva]

Tried to reproduce with the Angular CLI 6 and the repro in https://github.com/angular/angular-cli/issues/9036#issuecomment-362189011, and couldn't see the error anymore. This should be sorted now.

[allout58]

If you are upgrading a project from an older version of Angular, make sure you update your tsconfig.json file to have module: es2015 or you might still be using CommonJS modules and have this issue.

[chaoyangnz]

I am also experiencing similar issue --- found that @isaacplmann solution stopped issue when I debugged into typescript.js I noticed that after the first change the node value was

TokenObject {
  pos: -1,
  end: -1,
  flags: 8,
  parent: undefined,
  kind: 9,
  text: '@types/express/index',
  modifierFlagsCache: 536870912,
  transformFlags: 536870912 }

I don't see node_modules/@types/express/index.js file I only see index.d.ts file

what is that related to express? I also got the error when building Angular universal?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}