Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js)


 Many times, we add multiple dependencies into our angular application and get done our things. Mostly our angular app just runs fine, when we do ng serve. but, sometimes it fails when we try to build using ng build - - prod command.   

Following is the example of the same. We have added a few packages into our application and it worked fine but when we are trying to build the application, we got the following error.  

PS D:\Angular-DemoApps\Angular 8 - prime ng> ng build --prod
ERROR in ./node_modules/primeng/fesm5/primeng-autocomplete.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined

    at isAngularDecoratorMetadataExpression (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
    at visitNodes (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16514:30)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16740:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16635:21)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16692:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16703:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16599:21)
ERROR in ./node_modules/primeng/fesm5/primeng-button.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
    at visitNodes (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16514:30)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16740:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16635:21)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16692:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16703:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
    at visitNode (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescriERROR in ./node_modules/primeng/fesm5/primeng-inputtext.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
    at visitNodes (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16514:30)
    at Object.forEachChild (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16740:24)
    at checkNodeForDecorators (D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)

After some study we understand, the problem is with non-updated/ non-installed packages/dependencies.

To resolve that problem, we have multiple ways, the following are a few ways.

1.     Manage dependencies by your own
Go to package.json and check the version of your dependencies, your dev dependencies should be compatible with each  other or cli version.
In our case we have downgraded devkit dependency from .19 to .8 as shown below.
 "@angular-devkit/build-angular""~0.803.8"

2.     Let npm manage the dependencies for you, just use npm update command to achieve dependency management.
So, we just updated the project with npm update command and worked just fine.
PS D:\Angular-DemoApps\Angular 8 - prime ng> npm update
> node-sass@4.13.0 install D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-64_binding.node
Download complete  ] - :
Binary saved to D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\username\AppData\Roaming\npm-cache\node-sass\4.13.0\win32-x64-64_binding.node

> node-sass@4.13.0 postinstall D:\Angular-DemoApps\Angular 8 - prime ng \node_modules\node-sass
> node scripts/build.js

Binary found at D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-toastr@11.2.1 requires a peer of rxjs@^6.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.      
npm WARN bootstrap@4.4.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.      
npm WARN @angular/animations@8.2.14 requires a peer of @angular/core@8.2.14 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ codelyzer@5.2.0
+ ngx-toastr@11.2.1
+ @angular/cdk@8.2.3
+ @types/jasmine@3.3.16
+ node-sass@4.13.0
+ @angular/material@8.2.3
+ bootstrap@4.4.0
+ @angular/animations@8.2.14
+ @types/jasminewd2@2.0.8
removed 1 package, updated 11 packages and audited 19734 packages in 64.014s
found 10 vulnerabilities (1 moderate, 9 high)
  run `npm audit fix` to fix them, or `npm audit` for details



3.     If you are unable to resolve the problem that means our dependency is missing so we should have to install it.
We can use npm install command to install all missing dependencies
So, we just installed the dependencies in our project with npm install command and worked just fine.

PS D D:\Angular-DemoApps\Angular 8 - prime ng > npm install
npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@2.6.10 postinstall D:\Angular-DemoApps\Angular 8 - prime ng \node_modules\babel-runtime\node_modules\core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@3.2.1 postinstall D:\Angular-DemoApps\Angular 8 - prime ng \node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, scandir D:\Angular-DemoApps\Angular 8 - prime ng\node_modules\fsevents\node_modules'
npm WARN @angular/animations@8.2.14 requires a peer of @angular/core@8.2.14 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.      
npm WARN bootstrap@4.4.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.     
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-toastr@11.2.1 requires a peer of rxjs@^6.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 243 packages from 79 contributors, removed 12 packages, updated 64 packages and audited 21410 packages in 131.013s
found 10 vulnerabilities (1 moderate, 9 high)
  run `npm audit fix` to fix them, or `npm audit` for details
PS D:\Angular-DemoApps\Angular 8 - prime ng>



And that’s it, 


Hope you like it.

