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

KeithGillette · 2017-02-18T18:48:21Z

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.

The text was updated successfully, but these errors were encountered:

sebastienratez · 2017-02-21T15:02:37Z

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 · 2017-03-07T15:32:24Z

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 · 2017-03-12T15:24:48Z

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 · 2017-03-13T17:42:19Z

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 · 2017-03-13T18:49:47Z

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 · 2017-03-14T10:54:33Z

@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 · 2017-03-17T18:09:52Z

@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 · 2017-03-18T17:40:37Z

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;
};

KeithGillette · 2017-03-18T18:58:58Z

Thanks, @filipesilva. Unfortunately, no, assuming the change in question is node_modules/@angular/cli/blueprints/ng/files/__path__/typings.d.ts. The demonstration repository was tested with Angular CLI 1.0.0-rc.1, which in inspecting my local files, already included that change. I just updated my local version to Angular CLI 1.0.0-rc.2 just in case, but when executing ng serve, I still receive the exact same error as noted in the README on the demonstration repository.

filipesilva · 2017-03-18T19:24:42Z

Ok, I don't think this has a real fix currently. We purposefully remove moduleId... and apparently it's needed for integration with NativeScript.

Not too sure how we're going to address that tbh.

/cc @hansl @Brocco

KeithGillette · 2017-03-18T19:51:58Z

Removing the moduleId during an Angular CLI build is, in itself, not a problem for sharing code with NativeScript, as we use a separate tns tool to build the mobile client, which I think keeps the module Id for its purposes.

The problem is just that the @ngtools code that removes it for the browser crashes the Angular CLI build as outlined in the message opening this issue. With the monkey patch I described there, I can successfully share component controller code between the two build processes.

filipesilva · 2017-03-18T20:05:14Z

Oh I think I'm understanding it better... what about this, can you check if it works? Maybe making sure parent is there is all we need.

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

If this works for you feel free to make a PR.

KeithGillette · 2017-03-18T20:41:41Z

Thanks for pursuing this, @filipesilva.

While the build succeeds, only if moduleId property is the last property in the @Component decorator argument does it work (as with my original monkey patch work-around). If the moduleId is in any other position, an Uncaught ReferenceError: template is not defined error is generated in the console at runtime:

Uncaught ReferenceError: template is not defined
    at items.component.ts:9
    at Object.274 (items.component.ts:19)
    at __webpack_require__ (bootstrap 0be4b71…:52)
    at Object.431 (app.module.ts:31)
    at __webpack_require__ (bootstrap 0be4b71…:52)
    at Object.430 (app.component.ts:7)
    at __webpack_require__ (bootstrap 0be4b71…:52)
    at Object.320 (src async:7)
    at __webpack_require__ (bootstrap 0be4b71…:52)
    at Object.556 (main.bundle.js:328)
    at __webpack_require__ (bootstrap 0be4b71…:52)
    at webpackJsonpCallback (bootstrap 0be4b71…:23)
    at main.bundle.js:1
(anonymous)	@	items.component.ts:9
274	@	items.component.ts:19
__webpack_require__	@	bootstrap 0be4b71…:52
431	@	app.module.ts:31
__webpack_require__	@	bootstrap 0be4b71…:52
430	@	app.component.ts:7
__webpack_require__	@	bootstrap 0be4b71…:52
320	@	src async:7
__webpack_require__	@	bootstrap 0be4b71…:52
556	@	main.bundle.js:328
__webpack_require__	@	bootstrap 0be4b71…:52
webpackJsonpCallback	@	bootstrap 0be4b71…:23
(anonymous)	@	main.bundle.js:1

filipesilva · 2017-03-18T23:14:27Z

Ok, that's progress.

Now it's time to figure out why it's important that moduleId is in the last position.

Let's try to take the CLI moduleId replacement out of the equation altogether... If you remove this line, do you still get the runtime error?
https://github.com/angular/angular-cli/blob/master/packages/@ngtools/webpack/src/loader.ts#L351

If so, then it might be a problem outside of the CLI.

KeithGillette · 2017-03-19T01:44:22Z

Glad to hear we're making progress, @filipesilva. With or without the patch, removing .then(() => _removeModuleId(refactor)); from function ngcLoader() in @ngtools\webpack\src\loader.js returns a new SyntaxError__zone_symbol__error: Error: moduleId should be a string runtime error:

