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. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. bro i love you , thanks so much

    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 Certification in Bhilai

    ReplyDelete
  11. 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
  12. 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
  13. Strong network security starts with a smart setup. If possible, place your router at the center of your home. Routers send wireless signals Wifi Hacking Online

    ReplyDelete
  14. A lot of people are looking to download Pandora Premium Mod Apk 2022. If you are also one of them then keep reading this article Pandora One Free Download

    ReplyDelete
  15. I have not only given my heart away to you, I have also dedicated and given away my soul, my prayers and my very being to you. I don't have anything else left Love Husband Good Morning

    ReplyDelete

Post a Comment