Repository navigation
Including moduleId property in @Component decorator causes 'Module build failed: TypeError: Cannot read property 'getChildAt' of undefined' #4817
Description
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
moduleIdproperty to@Componentdecorator 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.
Activity
sebastienratez commentedon Feb 21, 2017
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:
KeithGillette commentedon Mar 7, 2017
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 commentedon Mar 12, 2017
I see the same problem but only with
ng test.ng build,ng serve,ng e2ereport no errors.You can try this repo to reproduce - https://github.com/rpoitras/angular-tour-of-heroes
filipesilva commentedon Mar 13, 2017
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 commentedon Mar 13, 2017
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 commentedon Mar 14, 2017
@filipesilva I have the same error only when I run
ng testin bothrc0andrc1Here is the repo:
https://github.com/changLiuUNSW/ng2Redux
Currently I have to remove
module.Idto eliminate this errorKeithGillette commentedon Mar 17, 2017
@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 commentedon Mar 18, 2017
Heya, can you have a look and see if #5193 fixes it for you? Having
src/typings.d.tswith the following code:KeithGillette commentedon Mar 18, 2017
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 executingng serve, I still receive the exact same error as noted in the README on the demonstration repository.5 remaining items
KeithGillette commentedon Mar 18, 2017
Thanks for pursuing this, @filipesilva.
While the build succeeds, only if
moduleIdproperty is the last property in the@Componentdecorator argument does it work (as with my original monkey patch work-around). If themoduleIdis in any other position, anUncaught ReferenceError: template is not definederror is generated in the console at runtime:filipesilva commentedon Mar 18, 2017
Ok, that's progress.
Now it's time to figure out why it's important that
moduleIdis in the last position.Let's try to take the CLI
moduleIdreplacement 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 commentedon Mar 19, 2017
Glad to hear we're making progress, @filipesilva. With or without the patch, removing
.then(() => _removeModuleId(refactor));fromfunction ngcLoader()in@ngtools\webpack\src\loader.jsreturns a newSyntaxError__zone_symbol__error: Error: moduleId should be a stringruntime error:fix(@ngtools/webpack): add parent nodes and keep program
fix(@ngtools/webpack): add parent nodes and keep program
fix(@ngtools/webpack): add parent nodes and keep program
fix(@ngtools/webpack): add parent nodes and keep program
KeithGillette commentedon Mar 21, 2017
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 betweenv1.0.0-rc.2andv1.0.0-rc.4such thatng serveunderrc.4is now generating a host of newCannot find moduleandCannot find nameerrors 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-specificmainspecified in.angular-cli.json.KeithGillette commentedon Mar 22, 2017
I was able to add entries to the
excludeproperty intsconfig.app.jsonsuch that TypeScript compilation ignored the NativeScript-specific files, eliminating theCannot find moduleandCannot find nameerrors the change fromrc.2torc.4generated, and allowing a successful project build withrc.4.I am happy to report that
Angular CLI v1.0.0-rc.4does 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 commentedon Mar 22, 2017
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 commentedon Mar 26, 2017
Hey I'm glad to hear that this was the fix that enabled your usecases!
angular-automatic-lock-bot commentedon Sep 6, 2019
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.
fix(@ngtools/webpack): add parent nodes and keep program