SyntaxError__zone_symbol__error: Error: moduleId should be a string in "ItemsComponent". See https://goo.gl/wIDDiL for more information.
If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.
    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3270:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:61545:16)
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5717:16)
    at componentModuleUrl (http://localhost:4200/vendor.bundle.js:18089:15)
    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:17206:28)
    at http://localhost:4200/vendor.bundle.js:17380:54
    at Array.forEach (native)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:17379:41)
    at http://localhost:4200/vendor.bundle.js:44597:58
    at Array.forEach (native)
    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:44596:43)
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:44551:52)
    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:44517:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:34443:25)
    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:34418:21)message: "moduleId should be a string in "ItemsComponent". See https://goo.gl/wIDDiL for more information.↵If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc."originalStack: "Error: moduleId should be a string in "ItemsComponent". See https://goo.gl/wIDDiL for more information.↵If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.↵    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3270:33)↵    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:61545:16)↵    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5717:16)↵    at componentModuleUrl (http://localhost:4200/vendor.bundle.js:18089:15)↵    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:17206:28)↵    at http://localhost:4200/vendor.bundle.js:17380:54↵    at Array.forEach (native)↵    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:17379:41)↵    at http://localhost:4200/vendor.bundle.js:44597:58↵    at Array.forEach (native)↵    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:44596:43)↵    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:44551:52)↵    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:44517:21)↵    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:34443:25)↵    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:34418:21)"stack: "Error: moduleId should be a string in "ItemsComponent". See https://goo.gl/wIDDiL for more information.↵If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.↵    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3270:33)↵    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:61545:16)↵    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5717:16)↵    at componentModuleUrl (http://localhost:4200/vendor.bundle.js:18089:15)↵    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:17206:28)↵    at http://localhost:4200/vendor.bundle.js:17380:54↵    at Array.forEach (native)↵    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:17379:41)↵    at http://localhost:4200/vendor.bundle.js:44597:58↵    at Array.forEach (native)↵    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:44596:43)↵    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:44551:52)↵    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:44517:21)↵    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:34443:25)↵    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:34418:21)"zoneAwareStack: "Error: moduleId should be a string in "ItemsComponent". See https://goo.gl/wIDDiL for more information.↵If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.↵    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3270:33)↵    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:61545:16)↵    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5717:16)↵    at componentModuleUrl (http://localhost:4200/vendor.bundle.js:18089:15)↵    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:17206:28)↵    at http://localhost:4200/vendor.bundle.js:17380:54↵    at Array.forEach (native)↵    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:17379:41)↵    at http://localhost:4200/vendor.bundle.js:44597:58↵    at Array.forEach (native)↵    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:44596:43)↵    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:44551:52)↵    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:44517:21)↵    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:34443:25)↵    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:34418:21)"__proto__: Object_nativeError: ZoneAwareErrormessage: (...)name: (...)originalStack: (...)stack: (...)toSource: ()toString: ()zoneAwareStack: (...)get message: ()set message: (value)get name: ()set name: (value)get originalStack: ()set originalStack: (value)get stack: ()set stack: (value)get zoneAwareStack: ()set zoneAwareStack: (value)__proto__: BaseError
componentModuleUrl @ metadata_resolver.js:1085
CompileMetadataResolver._loadDirectiveMetadata @ metadata_resolver.js:202
(anonymous) @ metadata_resolver.js:376
CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata @ metadata_resolver.js:375
(anonymous) @ compiler.js:171
JitCompiler._loadModules @ compiler.js:170
JitCompiler._compileModuleAndComponents @ compiler.js:125
JitCompiler.compileModuleAsync @ compiler.js:91
PlatformRef_._bootstrapModuleWithZone @ application_ref.js:390
PlatformRef_.bootstrapModule @ application_ref.js:365
320 @ main.ts:11
__webpack_require__ @ bootstrap 245a130…:52
556 @ main.bundle.js:334
__webpack_require__ @ bootstrap 245a130…:52
webpackJsonpCallback @ bootstrap 245a130…:23
(anonymous) @ main.bundle.js:1

Technically that program should always be the valid one, and is needed in some cases (e.g. diagnostics). Adding parent nodes get rid of the getChildAt error that happens, because the prop.parent is not set. The issue happened because people are using "files": ["main.ts"] or something similar, and when we load another file than main we dont set the parent nodes. Fixes angular#5143 Fixes angular#4817

