docs(angular): refresh the tutorial

nrwl · Nov 24, 2022 · 7ce7633 · 7ce7633 · vercel · Nov 24, 2022
1 parent 16fd437
commit 7ce7633
Show file tree

Hide file tree

Showing 32 changed files with 776 additions and 1,189 deletions.
diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json
@@ -11,7 +11,7 @@
       "id": "overview",
       "path": "/packages/angular",
       "file": "shared/angular-plugin",
-      "content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n  - Micro Frontends\n  - Libraries, both internal to your codebase and publishable to npm\n  - Upgrading AngularJS applications\n  - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```shell\nyarn add -D @nrwl/angular\n```\n\n```shell\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```shell\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```shell\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```shell\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```shell\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
+      "content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n  - Micro Frontends\n  - Libraries, both internal to your codebase and publishable to npm\n  - Upgrading AngularJS applications\n  - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```shell\nyarn add -D @nrwl/angular\n```\n\n```shell\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```shell\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```shell\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```shell\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```shell\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
     },
     {
       "name": "Angular and Nx Version Matrix",

diff --git a/docs/map.json b/docs/map.json
@@ -36,7 +36,7 @@
             {
               "name": "Angular Tutorial",
               "id": "angular-tutorial",
-              "file": "shared/angular-tutorial/01-create-application"
+              "file": "shared/angular-tutorial/1-code-generation"
             },
             {
               "name": "Node Tutorial",
@@ -120,64 +120,29 @@
           "description": "Learn to use Nx with this Angular tutorial where you will learn about all its main feature with a real project.",
           "itemList": [
             {
-              "name": "1 - Create Application",
-              "id": "01-create-application",
-              "file": "shared/angular-tutorial/01-create-application"
-            },
-            {
-              "name": "2 - Add E2E Test",
-              "id": "02-add-e2e-test",
-              "file": "shared/angular-tutorial/02-add-e2e-test"
-            },
-            {
-              "name": "3 - Display Todos",
-              "id": "03-display-todos",
-              "file": "shared/angular-tutorial/03-display-todos"
-            },
-            {
-              "name": "4 - Connect to API",
-              "id": "04-connect-to-api",
-              "file": "shared/angular-tutorial/04-connect-to-api"
-            },
-            {
-              "name": "5 - Add Node Application",
-              "id": "05-add-node-app",
-              "file": "shared/angular-tutorial/05-add-node-app"
-            },
-            {
-              "name": "6 - Proxy Configuration",
-              "id": "06-proxy",
-              "file": "shared/angular-tutorial/06-proxy"
-            },
-            {
-              "name": "7 - Share Code",
-              "id": "07-share-code",
-              "file": "shared/angular-tutorial/07-share-code"
-            },
-            {
-              "name": "8 - Create Libraries",
-              "id": "08-create-libs",
-              "file": "shared/angular-tutorial/08-create-libs"
+              "name": "1 - Code Generation",
+              "id": "1-code-generation",
+              "file": "shared/angular-tutorial/1-code-generation"
             },
             {
-              "name": "9 - Project Graph",
-              "id": "09-dep-graph",
-              "file": "shared/angular-tutorial/09-dep-graph"
+              "name": "2 - Project Graph",
+              "id": "2-project-graph",
+              "file": "shared/angular-tutorial/2-project-graph"
             },
             {
-              "name": "10 - Use Computation Caching",
-              "id": "10-computation-caching",
-              "file": "shared/angular-tutorial/10-computation-caching"
+              "name": "3 - Task Running",
+              "id": "3-task-running",
+              "file": "shared/angular-tutorial/3-task-running"
             },
             {
-              "name": "11 - Test Affected Projects",
-              "id": "11-test-affected-projects",
-              "file": "shared/angular-tutorial/11-test-affected-projects"
+              "name": "4 - Workspace Optimization",
+              "id": "4-workspace-optimization",
+              "file": "shared/angular-tutorial/4-workspace-optimization"
             },
             {
-              "name": "12 - Summary",
-              "id": "12-summary",
-              "file": "shared/angular-tutorial/12-summary"
+              "name": "5 - Summary",
+              "id": "5-summary",
+              "file": "shared/angular-tutorial/5-summary"
             }
           ]
         },

diff --git a/docs/shared/angular-plugin.md b/docs/shared/angular-plugin.md
@@ -79,7 +79,7 @@ Read more about:
 
 ## More Documentation
 
-- [Angular Nx Tutorial](/angular-tutorial/01-create-application)
+- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)
 - [Migrating from the Angular CLI](recipe/migration-angular)
 - [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)
 - [Using NgRx](/recipes/other/misc-ngrx)

diff --git a/docs/shared/angular-tutorial/01-create-application.md b/docs/shared/angular-tutorial/01-create-application.md
diff --git a/docs/shared/angular-tutorial/02-add-e2e-test.md b/docs/shared/angular-tutorial/02-add-e2e-test.md