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 ]