diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 23a1d0f6bf..7021e66086 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1546,14 +1546,6 @@ "isExternal": false, "children": [], "disableCollapsible": false - }, - { - "name": "Migrating Angular Application manually", - "path": "/recipes/angular/migration/angular-manual", - "id": "angular-manual", - "isExternal": false, - "children": [], - "disableCollapsible": false } ], "disableCollapsible": false @@ -2769,14 +2761,6 @@ "isExternal": false, "children": [], "disableCollapsible": false - }, - { - "name": "Migrating Angular Application manually", - "path": "/recipes/angular/migration/angular-manual", - "id": "angular-manual", - "isExternal": false, - "children": [], - "disableCollapsible": false } ], "disableCollapsible": false @@ -2845,14 +2829,6 @@ "isExternal": false, "children": [], "disableCollapsible": false - }, - { - "name": "Migrating Angular Application manually", - "path": "/recipes/angular/migration/angular-manual", - "id": "angular-manual", - "isExternal": false, - "children": [], - "disableCollapsible": false } ], "disableCollapsible": false @@ -2873,14 +2849,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Migrating Angular Application manually", - "path": "/recipes/angular/migration/angular-manual", - "id": "angular-manual", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Use Environment Variables in Angular", "path": "/recipes/angular/use-environment-variables-in-angular", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 0425fa1121..736ecb198b 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2113,17 +2113,6 @@ "isExternal": false, "path": "/recipes/angular/migration/angular-multiple", "tags": [] - }, - { - "id": "angular-manual", - "name": "Migrating Angular Application manually", - "description": "", - "mediaImage": "", - "file": "shared/migration/angular-manual", - "itemList": [], - "isExternal": false, - "path": "/recipes/angular/migration/angular-manual", - "tags": [] } ], "isExternal": false, @@ -3788,17 +3777,6 @@ "isExternal": false, "path": "/recipes/angular/migration/angular-multiple", "tags": [] - }, - { - "id": "angular-manual", - "name": "Migrating Angular Application manually", - "description": "", - "mediaImage": "", - "file": "shared/migration/angular-manual", - "itemList": [], - "isExternal": false, - "path": "/recipes/angular/migration/angular-manual", - "tags": [] } ], "isExternal": false, @@ -3893,17 +3871,6 @@ "isExternal": false, "path": "/recipes/angular/migration/angular-multiple", "tags": [] - }, - { - "id": "angular-manual", - "name": "Migrating Angular Application manually", - "description": "", - "mediaImage": "", - "file": "shared/migration/angular-manual", - "itemList": [], - "isExternal": false, - "path": "/recipes/angular/migration/angular-manual", - "tags": [] } ], "isExternal": false, @@ -3932,17 +3899,6 @@ "path": "/recipes/angular/migration/angular-multiple", "tags": [] }, - "/recipes/angular/migration/angular-manual": { - "id": "angular-manual", - "name": "Migrating Angular Application manually", - "description": "", - "mediaImage": "", - "file": "shared/migration/angular-manual", - "itemList": [], - "isExternal": false, - "path": "/recipes/angular/migration/angular-manual", - "tags": [] - }, "/recipes/angular/use-environment-variables-in-angular": { "id": "use-environment-variables-in-angular", "name": "Use Environment Variables in Angular", diff --git a/docs/map.json b/docs/map.json index a49c617ac2..77a41c87b6 100644 --- a/docs/map.json +++ b/docs/map.json @@ -578,11 +578,6 @@ "name": "Migrating From Multiple Angular CLI Repos", "id": "angular-multiple", "file": "shared/migration/angular-multiple" - }, - { - "name": "Migrating Angular Application manually", - "id": "angular-manual", - "file": "shared/migration/angular-manual" } ] }, diff --git a/docs/shared/guides/nx-and-angular-cli.md b/docs/shared/guides/nx-and-angular-cli.md index 1b09d3cf4e..69489106f5 100644 --- a/docs/shared/guides/nx-and-angular-cli.md +++ b/docs/shared/guides/nx-and-angular-cli.md @@ -391,10 +391,7 @@ npx nx@latest init or alternatively using the `--integrated` flag if you want to create an Nx monorepo right away. Learn more about all the details on the [dedicated docs page](/recipes/angular/migration/angular). -There are also guides describing how to: - -- [manually migrate an Angular CLI app](/recipes/angular/migration/angular-manual) and -- how to [consolidate multiple Angular CLI projects into a single Nx monorepo](/recipes/angular/migration/angular-multiple) +There is also a guide describing how to [consolidate multiple Angular CLI projects into a single Nx monorepo](/recipes/angular/migration/angular-multiple). You can learn more about Angular & Nx by following our dedicated tutorials: diff --git a/docs/shared/migration/angular-manual.md b/docs/shared/migration/angular-manual.md deleted file mode 100644 index c08df9e59e..0000000000 --- a/docs/shared/migration/angular-manual.md +++ /dev/null @@ -1,196 +0,0 @@ -# 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](/nx-api/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](/recipes/angular/migration/angular), 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 -/ -├── 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](/nx-api/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/` 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 -``` - -### 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 -``` - -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 -``` - -### Updating your E2E testing configuration - -Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running: - -```shell -ng e2e -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](/nx-api/cypress) \ -[Using Jest for unit tests](/nx-api/jest) \ -[Rebuilding and Retesting What is Affected](/ci/features/affected) diff --git a/docs/shared/migration/migration-angular.md b/docs/shared/migration/migration-angular.md index 90ba1b5f79..de974bb953 100644 --- a/docs/shared/migration/migration-angular.md +++ b/docs/shared/migration/migration-angular.md @@ -77,9 +77,7 @@ After the changes are applied, your workspace file structure should look similar ### 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/angular/migration/angular-manual). - -Currently, the automated migration supports workspaces using the following executors (builders): +The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. It supports workspaces using the following executors (builders): - `@angular-devkit/build-angular:application` - `@angular-devkit/build-angular:browser` @@ -136,8 +134,6 @@ Once the script has run, commit the changes. Reverting this commit will effectiv {% card title="Nx and the Angular CLI" description="Differences between Nx and the Angular CLI" type="documentation" url="/concepts/more-concepts/nx-and-angular" /%} -{% card title="Angular CLI manual migration" description="Add Nx by hand" type="documentation" url="/recipes/angular/migration/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/angular/migration/angular-multiple" /%} {% /cards %} diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index e5f2e8a8cb..f2fb30df66 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -90,7 +90,6 @@ - [Migration](/recipes/angular/migration) - [Migrating from Angular CLI](/recipes/angular/migration/angular) - [Migrating From Multiple Angular CLI Repos](/recipes/angular/migration/angular-multiple) - - [Migrating Angular Application manually](/recipes/angular/migration/angular-manual) - [Use Environment Variables in Angular](/recipes/angular/use-environment-variables-in-angular) - [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects) - [Setup Module Federation with SSR for Angular](/recipes/angular/module-federation-with-ssr) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 71cccef9ed..cc8eb2c365 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -891,7 +891,9 @@ const latestRecipesRefactoring = { '/recipes/adopting-nx-angular/angular-integrated': '/recipes/angular/migration/angular', '/recipes/adopting-nx-angular/angular-manual': - '/recipes/angular/migration/angular-manual', + '/recipes/angular/migration/angular', + '/recipes/angular/migration/angular-manual': + '/recipes/angular/migration/angular', '/recipes/adopting-nx-angular/angular-multiple': '/recipes/angular/migration/angular-multiple', '/recipes/adopting-nx/migration-angularjs':