docs(core): split angular migrate guide (#15807)
This commit is contained in:
Isaac Mann
GitHub
parent
1e31d4726f
commit
83b05a6e2f
@ -2178,6 +2178,79 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Adopting Nx From Angular CLI",
|
||||||
|
"path": "/recipes/adopting-nx-angular",
|
||||||
|
"id": "adopting-nx-angular",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI",
|
||||||
|
"path": "/recipes/adopting-nx-angular/migration-angular",
|
||||||
|
"id": "migration-angular",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI to Integrated",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-integrated",
|
||||||
|
"id": "angular-integrated",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI Manually",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-manual",
|
||||||
|
"id": "angular-manual",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Multiple Angular CLI Repos",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-multiple",
|
||||||
|
"id": "angular-multiple",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI",
|
||||||
|
"path": "/recipes/adopting-nx-angular/migration-angular",
|
||||||
|
"id": "migration-angular",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI to Integrated",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-integrated",
|
||||||
|
"id": "angular-integrated",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI Manually",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-manual",
|
||||||
|
"id": "angular-manual",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Multiple Angular CLI Repos",
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-multiple",
|
||||||
|
"id": "angular-multiple",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Executors",
|
"name": "Executors",
|
||||||
"path": "/recipes/executors",
|
"path": "/recipes/executors",
|
||||||
|
|||||||
@ -503,6 +503,97 @@
|
|||||||
"path": "/recipes/adopting-nx/manual",
|
"path": "/recipes/adopting-nx/manual",
|
||||||
"tags": []
|
"tags": []
|
||||||
},
|
},
|
||||||
|
"/recipes/adopting-nx-angular": {
|
||||||
|
"id": "adopting-nx-angular",
|
||||||
|
"name": "Adopting Nx From Angular CLI",
|
||||||
|
"description": "Advanced guides to adopt Nx coming from the Angular CLI",
|
||||||
|
"file": "",
|
||||||
|
"itemList": [
|
||||||
|
{
|
||||||
|
"id": "migration-angular",
|
||||||
|
"name": "From Angular CLI",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/migration-angular",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/migration-angular",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "angular-integrated",
|
||||||
|
"name": "From Angular CLI to Integrated",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-integrated",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-integrated",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "angular-manual",
|
||||||
|
"name": "From Angular CLI Manually",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-manual",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-manual",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "angular-multiple",
|
||||||
|
"name": "From Multiple Angular CLI Repos",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-multiple",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-multiple",
|
||||||
|
"tags": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
"/recipes/adopting-nx-angular/migration-angular": {
|
||||||
|
"id": "migration-angular",
|
||||||
|
"name": "From Angular CLI",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/migration-angular",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/migration-angular",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
"/recipes/adopting-nx-angular/angular-integrated": {
|
||||||
|
"id": "angular-integrated",
|
||||||
|
"name": "From Angular CLI to Integrated",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-integrated",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-integrated",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
"/recipes/adopting-nx-angular/angular-manual": {
|
||||||
|
"id": "angular-manual",
|
||||||
|
"name": "From Angular CLI Manually",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-manual",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-manual",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
"/recipes/adopting-nx-angular/angular-multiple": {
|
||||||
|
"id": "angular-multiple",
|
||||||
|
"name": "From Multiple Angular CLI Repos",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/angular-multiple",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/recipes/adopting-nx-angular/angular-multiple",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
"/recipes/executors": {
|
"/recipes/executors": {
|
||||||
"id": "executors",
|
"id": "executors",
|
||||||
"name": "Executors",
|
"name": "Executors",
|
||||||
|
|||||||
@ -859,6 +859,33 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Adopting Nx From Angular CLI",
|
||||||
|
"id": "adopting-nx-angular",
|
||||||
|
"description": "Advanced guides to adopt Nx coming from the Angular CLI",
|
||||||
|
"itemList": [
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI",
|
||||||
|
"id": "migration-angular",
|
||||||
|
"file": "shared/migration/migration-angular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI to Integrated",
|
||||||
|
"id": "angular-integrated",
|
||||||
|
"file": "shared/migration/angular-integrated"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Angular CLI Manually",
|
||||||
|
"id": "angular-manual",
|
||||||
|
"file": "shared/migration/angular-manual"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "From Multiple Angular CLI Repos",
|
||||||
|
"id": "angular-multiple",
|
||||||
|
"file": "shared/migration/angular-multiple"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Executors",
|
"name": "Executors",
|
||||||
"id": "executors",
|
"id": "executors",
|
||||||
|
|||||||
106
docs/shared/migration/angular-integrated.md
Normal file
106
docs/shared/migration/angular-integrated.md
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
# Migrating an Angular CLI workspace to an Integrated Nx Monorepo
|
||||||
|
|
||||||
|
To take advantage of Nx's monorepo features provided by Nx and the Nx Angular plugin, you can also perform a migration from an Angular CLI to an Integrated Nx Monorepo with the command:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng add @nrwl/angular@<version_number>
|
||||||
|
```
|
||||||
|
|
||||||
|
This installs the `@nrwl/angular` (or `@nrwl/workspace`) package into your workspace and runs a generator (or schematic) to transform your workspace. The generator applies the following changes to your workspace:
|
||||||
|
|
||||||
|
- Installs the `nx` and `@nrwl/workspace` packages.
|
||||||
|
- Moves your applications into the `apps` folder, and updates the relevant file paths in your configuration files.
|
||||||
|
- Moves your e2e suites into the `apps/<app name>-e2e` folder, and updates the relevant file paths in your configuration files.
|
||||||
|
- Moves your libraries into the `libs` folder, and updates the relevant file paths in your configuration files.
|
||||||
|
- Updates your `package.json` scripts to use `nx` instead of `ng`.
|
||||||
|
- Splits your `angular.json` into `project.json` files for each project with updated paths.
|
||||||
|
|
||||||
|
After the changes are applied, your workspace file structure should look similar to the one below:
|
||||||
|
|
||||||
|
```text
|
||||||
|
<workspace name>/
|
||||||
|
├── apps/
|
||||||
|
│ └─ <app name>/
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── app/
|
||||||
|
│ │ ├── assets/
|
||||||
|
│ │ ├── favicon.ico
|
||||||
|
│ │ ├── index.html
|
||||||
|
│ │ ├── main.ts
|
||||||
|
│ │ └── styles.css
|
||||||
|
│ ├── project.json
|
||||||
|
│ ├── tsconfig.app.json
|
||||||
|
│ └── tsconfig.spec.json
|
||||||
|
├── libs/
|
||||||
|
│ └── <lib name>/
|
||||||
|
│ ├── src/
|
||||||
|
│ ├── ng-package.json
|
||||||
|
│ ├── package.json
|
||||||
|
│ ├── project.json
|
||||||
|
│ ├── README.md
|
||||||
|
│ ├── tsconfig.lib.json
|
||||||
|
│ ├── tsconfig.lib.prod.json
|
||||||
|
│ └── tsconfig.spec.json
|
||||||
|
├── tools/
|
||||||
|
├── .editorconfig
|
||||||
|
├── .gitignore
|
||||||
|
├── .prettierignore
|
||||||
|
├── .prettierrc
|
||||||
|
├── karma.conf.js
|
||||||
|
├── nx.json
|
||||||
|
├── package.json
|
||||||
|
├── README.md
|
||||||
|
└── tsconfig.base.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Your workspace is now powered by Nx! You can verify that your application still runs as intended:
|
||||||
|
|
||||||
|
- To serve, run `nx serve <app name>`.
|
||||||
|
- To build, run `nx build <app name>`.
|
||||||
|
- To run unit tests, run `nx test <app name>`.
|
||||||
|
- To see your project graph, run `nx graph`.
|
||||||
|
|
||||||
|
> Your project graph will grow as you add and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see the changes in-browser as you add them.
|
||||||
|
|
||||||
|
## Older Versions of Angular
|
||||||
|
|
||||||
|
To migrate to legacy versions of Nx prior to Nx 13.10, run the command:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng add @nrwl/workspace@<version_number>
|
||||||
|
```
|
||||||
|
|
||||||
|
Refer to the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) for matching Angular and Nx versions.
|
||||||
|
|
||||||
|
Support for workspaces with multiple applications and libraries was added in Nx v14.1.0. If you are migrating using an older version of Nx, your workspace can only contain one application and no libraries in order to use the automated migration, otherwise, you can still [migrate manually](/recipes/adopting-nx-angular/angular-manual).
|
||||||
|
|
||||||
|
## Modified Folder Structure
|
||||||
|
|
||||||
|
The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. If your workspace has deviated from what the Angular CLI generates, you might not be able to use the automated migration and you will need to [manually migrate your workspace](/recipes/adopting-nx-angular/angular-manual).
|
||||||
|
|
||||||
|
Currently, the automated migration supports workspaces using the following executors (builders):
|
||||||
|
|
||||||
|
- `@angular-devkit/build-angular:browser`
|
||||||
|
- `@angular-devkit/build-angular:dev-server`
|
||||||
|
- `@angular-devkit/build-angular:extract-i18n`
|
||||||
|
- `@angular-devkit/build-angular:karma`
|
||||||
|
- `@angular-devkit/build-angular:ng-packagr`
|
||||||
|
- `@angular-devkit/build-angular:protractor`
|
||||||
|
- `@angular-devkit/build-angular:server`
|
||||||
|
- `@angular-eslint/builder:lint`
|
||||||
|
- `@cypress/schematic:cypress`
|
||||||
|
- `@nguniversal/builders:prerender`
|
||||||
|
- `@nguniversal/builders:ssr-dev-server`
|
||||||
|
|
||||||
|
Support for other executors may be added in the future.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
Learn more about the advantages of Nx in the following guides:
|
||||||
|
|
||||||
|
- [Using Cypress for e2e tests](/packages/cypress)
|
||||||
|
- [Using Jest for unit tests](/packages/jest)
|
||||||
|
- [Computation Caching](/concepts/how-caching-works)
|
||||||
|
- [Rebuilding and Retesting What is Affected](/concepts/affected)
|
||||||
|
- [Integrate with Editors](/core-features/integrate-with-editors)
|
||||||
|
- [Advanced Angular Micro Frontends with Dynamic Module Federation](/recipes/module-federation/dynamic-module-federation-with-angular)
|
||||||
196
docs/shared/migration/angular-manual.md
Normal file
196
docs/shared/migration/angular-manual.md
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
# Migrating an Angular application manually
|
||||||
|
|
||||||
|
{% callout type="note" title="Older Angular Versions" %}
|
||||||
|
If you are using older versions of Angular (version 13 or lower), make sure to use the appropriate version of Nx that matches your version of Angular. See the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) to find the correct version. The generated files will also be slightly different.
|
||||||
|
{% /callout %}
|
||||||
|
|
||||||
|
If you are unable to automatically transform your Angular CLI workspace to an Nx workspace using the [ng add](#transforming-an-angular-cli-workspace-to-an-nx-workspace) method, there are some manual steps you can take to move your project(s) into an Nx workspace.
|
||||||
|
|
||||||
|
### Generating a new workspace
|
||||||
|
|
||||||
|
To start, run the command to generate an Nx workspace with an Angular application.
|
||||||
|
|
||||||
|
**Using `npx`**
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npx create-nx-workspace myorg --preset=angular-standalone
|
||||||
|
```
|
||||||
|
|
||||||
|
**Using `npm init`**
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm init nx-workspace myorg --preset=angular-standalone
|
||||||
|
```
|
||||||
|
|
||||||
|
**Using `yarn create`**
|
||||||
|
|
||||||
|
```shell
|
||||||
|
yarn create nx-workspace myorg --preset=angular-standalone
|
||||||
|
```
|
||||||
|
|
||||||
|
When prompted for the `application name`, enter the _project name_ from your current `angular.json` file.
|
||||||
|
|
||||||
|
A new Nx workspace with your `org name` as the folder name, and your `application name` as the root-level application is generated.
|
||||||
|
|
||||||
|
```text
|
||||||
|
<workspace name>/
|
||||||
|
├── e2e/
|
||||||
|
│ ├── src/
|
||||||
|
│ ├── .eslintrc.json
|
||||||
|
│ ├── cypress.config.ts
|
||||||
|
│ ├── project.json
|
||||||
|
│ └── tsconfig.json
|
||||||
|
├── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ ├── assets/
|
||||||
|
│ ├── favicon.ico
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── main.ts
|
||||||
|
│ ├── styles.css
|
||||||
|
│ └── test-setup.ts
|
||||||
|
├── .eslintrc.json
|
||||||
|
├── .eslintrc.base.json
|
||||||
|
├── .gitignore
|
||||||
|
├── .prettierignore
|
||||||
|
├── .prettierrc
|
||||||
|
├── jest.config.app.ts
|
||||||
|
├── jest.config.ts
|
||||||
|
├── jest.preset.js
|
||||||
|
├── nx.json
|
||||||
|
├── package.json
|
||||||
|
├── project.json
|
||||||
|
├── README.md
|
||||||
|
├── tsconfig.app.json
|
||||||
|
├── tsconfig.base.json
|
||||||
|
├── tsconfig.editor.json
|
||||||
|
├── tsconfig.json
|
||||||
|
└── tsconfig.spec.json
|
||||||
|
```
|
||||||
|
|
||||||
|
### Review Angular installed packages versions
|
||||||
|
|
||||||
|
Creating an Nx workspace with the latest version will install the Angular packages on their latest versions. If you're using a [lower version that's supported by the latest Nx](/packages/angular/documents/angular-nx-version-matrix), make sure to adjust the newly generated `package.json` file with your versions.
|
||||||
|
|
||||||
|
### Copying over application files
|
||||||
|
|
||||||
|
Your application code is self-contained within the `src` folder of your Angular CLI workspace.
|
||||||
|
|
||||||
|
- Copy the `src` folder from your Angular CLI project to the `apps/<app name>` folder, overwriting the existing `src` folder.
|
||||||
|
- Copy any project-specific configuration files, such as `browserslist`, or service worker configuration files into their relative path under `src` in the root of the repo.
|
||||||
|
- Transfer the `assets`, `scripts`, `styles`, and build-specific configuration, such as service worker configuration, from your Angular CLI `angular.json` to the root-level `project.json` file.
|
||||||
|
|
||||||
|
Verify your application runs correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng serve <app name>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Updating your unit testing configuration
|
||||||
|
|
||||||
|
Nx uses Jest by default. If you have any custom Jest configuration, you need to update the workspace Jest configuration also.
|
||||||
|
|
||||||
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng test <app name>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you are using `Karma` for unit testing:
|
||||||
|
|
||||||
|
- Copy the `karma.conf.js` file to the root folder.
|
||||||
|
- Copy the `test.ts` file to your `src` folder.
|
||||||
|
- Copy the `test` target in your `architect` configuration from your Angular CLI `angular.json` file into the `targets` configuration in the `project.json` file in your Nx workspace.
|
||||||
|
- Run `nx format` to change `architect` to `targets` and `builder` to `executor`.
|
||||||
|
|
||||||
|
> Jest will be used by default when generating new applications. If you want to continue using `Karma`, set the `unitTestRunner` to `karma` in the `generators` section of the `nx.json` file.
|
||||||
|
|
||||||
|
- Update `test-setup.ts` to `test.ts` in the `files` array of the `tsconfig.spec.json` file.
|
||||||
|
|
||||||
|
```json {% fileName="tsconfig.spec.json" %}
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../dist/out-tsc",
|
||||||
|
"types": ["jasmine", "node"]
|
||||||
|
},
|
||||||
|
"files": ["src/test.ts", "src/polyfills.ts"],
|
||||||
|
"include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng test <app name>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Updating your E2E testing configuration
|
||||||
|
|
||||||
|
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng e2e <app name>-e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
If you are using `Protractor` for E2E testing:
|
||||||
|
|
||||||
|
- Delete the `e2e` folder that was generated to use Cypress.
|
||||||
|
- Copy the `e2e` folder from your Angular CLI workspace into the root folder.
|
||||||
|
- Create the project configuration file at `e2e/project.json`.
|
||||||
|
- Copy the project configuration for `e2e` from the Angular CLI workspace `angular.json` file to `e2e/project.json` and adjust the file paths to be relative to `e2e`.
|
||||||
|
- Run `nx format` to change `architect` to `targets` and `builder` to `executor`.
|
||||||
|
|
||||||
|
Create a `tsconfig.json` file under `e2e` folder:
|
||||||
|
|
||||||
|
```json {% fileName="e2e/tsconfig.json" %}
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../dist/out-tsc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Update the `tsconfig.app.json` to extend the root `tsconfig.json`:
|
||||||
|
|
||||||
|
```json {% fileName="tsconfig.app.json" %}
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"types": ["jasmine", "jasminewd2", "node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Verify your E2E tests run correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
ng e2e e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
> Cypress will be used by default when generating new applications. If you want to continue using `Protractor`, set the `e2eTestRunner` to `protractor` in the `generators` section of the `nx.json` file.
|
||||||
|
|
||||||
|
### Updating your linting configuration
|
||||||
|
|
||||||
|
For lint rules, migrate your existing rules into the root `.eslintrc.base.json` file.
|
||||||
|
|
||||||
|
Verify your lint checks run correctly by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
OR
|
||||||
|
|
||||||
|
```shell
|
||||||
|
yarn lint
|
||||||
|
```
|
||||||
|
|
||||||
|
Learn more about the advantages of Nx in the following guides:
|
||||||
|
|
||||||
|
[Using Cypress for e2e tests](/packages/cypress) \
|
||||||
|
[Using Jest for unit tests](/packages/jest) \
|
||||||
|
[Rebuilding and Retesting What is Affected](/concepts/affected)
|
||||||
20
docs/shared/migration/angular-multiple.md
Normal file
20
docs/shared/migration/angular-multiple.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
# Migrating multiple Angular CLI workspaces into an Nx Monorepo
|
||||||
|
|
||||||
|
Migrating multiple Angular CLI workspaces into a single Nx monorepo involves some more manual steps and decisions to take.
|
||||||
|
|
||||||
|
- can we first align all apps to the same Angular version (e.g. using Angular CLI migrations)
|
||||||
|
- convert each of the apps into an easy to copy "Nx shape" (with `project.json` etc) using some of the before mentioned migration scripts
|
||||||
|
- copy everything into a new Nx workspace
|
||||||
|
|
||||||
|
Very often however we might also need to do it incrementally, such as
|
||||||
|
|
||||||
|
- migrating all apps into a monorepo
|
||||||
|
- keep them at different Angular & external dependency versions until everything is migrated
|
||||||
|
- migrate them one by one incrementally and over time
|
||||||
|
|
||||||
|
The following video tutorial walks you through such a scenario.
|
||||||
|
|
||||||
|
{% youtube
|
||||||
|
src="https://www.youtube.com/embed/M5NwkRNrpK0"
|
||||||
|
title="Nx Tutorial: Migrate Multiple Angular CLI apps into a Single Nx Monorepo"
|
||||||
|
width="100%" /%}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
# Migrating an Angular CLI project to Nx
|
# Migrating an Angular CLI project to Nx
|
||||||
|
|
||||||
Within an Nx workspace, you gain many capabilities that help you build applications and libraries using a monorepo approach. If you are currently using an Angular CLI workspace, you can transform it into an Nx workspace.
|
Within an Nx workspace, you gain many capabilities that help you build applications and libraries. If you are currently using an Angular CLI workspace, you can transform it into an Nx workspace.
|
||||||
|
|
||||||
## Migrating to a Standalone Angular App with Nx
|
## Migrating to a Standalone Angular App with Nx
|
||||||
|
|
||||||
You can migrate to a [Standalone Angular App](/angular-standalone-tutorial/1-code-generation) with the command:
|
You can migrate to a [Standalone Angular App](/concepts/integrated-vs-package-based#standalone-applications) with the command:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
npx nx init
|
npx nx init
|
||||||
@ -18,106 +18,16 @@ This will enable you to use the Nx CLI in your existing Angular CLI workspace wh
|
|||||||
- An `nx.json` file will be created in the root of your workspace.
|
- An `nx.json` file will be created in the root of your workspace.
|
||||||
- For an Angular 14+ repo, the `angular.json` file is split into separate `project.json` files for each project.
|
- For an Angular 14+ repo, the `angular.json` file is split into separate `project.json` files for each project.
|
||||||
|
|
||||||
After the process completes, you can continue using the same `serve/build/lint/test` commands you are used to.
|
|
||||||
|
|
||||||
**Note:** The changes will be slightly different for Angular 13 and lower.
|
**Note:** The changes will be slightly different for Angular 13 and lower.
|
||||||
|
|
||||||
## Migrating to an Integrated Nx Monorepo
|
Your workspace is now powered by Nx! You can verify that your application still runs as intended:
|
||||||
|
|
||||||
To take advantage of Nx's monorepo features provided by Nx and the Nx Angular plugin, you can also perform a migration from an Angular CLI to an Integrated Nx Monorepo with the command:
|
- To serve, run `nx serve <app name>`.
|
||||||
|
- To build, run `nx build <app name>`.
|
||||||
```shell
|
- To run unit tests, run `nx test <app name>`.
|
||||||
ng add @nrwl/angular@<version_number>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note**: To migrate to legacy versions of Nx prior to Nx 13.10, run the command:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng add @nrwl/workspace@<version_number>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note**: Refer to the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) for matching Angular and Nx versions.
|
|
||||||
|
|
||||||
**Note**: Support for workspaces with multiple applications and libraries was added in Nx v14.1.0. If you are migrating using an older version of Nx, your workspace can only contain one application and no libraries in order to use the automated migration, otherwise, you can still [migrate manually](#transitioning-manually).
|
|
||||||
|
|
||||||
> The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. If your workspace has deviated from what the Angular CLI generates, you might not be able to use the automated migration and you will need to [manually migrate your workspace](#transitioning-manually).
|
|
||||||
>
|
|
||||||
> Currently, the automated migration supports workspaces using the following executors (builders):
|
|
||||||
>
|
|
||||||
> - `@angular-devkit/build-angular:browser`
|
|
||||||
> - `@angular-devkit/build-angular:dev-server`
|
|
||||||
> - `@angular-devkit/build-angular:extract-i18n`
|
|
||||||
> - `@angular-devkit/build-angular:karma`
|
|
||||||
> - `@angular-devkit/build-angular:ng-packagr`
|
|
||||||
> - `@angular-devkit/build-angular:protractor`
|
|
||||||
> - `@angular-devkit/build-angular:server`
|
|
||||||
> - `@angular-eslint/builder:lint`
|
|
||||||
> - `@cypress/schematic:cypress`
|
|
||||||
> - `@nguniversal/builders:prerender`
|
|
||||||
> - `@nguniversal/builders:ssr-dev-server`
|
|
||||||
>
|
|
||||||
> Support for other executors may be added in the future.
|
|
||||||
|
|
||||||
This installs the `@nrwl/angular` (or `@nrwl/workspace`) package into your workspace and runs a generator (or schematic) to transform your workspace. The generator applies the following changes to your workspace:
|
|
||||||
|
|
||||||
- Installs the `nx` and `@nrwl/workspace` packages.
|
|
||||||
- Creates an `nx.json` file in the root of your workspace.
|
|
||||||
- Creates configuration files for Prettier.
|
|
||||||
- Creates an `apps` folder for generating applications.
|
|
||||||
- Creates a `libs` folder for generating libraries.
|
|
||||||
- Creates a `tools` folder that includes files for custom workspace tooling, such as workspace-specific generators and scripts.
|
|
||||||
- Moves your applications into the `apps` folder, and updates the relevant file paths in your configuration files.
|
|
||||||
- Moves your e2e suites into the `apps/<app name>-e2e` folder, and updates the relevant file paths in your configuration files.
|
|
||||||
- Moves your libraries into the `libs` folder, and updates the relevant file paths in your configuration files.
|
|
||||||
- Updates your `package.json` scripts to use `nx` instead of `ng`.
|
|
||||||
- Splits your `angular.json` into `project.json` files for each project with updated paths.
|
|
||||||
|
|
||||||
After the changes are applied, your workspace file structure should look similar to the one below:
|
|
||||||
|
|
||||||
```text
|
|
||||||
<workspace name>/
|
|
||||||
├── apps/
|
|
||||||
│ └─ <app name>/
|
|
||||||
│ ├── src/
|
|
||||||
│ │ ├── app/
|
|
||||||
│ │ ├── assets/
|
|
||||||
│ │ ├── favicon.ico
|
|
||||||
│ │ ├── index.html
|
|
||||||
│ │ ├── main.ts
|
|
||||||
│ │ └── styles.css
|
|
||||||
│ ├── project.json
|
|
||||||
│ ├── tsconfig.app.json
|
|
||||||
│ └── tsconfig.spec.json
|
|
||||||
├── libs/
|
|
||||||
│ └── <lib name>/
|
|
||||||
│ ├── src/
|
|
||||||
│ ├── ng-package.json
|
|
||||||
│ ├── package.json
|
|
||||||
│ ├── project.json
|
|
||||||
│ ├── README.md
|
|
||||||
│ ├── tsconfig.lib.json
|
|
||||||
│ ├── tsconfig.lib.prod.json
|
|
||||||
│ └── tsconfig.spec.json
|
|
||||||
├── tools/
|
|
||||||
├── .editorconfig
|
|
||||||
├── .gitignore
|
|
||||||
├── .prettierignore
|
|
||||||
├── .prettierrc
|
|
||||||
├── karma.conf.js
|
|
||||||
├── nx.json
|
|
||||||
├── package.json
|
|
||||||
├── README.md
|
|
||||||
└── tsconfig.base.json
|
|
||||||
```
|
|
||||||
|
|
||||||
Your workspace is now powered by Nx! You can verify out that your application still runs as intended:
|
|
||||||
|
|
||||||
- To serve, run `ng serve <app name>` (or `nx serve <app name>`).
|
|
||||||
- To build, run `ng build <app name>` (or `nx build <app name>`).
|
|
||||||
- To run unit tests, run `ng test <app name>` (or `nx test <app name>`).
|
|
||||||
- To see your project graph, run `nx graph`.
|
- To see your project graph, run `nx graph`.
|
||||||
|
|
||||||
> Your project graph will grow as you add, and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see the changes in-browser as you add them.
|
> Your project graph will grow as you add and use more applications and libraries.
|
||||||
|
|
||||||
Learn more about the advantages of Nx in the following guides:
|
Learn more about the advantages of Nx in the following guides:
|
||||||
|
|
||||||
@ -126,224 +36,6 @@ Learn more about the advantages of Nx in the following guides:
|
|||||||
- [Computation Caching](/concepts/how-caching-works)
|
- [Computation Caching](/concepts/how-caching-works)
|
||||||
- [Rebuilding and Retesting What is Affected](/concepts/affected)
|
- [Rebuilding and Retesting What is Affected](/concepts/affected)
|
||||||
|
|
||||||
## Migrating multiple Angular CLI workspaces into an Nx Monorepo
|
|
||||||
|
|
||||||
Migrating multiple Angular CLI workspaces into a single Nx monorepo involves some more manual steps and decisions to take.
|
|
||||||
|
|
||||||
- can we first align all apps to the same Angular version (e.g. using Angular CLI migrations)
|
|
||||||
- convert each of the apps into an easy to copy "Nx shape" (with `project.json` etc) using some of the before mentioned migration scripts
|
|
||||||
- copy everything into a new Nx workspace
|
|
||||||
|
|
||||||
Very often however we might also need to do it incrementally, such as
|
|
||||||
|
|
||||||
- migrating all apps into a monorepo
|
|
||||||
- keep them at different Angular & external dependency versions until everything is migrated
|
|
||||||
- migrate them one by one incrementally and over time
|
|
||||||
|
|
||||||
The following video tutorial walks you through such a scenario.
|
|
||||||
|
|
||||||
{% youtube
|
|
||||||
src="https://www.youtube.com/embed/M5NwkRNrpK0"
|
|
||||||
title="Nx Tutorial: Migrate Multiple Angular CLI apps into a Single Nx Monorepo"
|
|
||||||
width="100%" /%}
|
|
||||||
|
|
||||||
## Migrating an Angular app manually
|
|
||||||
|
|
||||||
{% callout type="note" title="Older Angular Versions" %}
|
|
||||||
If you are using older versions of Angular (version 13 or lower), make sure to use the appropriate version of Nx that matches your version of Angular. See the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) to find the correct version. The generated files will also be slightly different.
|
|
||||||
{% /callout %}
|
|
||||||
|
|
||||||
If you are unable to automatically transform your Angular CLI workspace to an Nx workspace using the [ng add](#transforming-an-angular-cli-workspace-to-an-nx-workspace) method, there are some manual steps you can take to move your project(s) into an Nx workspace.
|
|
||||||
|
|
||||||
### Generating a new workspace
|
|
||||||
|
|
||||||
To start, run the command to generate an Nx workspace with an Angular application.
|
|
||||||
|
|
||||||
**Using `npx`**
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npx create-nx-workspace myorg --preset=angular-standalone
|
|
||||||
```
|
|
||||||
|
|
||||||
**Using `npm init`**
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm init nx-workspace myorg --preset=angular-standalone
|
|
||||||
```
|
|
||||||
|
|
||||||
**Using `yarn create`**
|
|
||||||
|
|
||||||
```shell
|
|
||||||
yarn create nx-workspace myorg --preset=angular-standalone
|
|
||||||
```
|
|
||||||
|
|
||||||
When prompted for the `application name`, enter the _project name_ from your current `angular.json` file.
|
|
||||||
|
|
||||||
A new Nx workspace with your `org name` as the folder name, and your `application name` as the root-level application is generated.
|
|
||||||
|
|
||||||
```text
|
|
||||||
<workspace name>/
|
|
||||||
├── e2e/
|
|
||||||
│ ├── src/
|
|
||||||
│ ├── .eslintrc.json
|
|
||||||
│ ├── cypress.config.ts
|
|
||||||
│ ├── project.json
|
|
||||||
│ └── tsconfig.json
|
|
||||||
├── src/
|
|
||||||
│ ├── app/
|
|
||||||
│ ├── assets/
|
|
||||||
│ ├── favicon.ico
|
|
||||||
│ ├── index.html
|
|
||||||
│ ├── main.ts
|
|
||||||
│ ├── styles.css
|
|
||||||
│ └── test-setup.ts
|
|
||||||
├── .eslintrc.json
|
|
||||||
├── .eslintrc.base.json
|
|
||||||
├── .gitignore
|
|
||||||
├── .prettierignore
|
|
||||||
├── .prettierrc
|
|
||||||
├── jest.config.app.ts
|
|
||||||
├── jest.config.ts
|
|
||||||
├── jest.preset.js
|
|
||||||
├── nx.json
|
|
||||||
├── package.json
|
|
||||||
├── project.json
|
|
||||||
├── README.md
|
|
||||||
├── tsconfig.app.json
|
|
||||||
├── tsconfig.base.json
|
|
||||||
├── tsconfig.editor.json
|
|
||||||
├── tsconfig.json
|
|
||||||
└── tsconfig.spec.json
|
|
||||||
```
|
|
||||||
|
|
||||||
### Review Angular installed packages versions
|
|
||||||
|
|
||||||
Creating an Nx workspace with the latest version will install the Angular packages on their latest versions. If you're using a [lower version that's supported by the latest Nx](/packages/angular/documents/angular-nx-version-matrix), make sure to adjust the newly generated `package.json` file with your versions.
|
|
||||||
|
|
||||||
### Copying over application files
|
|
||||||
|
|
||||||
Your application code is self-contained within the `src` folder of your Angular CLI workspace.
|
|
||||||
|
|
||||||
- Copy the `src` folder from your Angular CLI project to the `apps/<app name>` folder, overwriting the existing `src` folder.
|
|
||||||
- Copy any project-specific configuration files, such as `browserslist`, or service worker configuration files into their relative path under `src` in the root of the repo.
|
|
||||||
- Transfer the `assets`, `scripts`, `styles`, and build-specific configuration, such as service worker configuration, from your Angular CLI `angular.json` to the root-level `project.json` file.
|
|
||||||
|
|
||||||
Verify your application runs correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng serve <app name>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Updating your unit testing configuration
|
|
||||||
|
|
||||||
Nx uses Jest by default. If you have any custom Jest configuration, you need to update the workspace Jest configuration also.
|
|
||||||
|
|
||||||
Verify your tests run correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng test <app name>
|
|
||||||
```
|
|
||||||
|
|
||||||
If you are using `Karma` for unit testing:
|
|
||||||
|
|
||||||
- Copy the `karma.conf.js` file to the root folder.
|
|
||||||
- Copy the `test.ts` file to your `src` folder.
|
|
||||||
- Copy the `test` target in your `architect` configuration from your Angular CLI `angular.json` file into the `targets` configuration in the `project.json` file in your Nx workspace.
|
|
||||||
- Run `nx format` to change `architect` to `targets` and `builder` to `executor`.
|
|
||||||
|
|
||||||
> Jest will be used by default when generating new applications. If you want to continue using `Karma`, set the `unitTestRunner` to `karma` in the `generators` section of the `nx.json` file.
|
|
||||||
|
|
||||||
- Update `test-setup.ts` to `test.ts` in the `files` array of the `tsconfig.spec.json` file.
|
|
||||||
|
|
||||||
```json {% fileName="tsconfig.spec.json" %}
|
|
||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../../dist/out-tsc",
|
|
||||||
"types": ["jasmine", "node"]
|
|
||||||
},
|
|
||||||
"files": ["src/test.ts", "src/polyfills.ts"],
|
|
||||||
"include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Verify your tests run correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng test <app name>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Updating your E2E testing configuration
|
|
||||||
|
|
||||||
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng e2e <app name>-e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
If you are using `Protractor` for E2E testing:
|
|
||||||
|
|
||||||
- Delete the `e2e` folder that was generated to use Cypress.
|
|
||||||
- Copy the `e2e` folder from your Angular CLI workspace into the root folder.
|
|
||||||
- Create the project configuration file at `e2e/project.json`.
|
|
||||||
- Copy the project configuration for `e2e` from the Angular CLI workspace `angular.json` file to `e2e/project.json` and adjust the file paths to be relative to `e2e`.
|
|
||||||
- Run `nx format` to change `architect` to `targets` and `builder` to `executor`.
|
|
||||||
|
|
||||||
Create a `tsconfig.json` file under `e2e` folder:
|
|
||||||
|
|
||||||
```json {% fileName="e2e/tsconfig.json" %}
|
|
||||||
{
|
|
||||||
"extends": "../tsconfig.base.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "../dist/out-tsc"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Update the `tsconfig.app.json` to extend the root `tsconfig.json`:
|
|
||||||
|
|
||||||
```json {% fileName="tsconfig.app.json" %}
|
|
||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./dist/out-tsc",
|
|
||||||
"module": "commonjs",
|
|
||||||
"target": "es5",
|
|
||||||
"types": ["jasmine", "jasminewd2", "node"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Verify your E2E tests run correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
ng e2e e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
> Cypress will be used by default when generating new applications. If you want to continue using `Protractor`, set the `e2eTestRunner` to `protractor` in the `generators` section of the `nx.json` file.
|
|
||||||
|
|
||||||
### Updating your linting configuration
|
|
||||||
|
|
||||||
For lint rules, migrate your existing rules into the root `.eslintrc.base.json` file.
|
|
||||||
|
|
||||||
Verify your lint checks run correctly by running:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm run lint
|
|
||||||
```
|
|
||||||
|
|
||||||
OR
|
|
||||||
|
|
||||||
```shell
|
|
||||||
yarn lint
|
|
||||||
```
|
|
||||||
|
|
||||||
Learn more about the advantages of Nx in the following guides:
|
|
||||||
|
|
||||||
[Using Cypress for e2e tests](/packages/cypress) \
|
|
||||||
[Using Jest for unit tests](/packages/jest) \
|
|
||||||
[Rebuilding and Retesting What is Affected](/concepts/affected)
|
|
||||||
|
|
||||||
## From Nx Console
|
## From Nx Console
|
||||||
|
|
||||||
{% youtube
|
{% youtube
|
||||||
@ -351,9 +43,9 @@ src="https://www.youtube.com/embed/vRj9SNVYKrE"
|
|||||||
title="Nx Console Updates 17.15.0"
|
title="Nx Console Updates 17.15.0"
|
||||||
width="100%" /%}
|
width="100%" /%}
|
||||||
|
|
||||||
As of Nx Console version 17.15.0, Angular CLI users will receive a notice periodically when running commands via Nx Console, asking if they want to use Nx to make their Angular commands faster.
|
Nx Console no longer supports the Angular CLI. Angular CLI users will receive a notice, asking if they want to switch to Nx.
|
||||||
|
|
||||||
When you click this button, we’ll run the [make-angular-cli-faster script](https://github.com/nrwl/nx/tree/master/packages/make-angular-cli-faster) to decorate your Angular workspace with Nx, allowing for cached builds, and for you to share this cache with your teammates via Nx Cloud.
|
When you click this button, we’ll run the `nx init` command to set up the Nx CLI, allowing for cached builds, and for you to share this cache with your teammates via Nx Cloud.
|
||||||
|
|
||||||
The script will make the following changes:
|
The script will make the following changes:
|
||||||
|
|
||||||
@ -364,9 +56,21 @@ The script will make the following changes:
|
|||||||
|
|
||||||
By running this command and accepting Nx Cloud, Nx distributed caching is now enabled.
|
By running this command and accepting Nx Cloud, Nx distributed caching is now enabled.
|
||||||
|
|
||||||
Once the script has run, commit the changes. Reverting these changes will effectively undo the changes made.
|
Once the script has run, commit the changes. Reverting this commit will effectively undo the changes made.
|
||||||
|
|
||||||
If you're not ready to make the change yet, you can come back to this later:
|
If you're not ready to make the change yet, you can come back to this later:
|
||||||
|
|
||||||
- If you're using Nx Console: open the Vs Code command palette and start typing "make angular faster".
|
- If you're using Nx Console: open the Vs Code command palette and start typing "Convert Angular CLI to Nx Workspace".
|
||||||
- Regardless of using Nx Console (or your IDE): run `npx make-angular-cli-faster` from the root of your project.
|
- Regardless of using Nx Console (or your IDE): run `npx nx init` from the root of your project.
|
||||||
|
|
||||||
|
{% cards %}
|
||||||
|
|
||||||
|
{% card title="Nx and the Angular CLI" description="Differences between Nx and the Angular CLI" type="documentation" url="/more-concepts/nx-and-angular" /%}
|
||||||
|
|
||||||
|
{% card title="Angular CLI to Integrated Nx Workspace" description="Change the folder structure to use an integrated style" type="documentation" url="/recipes/adopting-nx-angular/angular-integrated" /%}
|
||||||
|
|
||||||
|
{% card title="Angular CLI manual migration" description="Add Nx by hand" type="documentation" url="/recipes/adopting-nx-angular/angular-manual" /%}
|
||||||
|
|
||||||
|
{% card title="Multiple Angular Repositories to one Nx Workspace" description="Combine multiple Angular CLI workspaces into one Nx workspace" type="documentation" url="/recipes/adopting-nx-angular/angular-multiple" /%}
|
||||||
|
|
||||||
|
{% /cards %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user