jackieli123723 / jackieli123723.github.io

✅lilidong 个人博客
9 stars 0 forks source link

搭建ng5开发环境 #42

Open jackieli123723 opened 6 years ago

jackieli123723 commented 6 years ago

NG5 生成项目

作者:西门互联 可参考ng5商城脚手架

如果本电脑有ng2或者ng4的话 用他们的脚手架会失败

node 8.1.2 npm install -g @angular/cli 会安装不上

切换到低版本node7.6.0

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-                                                                                                                                                                                               front-mobile (master)
$ npm uninstall @angular/cli
npm ERR! path E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\node_                                                                                                                                                                                               modules\fsevents\node_modules\getpass\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'E:\jackieli\longyuanWor                                                                                                                                                                                               k\angular-longyuan-store-front-mobile\node_modules\fsevents\node_modules\getpass                                                                                                                                                                                               \node_modules'
npm ERR!  { Error: EPERM: operation not permitted, scandir 'E:\jackieli\longyuan                                                                                                                                                                                               Work\angular-longyuan-store-front-mobile\node_modules\fsevents\node_modules\getp                                                                                                                                                                                               ass\node_modules'
npm ERR!   stack: 'Error: EPERM: operation not permitted, scandir \'E:\\jackieli                                                                                                                                                                                               \\longyuanWork\\angular-longyuan-store-front-mobile\\node_modules\\fsevents\\nod                                                                                                                                                                                               e_modules\\getpass\\node_modules\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'scandir',
npm ERR!   path: 'E:\\jackieli\\longyuanWork\\angular-longyuan-store-front-mobil                                                                                                                                                                                               e\\node_modules\\fsevents\\node_modules\\getpass\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-12-27T0                                                                                                                                                                                               2_38_30_055Z-debug.log

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-                                                                                                                                                                                               front-mobile (master)
$ node -v
v8.1.2

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ node -v
v8.1.2

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ node -v
v8.1.2

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-12-27T02_41_02_957Z-debug.log

后面要先执行下面

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ nvm list

    9.2.0
    8.9.0
    8.4.0
  * 8.1.2 (Currently using 64-bit executable)
    7.6.0
    7.2.0
    6.10.0
    6.0.0
    5.6.0
    4.4.5

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ nvm use 7.6.0
Now using node v7.6.0 (64-bit)

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ node -v
v7.6.0

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ npm -v
4.1.2

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ npm cache clean

成功后执行下面

可能新版本会提示使用npm cache verify删除,可能删除不成功,强制删除
[html] view plain copy
npm cache verify --force 
或者这个

npm cache clean --force

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ npm install -g @angular/cli

成功

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ ng -v
_                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
|___/

Angular CLI: 1.6.2
Node: 7.6.0
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: error
typescript: 2.4.2
webpack: error

项目中 npm install

因为angular-cli是用typescript写的,所以要先装这两个: npm install -g typescript typings

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ ng serve --open
Your global Angular CLI version (1.6.2) is greater than your local
version (1.5.0). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 94% asset optimizationwebpack: wait until bundle finished: /                                                                                                                                                                                           Date: 2017-12-27T03:10:51.159Z
Hash: 8109d2a95946bb4ebc26
Time: 12422ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 55.4 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 557 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.17 MB [initial] [rendered]

WARNING in ./src/app/app.component.css
(Emitted value instead of an instance of Error) autoprefixer: E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\src\app\app.component.css:16:3: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\src\app\app.component.css:16:3: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
    at Object.emitWarning (E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\node_modules\webpack\lib\NormalModule.js:117:16)
    at E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\node_modules\postcss-loader\index.js:131:24
    at Array.forEach (native)
    at E:\jackieli\longyuanWork\angular-longyuan-store-front-mobile\node_modules\postcss-loader\index.js:130:31
 @ ./src/app/app.component.ts 15:21-51
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

webpack: Compiled with warnings.

Administrator@lenovo-PC MINGW64 /e/jackieli/longyuanWork/angular-longyuan-store-front-mobile (master)
$ npm install -g typescript typings