Firstly I open Node.js command prompt and creating the project directory for my project creation.
My project name is – ServiceDemo
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 –