Technically that program should always be the valid one, and is needed in some cases (e.g. diagnostics). Adding parent nodes get rid of the getChildAt error that happens, because the prop.parent is not set. The issue happened because people are using "files": ["main.ts"] or something similar, and when we load another file than main we dont set the parent nodes. Fixes #5143 Fixes #4817

KeithGillette · 2017-03-21T15:28:07Z

I tried to confirm @hansl's fix, which I see made its way into release v1.0.0-rc.4. Unfortunately, the behavior of Angular CLI seems to have changed between v1.0.0-rc.2 and v1.0.0-rc.4 such that ng serve under rc.4 is now generating a host of new Cannot find module and Cannot find name errors on NativeScript-specific code in the shared NativeScript/Angular source directory which I believe had previously been ignored by Angular CLI/Webpack, presumably because those files were not in the dependency tree of the browser-specific main specified in .angular-cli.json.

KeithGillette · 2017-03-22T19:57:37Z

I was able to add entries to the exclude property in tsconfig.app.json such that TypeScript compilation ignored the NativeScript-specific files, eliminating the Cannot find module and Cannot find name errors the change from rc.2 to rc.4 generated, and allowing a successful project build with rc.4.

I am happy to report that Angular CLI v1.0.0-rc.4 does indeed eliminate the original error I reported and I can now share Angular component code between browser and NativeScript builds without monkey patches. Thanks @hansl and @filipesilva!

rpoitras · 2017-03-22T23:25:24Z

Happy to say it works for me on the non-NativeScript case as well. Just a bit of refactoring to followup with on a spec file. Thanks to Matt Raible for taking the time to explain - https://github.com/mraible/ng-demo#fix-the-appcomponent-test.

Thanks everyone 👍

filipesilva · 2017-03-26T20:21:33Z

Hey I'm glad to hear that this was the fix that enabled your usecases!

angular-automatic-lock-bot · 2019-09-06T23:41:01Z

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.}

sebastienratez mentioned this issue Feb 22, 2017

Including moduleId property in @Component decorator causes 'Module build failed: TypeError: Cannot read property 'getChildAt' of undefined' wwwalkerrun/nativescript-ngx-magic#10

Closed

filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Mar 13, 2017

filipesilva added freq1: low Only reported by a handful of users who observe it rarely package4: @angular-sdk/webpack severity2: inconvenient type: bug/fix and removed needs: repro steps We cannot reproduce the issue with the information given labels Mar 18, 2017

filipesilva added severity3: broken and removed severity2: inconvenient labels Mar 18, 2017

hansl mentioned this issue Mar 19, 2017

Various Fixes with Modules #5510

Merged

hansl closed this as completed in #5510 Mar 20, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

KeithGillette commented Feb 18, 2017

Please provide us with the following information:

sebastienratez commented Feb 21, 2017

KeithGillette commented Mar 7, 2017 •

edited

Loading

rpoitras commented Mar 12, 2017

filipesilva commented Mar 13, 2017

rpoitras commented Mar 13, 2017

changLiuUNSW commented Mar 14, 2017 •

edited

Loading

KeithGillette commented Mar 17, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 19, 2017 •

edited

Loading

KeithGillette commented Mar 21, 2017 •

edited

Loading

KeithGillette commented Mar 22, 2017 •

edited

Loading

rpoitras commented Mar 22, 2017

filipesilva commented Mar 26, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

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

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

Comments

KeithGillette commented Feb 18, 2017

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

sebastienratez commented Feb 21, 2017

KeithGillette commented Mar 7, 2017 • edited Loading

rpoitras commented Mar 12, 2017

filipesilva commented Mar 13, 2017

rpoitras commented Mar 13, 2017

changLiuUNSW commented Mar 14, 2017 • edited Loading

KeithGillette commented Mar 17, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 18, 2017

filipesilva commented Mar 18, 2017

KeithGillette commented Mar 19, 2017 • edited Loading

KeithGillette commented Mar 21, 2017 • edited Loading

KeithGillette commented Mar 22, 2017 • edited Loading

rpoitras commented Mar 22, 2017

filipesilva commented Mar 26, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

KeithGillette commented Mar 7, 2017 •

edited

Loading

changLiuUNSW commented Mar 14, 2017 •

edited

Loading

KeithGillette commented Mar 19, 2017 •

edited

Loading

KeithGillette commented Mar 21, 2017 •

edited

Loading

KeithGillette commented Mar 22, 2017 •

edited

Loading