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 ]
This comment has been removed by the author.
ReplyDeleteWay 1 helped me.
ReplyDelete👍
Deletefirst one Worked for me
DeleteGreat blog, I was searching this for a while. Do post more like this.
ReplyDeleteAngularJS Training in Chennai
Angular 4 Training in Chennai
Angular 5 Training in Chennai
Angular Training in Chennai
React JS Training in Chennai
PHP course in Chennai
Web Designing Training in Chennai
React JS Training in Chennai
Salesforce course in Chennai
Angular course in Chennai
AngularJS Interview Questions
hi,this page having excellent information.that could help us more.thaks for sharing.
ReplyDeleteC and C++ Training Institute in chennai | C and C++ Training Institute in anna nagar | C and C++ Training Institute in omr | C and C++ Training Institute in porur | C and C++ Training Institute in tambaram | C and C++ Training Institute in velachery
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.
ReplyDeleteData Science Course
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..
ReplyDeleteData Science Courses
Nice articel, I love your today news. Thank You.
ReplyDeleteTerrific 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.
ReplyDeleteartificial intelligence certification in bhilai
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.
ReplyDeleteData Science training
I had same issue and resoved by change the buildOptimizer: fale in angular.json file.
ReplyDeleteJust Change
buildOptimizer: true
To
buildOptimizer: fale
worked for me
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.
ReplyDeleteData Science training in Raipur
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.
ReplyDeleteDigital Marketing training in Raipur
bro i love you , thanks so much
ReplyDeleteStupendous 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.
ReplyDeleteData Science Certification in Bhilai
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.
ReplyDeleteData Science Training
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.
ReplyDeleteData Science Training in Bhilai
Great blog with valuable information.
ReplyDeleteREST API Testing Online Training
REST API Testing Training in Chennai
REST API Testing Training in Bangalore
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
ReplyDeleteA 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
ReplyDeleteI 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