基于NX开发Angular项目

项目依赖的安装

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",