Angular 4

Cannot find module '@angular-devkit/core' - after clean install

Firstly I open Node.js command prompt and creating the project directory for my project creation. 
My project name is – ServiceDemo
My Project Directory is - D:\Angular>

Execute the serve commands - D:\Angular> ng new ServiceDemo
After successfully created my project – ServiceDemo and I tried to execute the command - "ng serve --open" and got error: ‘Cannot find module '@angular-devkit/core

Stayed Informed – Angular 5 and Angular 4 Documents

D:\Angular\ServiceDemo>ng serve --open
module.js:540
    throw err;
    ^
Error: Cannot find module '@angular-devkit/core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\Angular\ServiceDemo\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)

See the below steps -
Your environment has been set up for using Node.js 8.9.4 (x64) and npm.

C:\Users\Viaindia>d:
D:\>cd Angular
D:\Angular>ng new ServiceDemo
  create ServiceDemo/e2e/app.e2e-spec.ts (294 bytes)
  create ServiceDemo/e2e/app.po.ts (208 bytes)
  create ServiceDemo/e2e/tsconfig.e2e.json (235 bytes)
  create ServiceDemo/karma.conf.js (923 bytes)
  create ServiceDemo/package.json (1324 bytes)
  create ServiceDemo/protractor.conf.js (722 bytes)
  create ServiceDemo/README.md (1027 bytes)
  create ServiceDemo/tsconfig.json (363 bytes)
  create ServiceDemo/tslint.json (3040 bytes)
  create ServiceDemo/.angular-cli.json (1247 bytes)
  create ServiceDemo/.editorconfig (245 bytes)
  create ServiceDemo/.gitignore (516 bytes)
  create ServiceDemo/src/assets/.gitkeep (0 bytes)
  create ServiceDemo/src/environments/environment.prod.ts (51 bytes)
  create ServiceDemo/src/environments/environment.ts (387 bytes)
  create ServiceDemo/src/favicon.ico (5430 bytes)
  create ServiceDemo/src/index.html (298 bytes)
  create ServiceDemo/src/main.ts (370 bytes)
  create ServiceDemo/src/polyfills.ts (2405 bytes)
  create ServiceDemo/src/styles.css (80 bytes)
  create ServiceDemo/src/test.ts (1085 bytes)
  create ServiceDemo/src/tsconfig.app.json (211 bytes)
  create ServiceDemo/src/tsconfig.spec.json (304 bytes)
  create ServiceDemo/src/typings.d.ts (104 bytes)
  create ServiceDemo/src/app/app.module.ts (316 bytes)
  create ServiceDemo/src/app/app.component.html (1141 bytes)
  create ServiceDemo/src/app/app.component.spec.ts (986 bytes)
  create ServiceDemo/src/app/app.component.ts (207 bytes)
  create ServiceDemo/src/app/app.component.css (0 bytes)
Installing packages for tooling via npm.

> [email protected] install D:\Angular\ServiceDemo\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\Viaindia\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node
> [email protected] postinstall D:\Angular\ServiceDemo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
> [email protected] postinstall D:\Angular\ServiceDemo\node_modules\node-sass
> node scripts/build.js
Binary found at D:\Angular\ServiceDemo\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN @angular-devkit/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @schematics/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1060 packages in 54.192s
Installed packages for tooling via npm.
Project 'ServiceDemo' successfully created.

D:\Angular>cd ServiceDemo
D:\Angular\ServiceDemo>ng serve --open
module.js:540
    throw err;
    ^
Error: Cannot find module '@angular-devkit/core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\Angular\ServiceDemo\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)


Solution – To resolve the above issue, follow below steps

I struggled with the same problem just a minute ago and I resolve after updating the Angular CLI. The Update command is -
npm update -g @angular/cli


The Example looks like -
Your environment has been set up for using Node.js 8.9.4 (x64) and npm.

C:\Users\Viaindia>npm update -g @angular/cli
C:\Users\Viaindia\AppData\Roaming\npm\ng -> C:\Users\Viaindia\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @angular/[email protected]
added 319 packages, removed 57 packages, updated 46 packages and moved 5 packages in 90.571s


C:\Users\Viaindia>
After that I created a new project (DemoProj1) and execute the serve commond, Its  Compiled successfully.
The Example looks like -
D:\Angular\DemoProj1>ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 11% building modules 12/13 modules 1 active ...\DemoProj1\src\app\app.component.htmlwebpack: wait until bundle finished: /                                Date: 2018-01-23T03:47:37.734Z
Hash: 363a68fe026da6ecd219
Time: 7080ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 19.4 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 550 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.6 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.41 MB [initial] [rendered]

webpack: Compiled successfully.
    at Function.Module._load (module.js:491:3)


You can see in the video demo in detail –

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions