基于NX开发Angular项目

最新推荐文章于 2024-08-12 08:53:38 发布

weixin_34297704

最新推荐文章于 2024-08-12 08:53:38 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json git ViewUI

原文链接：https://juejin.im/post/5a6936966fb9a01c9b662119

本文详细介绍了如何使用NX创建Angular工作区项目，包括安装依赖、创建项目、添加库和状态管理，以及如何打包和发布库。文章还讨论了NX的优缺点，以及在项目中遇到的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目依赖的安装

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