TypeError: Cannot read property 'text' of undefined

[karptonite]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0-rc.5
Node: 8.8.1
OS: darwin x64
Angular: 5.0.0-rc.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.5.0-rc.5
@angular-devkit/build-optimizer: 0.0.31
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.5
@schematics/angular: 0.0.48
typescript: 2.4.2
webpack-bundle-analyzer: 2.9.0
webpack: 3.8.1

Repro steps.

in my package, anyway
ng serve --ssl --public-host=//localhost:4200/sockjs-node/ --deploy-url=//localhost:4200/ --serve-path=/
make a trivial change to a template

The log given by the failure.

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

Desired functionality.

Successful compilation

Mention any other details that might be useful.

After the first build, everything works correctly. But a trivial change to a template or a change to whitspace in a ts file gives the error shown.

[karptonite]

A bit more data--I went through my code, and found every instance (not many) where I tried to refer to foo.text, and removed them. No change to the error, so I think the text referred to in the error is not something that I created.

[filipesilva]

I tried making template and whitespace changes but I don't see this. Can you put up a repro please, or show me how I can see this happening in a new project overall?

[karptonite]

I can try. My project is quite large, and because of the nature of the error, there is no indication where in the project the bug occurs.

[karptonite]

@filipesilva OK, I have a repo for you.

As I said, because of the nature of the error, I didn't know how to make a minimal repro. But this reproduces both the error reported in this issue and in #8207, I believe.

Because this is not an open source project, I've added your public key from github so that you alone can access this. If anyone else from the project needs access, let me know, and I'll add their keys as well. If I did this right (not 100% certain that I did), you should be able to clone from here:

git@bitbucket.org:karptonite/cli-test.git

the do

yarn
yarn run start:aot

then make a trivial change in comments-block.component.html, or probably any file, but this is the one I've used to reproduce the issue.

to reproduce #8207, just do yarn start.

I may continue to fiddle with it and push new updates, but not for too long--it is board game day here. :-) Let me know if you have trouble accessing the repo or reproducing the issues.

[avbentem]

Given the references to the other issues I assume you're already thinking this is related to AOT. So just to make it explicit: the problem goes away when using ng serve --no-aot.

(Angular 5.0.0-rc.8, Angular CLI 1.5.0-rc.6.)

[karptonite]

@avbentem thanks, I couldn't confirm that since the #8207 bug meant that I couldn't even compile with no-aot, so couldn't test whether there was a bug on recompile after a change.

[karptonite]

as mentioned here, #8207 (comment), rc.8 seems to have fixed the bug with AOT described above, but an issue with --no-aot persists (and can still be reproduced with the repo above).

[avbentem]

Again just to be clear, despite what's being said in that other issue, for me it's the other way around for rc.8:

• --no-aot works fine, also when making file changes
• without that (so when using the default --aot) all is fine until I make some (dummy) change, even a dummy change in a JSON file.

So, it might not be related to those flags at all...?

(Angular 5.0.0-rc.8, Angular CLI 1.5.0-rc.6 on both OS X and Windows 7. Will test with rc.9 today.)

[filipesilva]

@avbentem can you try @angular/cli@1.5.0-rc.8? The rc.6 version you are using wouldn't have the fix.

