Nx 工作区:Angular CLI 在迁移到 NX 后找不到文件路径
Nx Workspace: Angular CLI does not find file path after migrate to NX
我正在尝试将 Angular CLI 应用程序迁移到 Nx。我的主要目标是将我的整个应用程序变成一个大型 nx 项目,然后逐渐将其拆分为小型远程应用程序和共享库
A 执行命令 ng add @nrwl/workspace 并将我的应用程序移动到 apps//src,创建 nx.json,创建更漂亮的配置文件...我认为一切顺利,但是,我的组件到应用程序文件夹中找不到任何文件路径。
我已经创建了进入 tsconfig.base.json 的路径,但组件仍然找不到文件路径。有没有我遗漏的配置?
tsconfig.base.json
"paths": {
"@bulk-components/*": [
"apps/portal-alelo-auto/src/app/shared/components/bulk/*"
]
组件示例
app/portal-alelo-auto/src/app/quick-search/card-detail/reissue/reissue.component.ts
import { CustomerType } from 'src/app/shared/enum'; //
import { MessageModule } from '@bulk-components/shared/message/message.module';
您最好的选择是使用与您当前拥有的 angular 版本兼容的 nx 版本创建一个新工作区。
首先创建两个工作空间,一个供您参考,一个供您将项目迁移到其中。
用他想要的版本替换“最新”,并执行两次
(当被问到'preset',selectangular)
npx create-nx-workspace@latest
这将在每个工作区创建一个应用程序(更多信息在 official docs)
安装 cli 以获得更好的 nx 体验:
npm install -g nx
用作基本文件夹 <workspace-base>/apps/<your app>/src
我将其命名为 base
- 将以下文件移动到基本文件夹以覆盖现有文件:
- index.html
- main.ts
- styles.scss
- favicon.ico(如果有的话)
忽略基本级别的所有其他文件
将所有剩余的应用文件夹复制到<workspace-base>/apps/<your app>/src/app
添加到 <workspace-base>/package.json
您的应用程序使用的库(angular 依赖项除外)。
运行 npm i
现在让我们尝试 运行 您的应用程序与 nx。
运行
nx serve <your app>
您的应用程序文件中可能会有一些需要调整的导入,但在您选择的 IDE 中,一些替换所有命令都不会解决问题。
确保查阅参考工作区以验证是否对 nx 基础文件进行了过多更改(需要时)。
很难提供比这更多的说明,因为每个应用程序都有其特点,但这是通往荣耀的道路!
此手动迁移到 nx 的替代方法是 运行 来自 nx official documentation 的说明。老实说,我只是使用那里的说明从来没有成功过,而且我已经将相当多的 angular 项目迁移到 nx。
我正在尝试将 Angular CLI 应用程序迁移到 Nx。我的主要目标是将我的整个应用程序变成一个大型 nx 项目,然后逐渐将其拆分为小型远程应用程序和共享库
A 执行命令 ng add @nrwl/workspace 并将我的应用程序移动到 apps//src,创建 nx.json,创建更漂亮的配置文件...我认为一切顺利,但是,我的组件到应用程序文件夹中找不到任何文件路径。
我已经创建了进入 tsconfig.base.json 的路径,但组件仍然找不到文件路径。有没有我遗漏的配置?
tsconfig.base.json
"paths": {
"@bulk-components/*": [
"apps/portal-alelo-auto/src/app/shared/components/bulk/*"
]
组件示例 app/portal-alelo-auto/src/app/quick-search/card-detail/reissue/reissue.component.ts
import { CustomerType } from 'src/app/shared/enum'; //
import { MessageModule } from '@bulk-components/shared/message/message.module';
您最好的选择是使用与您当前拥有的 angular 版本兼容的 nx 版本创建一个新工作区。
首先创建两个工作空间,一个供您参考,一个供您将项目迁移到其中。
用他想要的版本替换“最新”,并执行两次 (当被问到'preset',selectangular)
npx create-nx-workspace@latest
这将在每个工作区创建一个应用程序(更多信息在 official docs)
安装 cli 以获得更好的 nx 体验:
npm install -g nx
用作基本文件夹 <workspace-base>/apps/<your app>/src
我将其命名为 base
- 将以下文件移动到基本文件夹以覆盖现有文件:
- index.html
- main.ts
- styles.scss
- favicon.ico(如果有的话)
忽略基本级别的所有其他文件
将所有剩余的应用文件夹复制到
<workspace-base>/apps/<your app>/src/app
添加到
<workspace-base>/package.json
您的应用程序使用的库(angular 依赖项除外)。运行
npm i
现在让我们尝试 运行 您的应用程序与 nx。
运行
nx serve <your app>
您的应用程序文件中可能会有一些需要调整的导入,但在您选择的 IDE 中,一些替换所有命令都不会解决问题。
确保查阅参考工作区以验证是否对 nx 基础文件进行了过多更改(需要时)。
很难提供比这更多的说明,因为每个应用程序都有其特点,但这是通往荣耀的道路!
此手动迁移到 nx 的替代方法是 运行 来自 nx official documentation 的说明。老实说,我只是使用那里的说明从来没有成功过,而且我已经将相当多的 angular 项目迁移到 nx。