Angular8的使用(零)：安装和命令(Ubuntu)

Angular的使用(零)：安装和命令(Ubuntu)

说明：请进入root用户下进行如下操作

1.安装npm

1.1.安装npm

apt-get install npm //最新版本
npm -g install npm@6.9.0 //安装指定版本

1.2.查看npm的版本

npm -v

*[说明]：如果在更新版本之后，发现npm版本还是未发生变化，建议切换用户进行查看。

2.安装nodejs

2.1.安装nodejs最新版本

apt-get install nodejs   //最新版本

2.2.升级nodejs到指定版本

npm cache clean -f      // 清理npm的cache
npm install -g n    // 版本管理工具 名称n
sudo n 10.16.0     //更新至指定版本（版本切换）

n latest     //更新到最新版
sudo n rm 版本号   // 删除版本

2.3.查看nodejs的版本

node -v

3.安装angular

3.1.安装

npm install -g @angular/cli   //最新版本
npm install -g @angular/cli@8.1.1   //安装指定版本

如果安装的时候, 出现Request to https://registry.npmmirror.com/@angular%2fcli failed, reason: unable to get local issuer certificate
需要输入一下命令:

npm config set registry https://registry.npmmirror.com/

再次执行install命令, 如果还是出现上面的问题, 需要执行下面的命令:

npm config set strict-ssl false

再次执行install命令, 就可以实现安装.

3.2.查看版本

ng version或者ng -v

3.3.初始化编译项目

进入项目目录后，执行下面命令

npm install

如果出现Error: EACCES: permission denied:'/home/username/.npm'，则需要在root下赋予权限：

chmod -R 777 .npm
或者
sudo chown -R 1001:1001 "/home/username/.npm"

3.4.卸载angular

npm uninstall -g @angular/cli
npm cache verify --force
ng version

3.5.其他命令

3.5.1.创建新项目命令

ng new test-app   //其中test-app为项目名称

3.5.2.项目运行命令

ng serve --open

3.5.3.创建组件

ng generate component xxx //带有spec.ts文件
ng generate component xxx --no-spec //不带有spec.ts文件
ng generate component xxx --skip-tests // angular11版本没有-no-spec, 使用--skip-tests不生成测试文件
ng generate component xxx -it 生成内联模版（不会单独生成html文件）

ng g c xxx --skip-tests //也可以这个简化版命令

3.5.4.创建service

ng generate service my-service  //生成一个新服务
ng generate service my-service  --no-spec  //生成一个不带有spec.ts的新服务

3.5.5.创建管道

ng generate pipe my-pipe //生成一个新管道

3.5.6.创建路由

ng generate route my-route  // 生成一个新路由(该命令暂时为测试成功)
ng g m app-chlid --routing //生成一个带有路由的模块

3.5.7.创建模型类

ng generate class my-class //生成一个简易的模型类

3.5.8.创建指令

ng generate directive my-directive - 生成一个新指令

3.6.其他命令携带参数

--flat 表示是否不需要创建文件夹
--inline-template (-it) 模板是否应该放在ts文件里
--inline-style (-is) 样式是否应该放在ts文件里.
--spec 是否需要创建spec文件(测试文件)
--view-encapsulation (-ve) View Encapsulation策略 (简单理解为样式文件的作用范围策略).
--change-detection (-cd) 变化检查策略.
--prefix 设定这个component的前缀
--dry-run (-d), 打印出生成的文件列表, 而不直接生成.

说明：3.5和3.6部分参考他人博客链接：Angular的创建组件及其他命令

4.其他

1.代码修改，angular-cli不监听导致页面不自动刷新问题，使用以下命令：

echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches

或者

1.删除node_modules文件夹
2.npm cache clean.
3.npm install