Skip to content

Commit ec8be2d

Browse files
authored
docs(misc): remove outdated Angular multiple-workspace migration page (#34913)
## Current Behavior The "Migrating Multiple Angular CLI Workspaces" page is a 26-line stub with only a YouTube video. It doesn't mention `nx import` and contains outdated guidance. The single-workspace migration guide (`angular.mdoc`) also has outdated sections: a list of supported builders, a full CI setup walkthrough, an irrelevant "From Nx Console" section, and a reference to `karma.conf.js`. ## Expected Behavior - The `angular-multiple.mdoc` page is removed with a redirect to the main Angular migration guide. - The main migration guide mentions `nx import` for consolidating multiple Angular CLI projects. - Outdated sections (Modified folder structure, Set up CI, From Nx Console) are removed and replaced with concise links. - The `nx-and-angular.mdoc` guide links to `nx import` docs instead of the deleted page. Preview: https://deploy-preview-34913--nx-docs.netlify.app/docs/technologies/angular/migration/angular-multiple (redirects to the updated page) ## Related Issue(s) Closes DOC-419
1 parent 7054ffa commit ec8be2d

File tree

4 files changed

+11
-167
lines changed

4 files changed

+11
-167
lines changed

astro-docs/netlify.toml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ to = "/docs/extending-nx/create-preset"
4949
from = "/docs/guides/adopting-nx/adding-to-monorepos"
5050
to = "/docs/guides/adopting-nx/adding-to-monorepo"
5151

52+
# Angular multiple workspace migration page removed (DOC-419)
53+
[[redirects]]
54+
from = "/docs/technologies/angular/migration/angular-multiple"
55+
to = "/docs/technologies/angular/migration/angular"
56+
5257
# Rewrite for base path handling (keeps URL the same)
5358
[[redirects]]
5459
from = "/docs/*"

astro-docs/src/content/docs/technologies/angular/Guides/nx-and-angular.mdoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ npx nx@latest init
412412

413413
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](/docs/technologies/angular/migration/angular).
414414

415-
There is also a guide describing how to [consolidate multiple Angular CLI projects into a single Nx monorepo](/docs/technologies/angular/migration/angular-multiple).
415+
You can also use [`nx import`](/docs/guides/adopting-nx/import-project) to bring multiple Angular CLI projects into a single Nx monorepo while preserving git history.
416416

417417
You can learn more about Angular & Nx by following our dedicated tutorials:
418418

astro-docs/src/content/docs/technologies/angular/Migration/angular-multiple.mdoc

Lines changed: 0 additions & 26 deletions
This file was deleted.

astro-docs/src/content/docs/technologies/angular/Migration/angular.mdoc

Lines changed: 5 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ The command applies the following changes to your workspace:
4343
- Updates your `package.json` scripts to use `nx` instead of `ng`.
4444
- Splits your `angular.json` into `project.json` files for each project with updated paths.
4545

46+
### Importing additional Angular CLI projects
47+
48+
If you have multiple Angular CLI workspaces that you want to consolidate into a single Nx monorepo, you can use [`nx import`](/docs/guides/adopting-nx/import-project) to bring additional projects into an existing Nx workspace while preserving their git history.
49+
4650
After the changes are applied, your workspace file structure should look similar to the one below:
4751

4852
{% filetree %}
@@ -75,36 +79,13 @@ After the changes are applied, your workspace file structure should look similar
7579
- .gitignore
7680
- .prettierignore
7781
- .prettierrc
78-
- karma.conf.js
7982
- nx.json
8083
- package.json
8184
- README.md
8285
- tsconfig.base.json
8386

8487
{% /filetree %}
8588

86-
### Modified folder structure
87-
88-
The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. It supports workspaces using the following executors (builders):
89-
90-
- `@angular-devkit/build-angular:application`
91-
- `@angular-devkit/build-angular:browser`
92-
- `@angular-devkit/build-angular:browser-esbuild`
93-
- `@angular-devkit/build-angular:dev-server`
94-
- `@angular-devkit/build-angular:extract-i18n`
95-
- `@angular-devkit/build-angular:karma`
96-
- `@angular-devkit/build-angular:ng-packagr`
97-
- `@angular-devkit/build-angular:prerender`
98-
- `@angular-devkit/build-angular:protractor`
99-
- `@angular-devkit/build-angular:server`
100-
- `@angular-devkit/build-angular:ssr-dev-server`
101-
- `@angular-eslint/builder:lint`
102-
- `@cypress/schematic:cypress`
103-
- `@nguniversal/builders:prerender`
104-
- `@nguniversal/builders:ssr-dev-server`
105-
106-
Support for other executors may be added in the future.
107-
10889
## After migration
10990

11091
Your workspace is now powered by Nx! You can verify that your application still runs as intended:
@@ -116,106 +97,7 @@ Your workspace is now powered by Nx! You can verify that your application still
11697

11798
> 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.
11899