[ If you are preparing for an interview please click here - angular interview questions and answers ]

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. I think I have never seen such blogs ever before that has complete things with all details which I want. So kindly update this ever for us.

    Data Science Course

    ReplyDelete
  3. Well we really like to visit this site, many useful information we can get here.

    Data Science Training

    ReplyDelete
  4. Interesting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post.It's really very nice and Useful post.Thanks..

    Data Science Courses

    ReplyDelete
  5. The web site is lovingly serviced and saved as much as date. So it should be, thanks for sharing this with us.

    Data Science Certification

    ReplyDelete
  6. Wonderful blog found to be very impressive to come across such an awesome blog. I should really appreciate the blogger for the efforts they have put in to develop such an amazing content for all the curious readers who are very keen of being updated across every corner. Ultimately, this is an awesome experience for the readers. Anyways, thanks a lot and keep sharing the content in future too.

    Artificial Intelligence Course in bhilai

    ReplyDelete
  7. Terrific post thoroughly enjoyed reading the blog and more over found to be the tremendous one. In fact, educating the participants with it's amazing content. Hope you share the similar content consecutively.

    artificial intelligence certification in bhilai

    ReplyDelete
  8. Really wonderful blog completely enjoyed reading and learning to gain the vast knowledge. Eventually, this blog helps in developing certain skills which in turn helpful in implementing those skills. Thanking the blogger for delivering such a beautiful content and keep posting the contents in upcoming days.

    Data Science training

    ReplyDelete
  9. I had same issue and resoved by change the buildOptimizer: fale in angular.json file.

    Just Change

    buildOptimizer: true

    To

    buildOptimizer: fale

    worked for me

    ReplyDelete
  10. Stupendous blog huge applause to the blogger and hoping you to come up with such an extraordinary content in future. Surely, this post will inspire many aspirants who are very keen in gaining the knowledge. Expecting many more contents with lot more curiosity further.

    Data Science training in Raipur

    ReplyDelete
  11. Extraordinary blog went amazed with the content that they have developed in a very descriptive manner. This type of content surely ensures the participants to explore themselves. Hope you deliver the same near the future as well. Gratitude to the blogger for the efforts.

    Digital Marketing training in Raipur

    ReplyDelete
  12. Terrific post thoroughly enjoyed reading the blog and more over found to be the tremendous one. In fact, educating the participants with it's amazing content. Hope you share the similar content consecutively.

    Data Science certification in Bhilai

    ReplyDelete
  13. Tremendous blog quite easy to grasp the subject since the content is very simple to understand. Obviously, this helps the participants to engage themselves in to the subject without much difficulty. Hope you further educate the readers in the same manner and keep sharing the content as always you do.

    Digital Marketing training in Bhilai

    ReplyDelete
  14. Stupendous blog huge applause to the blogger and hoping you to come up with such an extraordinary content in future. Surely, this post will inspire many aspirants who are very keen in gaining the knowledge. Expecting many more contents with lot more curiosity further.

    Data Science certification in Raipur

    ReplyDelete
  15. Truly mind blowing blog went amazed with the subject they have developed the content. These kind of posts really helpful to gain the knowledge of unknown things which surely triggers to motivate and learn the new innovative contents. Hope you deliver the similar successive contents forthcoming as well.

    Digital Marketing Course in Raipur

    ReplyDelete
  16. Extraordinary blog filled with an amazing content which no one has touched this subject before. Thanking the blogger for all the terrific efforts put in to develop such an awesome content. Expecting to deliver similar content further too and keep sharing as always.

    Digital Marketing Course

    ReplyDelete
  17. bro i love you , thanks so much

    ReplyDelete
  18. Stupendous blog huge applause to the blogger and hoping you to come up with such an extraordinary content in future. Surely, this post will inspire many aspirants who are very keen in gaining the knowledge. Expecting many more contents with lot more curiosity further.

    Data Science Certification in Bhilai

    ReplyDelete
  19. Extraordinary blog filled with an amazing content which no one has touched this subject before. Thanking the blogger for all the terrific efforts put in to develop such an awesome content. Expecting to deliver similar content further too and keep sharing as always.

    Data Science Training

    ReplyDelete
  20. Impressive blog to be honest definitely this post will inspire many more upcoming aspirants. Eventually, this makes the participants to experience and innovate themselves through knowledge wise by visiting this kind of a blog. Once again excellent job keep inspiring with your cool stuff.

    Data Science Training in Bhilai

    ReplyDelete
  21. Extraordinary blog went amazed with the content that they have developed in a very descriptive manner. This type of content surely ensures the participants to explore themselves. Hope you deliver the same near the future as well. Gratitude to the blogger for the efforts.

    Data Science Training

    ReplyDelete

Post a Comment