项目依赖的安装
Node和NPM的安装
网上教程较多,可以自行搜索,下面给出2个链接:
mac的安装
pc的安装
NX的安装
全局安装NX CLI
npm install -g @nrwl/schematics
复制代码
全局安装Angular CLI
npm install -g @angular/cli
复制代码
官网教程
ng-packagr的安装
在项目中安装
> npm i ng-packagr --save-dev
复制代码
github
创建一个workspace项目
首先通过nx命令行建立一个workspace
> create-nx-workspace example
复制代码
该过程中会自动安装所需的各项依赖,请确保通过nx命令建立workspace,避免因使用webpack或ng-cli创建项目,带来各项依赖的额外安装。
当nx workspace建立之后,我们需要在example的app中建立对应的项目
> ng generate app myapp --routing
复制代码
其中myapp是项目名称,—routing是自动增加路由依赖参数,由于项目会使用到路由,因此我们在建立项目时带上这个参数。如果忘记带上routing参数,也可以后续手动添加,不影响实际开发。
有些时候当nx或一些依赖的版本发生更新时,会出现一些预料之外的错误
Error: Cannot find module '~/example/node_modules/prettier/bin/prettier.js'
复制代码
此时可以参考官网issue,此类问题一般是由于依赖更新导致的,更新一下依赖就可以解决类似问题
> npm install prettier@1.10.1 -D
复制代码
当项目建立完成之后,我们可以看到在apps目录下建立了myapp这个目录,以及完整的代码结构。同时我们在vscode中会发现.angular-cli.json被更新了,其中被加入myapp的项目配置,一般情况下不需要去修改这些配置。
{
"name": "myapp",
"root": "apps/myapp/src",
"outDir": "dist/apps/myapp",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "../../../test.js",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "../../../tsconfig.spec.json",