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

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.