Including moduleId property in @Component decorator causes 'Module build failed: TypeError: Cannot read property 'getChildAt' of undefined'

[KeithGillette]

Please provide us with the following information:

OS?

OS Name Microsoft Windows 10 Pro
Version 10.0.14393 Build 14393

Versions.

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.31]
node: 6.9.5
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.7

Repro steps.

Adding in moduleId property to @Component decorator for code shared with a NativeScript build

The log given by the failure.

ERROR in ./clients/shared/app/app.component.ts
Module build failed: TypeError: Cannot read property 'getChildAt' of undefined
at refactor.findAstNodes.filter.forEach (C:\Users\Keith\Source\Repos\TaskTrain\node_modules@ngtools\webpack\src\loader.js:222:54)
at Array.forEach (native)
at _removeModuleId (C:\Users\Keith\Source\Repos\TaskTrain\node_modules@ngtools\webpack\src\loader.js:214:10)
at Promise.resolve.then.then (C:\Users\Keith\Source\Repos\TaskTrain\node_modules@ngtools\webpack\src\loader.js:312:33)
at process._tickCallback (internal/process/next_tick.js:103:7)
@ ./clients/shared/app/app.module.ts 12:0-47
@ ./clients/browser/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./clients/browser/main.ts

Console.log(moduleIdProp); in @ngtools\webpack\src\loader.js at line 257 shows parent property undefined:

NodeObject {
pos: 132,
end: 155,
flags: 0,
transformFlags: undefined,
parent: undefined,
kind: 257,
modifiers: undefined,
name:
IdentifierObject {
pos: 132,
end: 144,
flags: 0,
parent: undefined,
text: 'moduleId' },
questionToken: undefined,
initializer:
NodeObject {
pos: 145,
end: 155,
flags: 0,
transformFlags: undefined,
parent: undefined,
kind: 177,
expression:
IdentifierObject {
pos: 145,
end: 152,
flags: 0,
parent: undefined,
originalKeywordKind: 127,
text: 'module' },
name: IdentifierObject { pos: 153, end: 155, flags: 0, parent: undefined, text: 'id' },
_children: [ [Object], [Object], [Object] ] },
_children:
[ IdentifierObject {
pos: 132,
end: 144,
flags: 0,
parent: undefined,
text: 'moduleId' },
TokenObject { pos: 144, end: 145, flags: 0, parent: [Circular], kind: 55 },
NodeObject {
pos: 145,
end: 155,
flags: 0,
transformFlags: undefined,
parent: undefined,
kind: 177,
expression: [Object],
name: [Object],
_children: [Object] } ] }

Mention any other details that might be useful.

Moving the moduleId property to the last position in the @Component decorator and monkey patching @ngtools\webpack\src\loader.js as follows allows a successful build.

// get the trailing comma
  //       const moduleIdCommaProp = moduleIdProp.parent.getChildAt(1).getChildren()[1];
  //       refactor.removeNodes(moduleIdProp, moduleIdCommaProp);
  refactor.removeNodes(moduleIdProp);

---

Thanks! We'll be in touch soon.

[sebastienratez]

I have the same issue. Nativescript and ng2 together: I need module.id to resolve files path for nativescript, but then the ng2 part crashes with the same error as above.

Deps:

    "@angular/common": "~2.4.3",
    "@angular/compiler": "~2.4.3",
    "@angular/core": "~2.4.3",
    "@angular/forms": "~2.4.3",
    "@angular/http": "~2.4.3",
    "@angular/platform-browser": "~2.4.3",
    "@angular/platform-browser-dynamic": "~2.4.3",
    "@angular/router": "~3.4.3",
    "@wwwalkerrun/nativescript-ngx-magic": "^2.0.4",

[KeithGillette]

I can report that the same error occurs and same workaround works with both:

@angular/cli: 1.0.0-rc.0
@angular/cli: 1.0.0-rc.1

[rpoitras]

I see the same problem but only with ng test.

ng build, ng serve, ng e2e report no errors.

You can try this repo to reproduce - https://github.com/rpoitras/angular-tour-of-heroes

[filipesilva]

I'm having some trouble following this issue. This seems related to native script interop? I'm not sure we have a nativescript journey. We don't test for it.

Can someone provide me with a simple repo of this problem that only uses a brand new CLI project and native script?

[rpoitras]

Apologies @filipesilva. I may have confused this by linking to a non-NativeScript repo. I thought perhaps the issue may have broader scope considering I seen it in a typical Angular CLI test cycle.

[changLiuUNSW]

@filipesilva I have the same error only when I run ng test in both rc0 and rc1

Here is the repo:
https://github.com/changLiuUNSW/ng2Redux

Currently I have to remove module.Id to eliminate this error

[KeithGillette]

@filipesilva, thanks for looking into this. Per your request, I created a repository that demonstrates the issue, built from a brand new Angular CLI project integrated with a brand new NativeScript CLI project using the NativeScript Angular template.

[filipesilva]

Heya, can you have a look and see if #5193 fixes it for you? Having src/typings.d.ts with the following code:

/* SystemJS module definition */
declare var module: {
  id: string;
};