@karptonite I cloned your project, updated @angular/cli@1.5.0-rc.8, all other @angular/* dependencies to 5.0.0-rc.9 and typescript@2.4.2.

Running yarn start gave me this error:

ERROR in ./node_modules/angular2-click-outside/clickOutside.directive.ts
Module build failed: Error: D:\sandbox\cli-test\node_modules\angular2-click-outside\clickOutside.directive.ts is not part of the compilation output. Please check the other error messages for detail

s.
    at AngularCompilerPlugin.getCompiledFile (D:\sandbox\cli-test\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
    at plugin.done.then (D:\sandbox\cli-test\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./src/app/shared/shared-universal.module.ts 12:0-86
 @ ./src/app/shared/reactions/reactions.module.ts
 @ ./src/app/file-page/file-page.module.ts
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?https:////localhost:4200/sockjs-node/ ./src/main.ts
ERROR in ./node_modules/angular2-letter-avatar/directives/letter-avatar.directive.ts
Module build failed: Error: D:\sandbox\cli-test\node_modules\angular2-letter-avatar\directives\letter-avatar.directive.ts is not part of the compilation output. Please check the other error message

s for details.
    at AngularCompilerPlugin.getCompiledFile (D:\sandbox\cli-test\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
    at plugin.done.then (D:\sandbox\cli-test\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./src/app/user/avatar/avatar.module.ts 11:0-98
 @ ./src/app/geekvideo/video-page.module.ts
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?https:////localhost:4200/sockjs-node/ ./src/main.ts

Running yarn start:aot gave me no error, and neither did editing a component or template (like you said was ok now).

I also observed around 9s rebuilds (this is relevant for me in the context of #8259).

I went to look at those files, and it seems like that those two libraries (angular2-click-outside and angular2-letter-avatar) try to ship TS files. This is problematic because then we'd have to reproduce the library environment (dependencies etc) to be able to build it. In general libraries should not ship any typescript files.

To see if I could get around that, I deleted the TS files from those two libraries and tried building again. This resulted in two warnings:

WARNING in ./node_modules/angular2-click-outside/clickOutside.directive.js
System.register is not supported by webpack.
 @ ./src/app/shared/shared-universal.module.ts 12:0-86
 @ ./src/app/shared/shared.module.ts
 @ ./src/app/common-layout.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?https:////localhost:4200/sockjs-node/ ./src/main.ts

WARNING in ./node_modules/angular2-letter-avatar/directives/letter-avatar.directive.js
System.register is not supported by webpack.
 @ ./src/app/user/avatar/avatar.module.ts 11:0-98
 @ ./src/app/geekimage/image-page/image-page.module.ts
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?https:////localhost:4200/sockjs-node/ ./src/main.ts

I checked the source javascript files for those libraries and they use SystemJS. I'm sorry to say that those two libraries are not well packaged and not supported by the build system as is... Can you perhaps use something else instead?

BTW great work on https://boardgamegeek.com/, I always go there for board game reviews!

[karptonite]

@filipesilva I'm sure I could find replacement libraries, or fix (or convince the maintainers to fix) the existing packages.

Remember that these are working with AOT builds; does this mean that when they are built with AOT, they are larger and/or slower to build? Or maybe they seem to compile, but there are some subtle problems that will show up at run time?

Also recall that they worked with the no-AOT build system until recently. Has something about the build system changed to make such packages now unusable, in which case this should at least be listed as a breaking change. Considering that I happened to have two such packages in my relatively small app suggests that such packages aren't that uncommon, so this may become an irritation in terms of reported issues if the build system continues to be unable to support packages it used to work with.

[filipesilva]

@karptonite can I post the CPU profile of a rebuild of your app in #8259? Since I was debugging it I had a look and it could help us make rebuilds faster. It doesn't contain any identifying information that I can see, just CLI function names.

It is true that it worked with CLI up until now, and that it still works with 1.5 when using AOT. This is something I'll escalate today to see what the official answer is. As far as I can tell, the previous build system just wasn't very strict with them but they weren't really AOT compatible. I'll let you know when I have a better answer.

[karptonite]

Sure, go ahead. I'd love for it to build faster! Did you mean that previously my AOT builds with these would have failed in runtime, but now they work?

Also, if anyone else needs access to that repo, let me know--I can quickly add more public keys.

[filipesilva]

I'm not sure if it would have failed before. I suspect that maybe the library was being built with the app. But it could break anytime because the TS version your app uses is not necessarily the same as the one the library uses.

Now the non-AOT mode sees the file isn't part of your TS project and fails. But the AOT build seems to be emitting the file still, which is something I'll have to bring up with the compiler team.

[avbentem]

Ah, my bad (I feel really stupid), you were (of course) referring to Angular CLI RC8, not Angular 5 RC8... So:

For @angular/cli: 1.5.0-rc.8 all fine for --aot, --no-aot and none of these (which defaults to --aot then). Nice!

(Angular 5.0.0-rc.9, Angular CLI 1.5.0-rc.8 on Windows 7. And totally as an aside: https://github.com/angular/angular-cli/releases shows me RC6 on top of the page (screenshot), but also a link to "Show 2 newer tags", which indeed then reveals RC7 and RC8 (screenshot). Maybe hidden as there are no release comments?)

[filipesilva]

@avbentem glad to hear that version sorts it for you 👍

You're right, we forgot to add the release notes to those two. I'll get on it.

[karptonite]

@filipesilva Any official word on this issue: #8216 (comment) ? The packages that are breaking no-aot (but not aot), and which maybe aren't really working with aot?

[filipesilva]

@karptonite I added a comment in #8263 to give an update on what's going on:

---

To give you all an update on the issue, @hansl is trying to work with the library authors of known problematic libraries to sort these issues out.

[karptonite]

@filipesilva In that case, I'm closing this issue in favor of #8263. The original issue with "Cannot read property 'text'..." on rebuild in AOT is fixed, and it looks like the other issue is where you are handling the problematic libraries.
By the way, thanks for the kind words about BoardGameGeek!

[DaSchTour]

Was there something reverted regarding this issue? I'm getting this error with 1.6.2

[isaacplmann]

I'm getting this error in 1.6.2 as well.

[clydin]

Can you open a new issue and provide the full command line used that causes the error?

[trollkotze]

#metoo @1.7.2

[haoliangwu]

get same error in angular-cli@1.7.2

[luchillo17]

Getting the same in @angular/cli@1.7.3

[luchillo17]

I've tested each version from 1.6.2 to 1.7.3 and they don't work with my current project, the only workaround for me is to downgrade to 1.6.1.

[rynrn]

+1 angular-cli@1.7.2

[bmts]

+1 angular-cli@1.7.4

[luchillo17]

Easy fix for now is --no-aot.

[avbentem]

Maybe obvious, but just in case: I am no longer getting this error in Angular CLI 6.0.x (with AOT in an Angular 6 project).

[shaizel]

Have been struggling with this issue for a couple of days now and finally solved it after no other solution worked for me.
Like in all the other cases I've read here and in other places, every other compilation would fail with the message "Cannot read property 'text' of undefined" and the stacktrace points to different functions in typescript.js. .

I've opened the file typescript.js and went to the function "transformCommonJSModule" that appears in the error's stack trace. I've added console.log("####", node) to the beginning of the function, logging the function's parameter, node.
I then proceeded to recompile the project.
When I got the compilation bug again, I went to the last appearance of "####" in the log and in the "node" object's content there were several fields called "fileName". They all pointed to a file called "something.service.factory.js". The file something.service.ts contains an injectable service in my application.

I went to that file and checked what changes I made to it when the bug first appeared.
Turns out I've added a method to this service and made it public and static. For some reason, the compiler didn't like it half of the time. I removed the "static" notation and fixed all references to it and it solved the problem.

It seems this bug can be caused by different things. The process I described above can help narrow down what the cause is.

Good luck!

[k0nG]

Thanks, @shaizel for your suggestion it helped me track down what was causing this error for me.

For anyone like me coming to this and running a hybrid AngularJS and Angular application. Try removing the @types/angular dependency from your package.json

[icorne]

I'm running into this, what specifically in @types/angular is breaking thinks @k0nG ?

[angular-automatic-lock-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.}