119-
## Set up CI for your Angular workspace
120-
121-
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
122-
123-
- Nx reduces wasted time in CI with the [`affected` command](/docs/features/ci-features/affected).
124-
- Nx Replay's [remote caching](/docs/features/ci-features/remote-cache) will reuse task artifacts from different CI executions making sure you will never run the same computation twice.
125-
- Nx Agents [efficiently distribute tasks across machines](/docs/concepts/ci-concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
126-
- Nx Atomizer [automatically splits](/docs/features/ci-features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/docs/features/ci-features/flaky-tasks).
127-
128-
### Connect to Nx Cloud
129-
130-
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
131-
132-
Now that we're working on the CI pipeline, it is important for your changes to be pushed to a GitHub repository.
133-
134-
1. Commit your existing changes with `git add . && git commit -am "updates"`
135-
2. [Create a new GitHub repository](https://github.com/new)
136-
3. Follow GitHub instructions to push your existing code to the repository
137-
138-
Now connect your repository to Nx Cloud with the following command:
139-
140-
```shell
141-
npx nx@latest connect
142-
```
143-
144-
A browser window will open to register your repository in your [Nx Cloud](https://cloud.nx.app) account. The link is also printed to the terminal if the windows does not open, or you closed it before finishing the steps. The app will guide you to create a PR to enable Nx Cloud on your repository.
145-
146-
![](../../../../../assets/tutorials/nx-cloud-github-connect.avif)
147-
148-
Once the PR is created, merge it into your main branch.
149-
150-
![](../../../../../assets/tutorials/github-cloud-pr-merged.avif)
151-
152-
And make sure you pull the latest changes locally:
153-
154-
```shell
155-
git pull
156-
```
157-
158-
You should now have an `nxCloudId` property specified in the `nx.json` file.
159-
160-
### Create a CI workflow
161-
162-
Use the following command to generate a CI workflow file.
163-
164-
```shell
165-
npx nx generate ci-workflow --ci=github
166-
```
167-
168-
This generator creates a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
169-
170-
The key lines in the CI pipeline are:
171-
172-
```yml {% meta="{13-17,23-26}" %}
173-
// .github/workflows/ci.yml
174-
name: CI
175-
# ...
176-
jobs:
177-
main:
178-
runs-on: ubuntu-latest
179-
steps:
180-
- uses: actions/checkout@v4
181-
with:
182-
fetch-depth: 0
183-
filter: tree:0
184-
185-
# This enables task distribution via Nx Cloud
186-
# Run this command as early as possible, before dependencies are installed
187-
# Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
188-
# Connect your workspace by running "nx connect" and uncomment this
189-
- run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="build"
190-
- uses: actions/setup-node@v3
191-
with:
192-
node-version: 22
193-
cache: 'npm'
194-
- run: npm ci
195-
- uses: nrwl/nx-set-shas@v4
196-
# Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
197-
- run: npx nx affected -t lint test build
198-
```
199-
200-
### Open a pull request
201-
202-
Commit the changes and open a new PR on GitHub.
203-
204-
```shell
205-
git add .
206-
git commit -m 'add CI workflow file'
207-
git push origin add-workflow
208-
```
209-
210-
When you view the PR on GitHub, you will see a comment from Nx Cloud that reports on the status of the CI run.
211-
212-
![Nx Cloud report](../../../../../assets/tutorials/github-pr-cloud-report.avif)
213-
214-
The `See all runs` link goes to a page with the progress and results of tasks that were run in the CI pipeline.
215-
216-
![Run details](../../../../../assets/tutorials/nx-cloud-run-details.avif)
217-
218-
For more information about how Nx can improve your CI pipeline, [check out our details CI guides](/docs/guides/nx-cloud/setup-ci).
100+
For guidance on setting up CI, see the [CI setup guide](/docs/guides/nx-cloud/setup-ci).
219101

220102
## Learn more
221103

@@ -228,21 +110,4 @@ Learn more about the advantages of Nx in the following guides:
228110
- [Integrate with Editors](/docs/getting-started/editor-setup)
229111
- [Advanced Angular Micro Frontends with Dynamic Module Federation](/docs/technologies/angular/guides/dynamic-module-federation-with-angular)
230112

231-
## From Nx Console
232-
233-
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 `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.
234-
235-
If you're not ready to make the change yet, you can come back to this later:
236-
237-
- If you're using Nx Console: open the Vs Code command palette and start typing "Convert Angular CLI to Nx Workspace".
238-
- Regardless of using Nx Console (or your IDE): run `npx nx@latest init` from the root of your project.
239-
240-
Once the script has run, commit the changes. Reverting this commit will effectively undo the changes made.
241-
242-
{% cardgrid %}
243-
244113
{% linkcard title="Nx and the Angular CLI" description="Differences between Nx and the Angular CLI" href="/docs/technologies/angular/guides/nx-and-angular" /%}
245-
246-
{% linkcard title="Multiple Angular Repositories to one Nx Workspace" description="Combine multiple Angular CLI workspaces into one Nx workspace" href="/docs/technologies/angular/migration/angular-multiple" /%}
247-
248-
{% /cardgrid %}

0 commit comments

Comments
 (0)