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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^