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’
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.
> node-sass@4.7.2 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
> uglifyjs-webpack-plugin@0.4.6 postinstall D:\Angular\ServiceDemo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
> node-sass@4.7.2 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/schematics@0.0.51 requires a peer of @angular-devkit/core@0.0.28 but none is installed. You must install peer dependencies yourself.
npm WARN @schematics/angular@0.1.16 requires a peer of @angular-devkit/core@0.0.28 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: 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: fsevents@1.1.3 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @angular/cli@1.6.5
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 –
|
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..
|
