Angular2-使用Angular CLI快速搭建项目常见问题

开发环境:

在终端/控制台窗口中运行命令 node -vnpm -v查看相应版本,要求node 6.9.xnpm 3.x.x 以上的版本,更老的版本可能会出现错误,更新的版本则没问题。
升级Nodejs至最新稳定版:

1
2
//执行此命令(注:stable是稳定的意思)
n stable

由于权限问题,Mac或Linux平台可能会报以下错误:

1
2
3
4
install : node-v8.4.0
mkdir : /usr/local/n/versions/node/8.4.0
mkdir: /usr/local/n/versions/node/8.4.0: Permission denied
Error: sudo required

解决方法:

1
2
//命令前添加sudo,执行之后输入密码
sudo n stable
1
2
3
4
5
install : node-v8.4.0
mkdir : /usr/local/n/versions/node/8.4.0
fetch : https://nodejs.org/dist/v8.4.0/node-v8.4.0-darwin-x64.tar.gz
######################################################################## 100.0%
installed : v8.4.0

再执行node -v查看版本即已升级。
同理可得,npm也是这种方式升级:

1
2
3
sudo npm install npm -g
//可用淘宝镜像cnpm代替npm进行升级npm自身版本
sudo cnpm install npm -g

###安装Angular CLI
此步也是牵涉sudo权限问题:

1
2
3
sudo npm install -g @angular/cli
//亦可通过cnpm安装
sudo cnpm install -g @angular/cli

稍等片刻就安装成功了,可执行ng命令查看所有相关命令。

###创建项目
ng创建一个新项目:

1
ng new my-app

此时可能会在项目初始化成功后出现如下错误:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
installing ng
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tsconfig.json
create tslint.json
You can `ng set --global packageManager=cnpm`.
Installing packages for tooling via npm.
npm ERR! code MODULE_NOT_FOUND
npm ERR! Cannot find module 'internal/fs'
Package install failed, see above.
Package install failed, see above.

重要的是最后几句,此时去启动配置服务器是启动不起来的,解决方法就直接按照提示执行即可。

1
ng set --global packageManager=cnpm

相当于用cnpm代替npm,之后再重新创建项目然后如下命令启动开发服务器即可进行项目调试了。

1
2
cd my-app
ng serve --open