docs(angular): update docs for angular v17 (#20154)

docs/generated/packages/angular/generators/application.json

@@ -184,7 +184,7 @@
     },
     "additionalProperties": false,
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:app my-app --directory=my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nx/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Components application\" %}\n\nCreate an application that is setup to use standalone components:\n\n```bash\nnx g @nx/angular:app my-app --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nx/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:app my-app --directory=my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nx/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nx/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "aliases": ["app"],

docs/generated/packages/angular/generators/component.json

@@ -132,7 +132,7 @@
       }
     },
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a standalone component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "aliases": ["c"],

docs/generated/packages/angular/generators/library.json

@@ -204,7 +204,7 @@
     },
     "additionalProperties": false,
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nx/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nx/angular:library my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nx/angular:library my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=nested`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:library --directory=libs/nested/my-lib --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone component\"%}\nCreates the `my-standalone-lib` library with a standalone component as an entry point instead of an ng-module. The component can be used via the `myorg-standalone-component` selector.\n\n```bash\nnx g @nx/angular:library --standalone --selector=myorg-standalone-component  my-standalone-lib\n```\n\n{% /tab %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nx/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nx/angular:library my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nx/angular:library my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=nested`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:library --directory=libs/nested/my-lib --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "aliases": ["lib"],

docs/shared/angular-standalone-tutorial/2-project-graph.md

@@ -122,6 +122,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'store-banner',
+  standalone: true,
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.css'],
 })

docs/shared/guides/module-federation/dynamic-mfe-angular.md

@@ -1,5 +1,9 @@
 # Advanced Angular Micro Frontends with Dynamic Module Federation
 
+{% callout type="caution" title="Caution" %}
+This guide has not been updated for Angular 17. We will be updating it shortly.
+{% /callout %}
+
 Dynamic Module Federation is a technique that allows an application to determine the location of its remote applications at runtime. It helps to achieve the use case of **“Build once, deploy everywhere”**.
 
 “Build once, deploy everywhere” is the concept of being able to create a single build artefact of your application and deploy it to multiple environments such as staging and production.

docs/shared/recipes/module-federation/creating-a-host.md

@@ -64,7 +64,6 @@ CREATE apps/angular/shell/src/app/app.component.css
 CREATE apps/angular/shell/src/app/app.component.html
 CREATE apps/angular/shell/src/app/app.component.spec.ts
 CREATE apps/angular/shell/src/app/app.component.ts
-CREATE apps/angular/shell/src/app/app.module.ts
 CREATE apps/angular/shell/src/app/app.routes.ts
 CREATE apps/angular/shell/src/app/nx-welcome.component.ts
 CREATE apps/angular/shell/src/main.ts
@@ -183,7 +182,6 @@ CREATE apps/angular/with-remotes/shell/src/app/app.component.css
 CREATE apps/angular/with-remotes/shell/src/app/app.component.html
 CREATE apps/angular/with-remotes/shell/src/app/app.component.spec.ts
 CREATE apps/angular/with-remotes/shell/src/app/app.component.ts
-CREATE apps/angular/with-remotes/shell/src/app/app.module.ts
 CREATE apps/angular/with-remotes/shell/src/app/app.routes.ts
 CREATE apps/angular/with-remotes/shell/src/app/nx-welcome.component.ts
 CREATE apps/angular/with-remotes/shell/src/main.ts
@@ -205,7 +203,6 @@ CREATE apps/angular/with-remotes/ng-remote1/tsconfig.app.json
 CREATE apps/angular/with-remotes/ng-remote1/tsconfig.editor.json
 CREATE apps/angular/with-remotes/ng-remote1/tsconfig.json
 CREATE apps/angular/with-remotes/ng-remote1/src/app/app.component.ts
-CREATE apps/angular/with-remotes/ng-remote1/src/app/app.module.ts
 CREATE apps/angular/with-remotes/ng-remote1/src/app/app.routes.ts
 CREATE apps/angular/with-remotes/ng-remote1/src/main.ts
 CREATE apps/angular/with-remotes/ng-remote1/.eslintrc.json
@@ -213,7 +210,6 @@ CREATE apps/angular/with-remotes/ng-remote1/jest.config.ts
 CREATE apps/angular/with-remotes/ng-remote1/src/test-setup.ts
 CREATE apps/angular/with-remotes/ng-remote1/tsconfig.spec.json
 CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.component.ts
-CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.module.ts
 CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.routes.ts
 CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/nx-welcome.component.ts
 CREATE apps/angular/with-remotes/ng-remote1/module-federation.config.ts
@@ -232,7 +228,6 @@ CREATE apps/angular/with-remotes/ng-remote2/tsconfig.app.json
 CREATE apps/angular/with-remotes/ng-remote2/tsconfig.editor.json
 CREATE apps/angular/with-remotes/ng-remote2/tsconfig.json
 CREATE apps/angular/with-remotes/ng-remote2/src/app/app.component.ts
-CREATE apps/angular/with-remotes/ng-remote2/src/app/app.module.ts
 CREATE apps/angular/with-remotes/ng-remote2/src/app/app.routes.ts
 CREATE apps/angular/with-remotes/ng-remote2/src/main.ts
 CREATE apps/angular/with-remotes/ng-remote2/.eslintrc.json
@@ -240,7 +235,6 @@ CREATE apps/angular/with-remotes/ng-remote2/jest.config.ts
 CREATE apps/angular/with-remotes/ng-remote2/src/test-setup.ts
 CREATE apps/angular/with-remotes/ng-remote2/tsconfig.spec.json
 CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.component.ts
-CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.module.ts
 CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.routes.ts
 CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/nx-welcome.component.ts
 CREATE apps/angular/with-remotes/ng-remote2/module-federation.config.ts

docs/shared/recipes/module-federation/creating-a-remote.md

@@ -61,7 +61,6 @@ CREATE apps/angular/myremote/tsconfig.app.json
 CREATE apps/angular/myremote/tsconfig.editor.json
 CREATE apps/angular/myremote/tsconfig.json
 CREATE apps/angular/myremote/src/app/app.component.ts
-CREATE apps/angular/myremote/src/app/app.module.ts
 CREATE apps/angular/myremote/src/app/app.routes.ts
 CREATE apps/angular/myremote/src/main.ts
 CREATE apps/angular/myremote/.eslintrc.json
@@ -69,7 +68,6 @@ CREATE apps/angular/myremote/jest.config.ts
 CREATE apps/angular/myremote/src/test-setup.ts
 CREATE apps/angular/myremote/tsconfig.spec.json
 CREATE apps/angular/myremote/src/app/remote-entry/entry.component.ts
-CREATE apps/angular/myremote/src/app/remote-entry/entry.module.ts
 CREATE apps/angular/myremote/src/app/remote-entry/entry.routes.ts
 CREATE apps/angular/myremote/src/app/remote-entry/nx-welcome.component.ts
 CREATE apps/angular/myremote/module-federation.config.ts
@@ -172,7 +170,6 @@ CREATE apps/angular/myremote/tsconfig.app.json
 CREATE apps/angular/myremote/tsconfig.editor.json
 CREATE apps/angular/myremote/tsconfig.json
 CREATE apps/angular/myremote/src/app/app.component.ts
-CREATE apps/angular/myremote/src/app/app.module.ts
 CREATE apps/angular/myremote/src/app/app.routes.ts
 CREATE apps/angular/myremote/src/main.ts
 CREATE apps/angular/myremote/.eslintrc.json
@@ -180,7 +177,6 @@ CREATE apps/angular/myremote/jest.config.ts
 CREATE apps/angular/myremote/src/test-setup.ts
 CREATE apps/angular/myremote/tsconfig.spec.json
 CREATE apps/angular/myremote/src/app/remote-entry/entry.component.ts
-CREATE apps/angular/myremote/src/app/remote-entry/entry.module.ts
 CREATE apps/angular/myremote/src/app/remote-entry/entry.routes.ts
 CREATE apps/angular/myremote/src/app/remote-entry/nx-welcome.component.ts
 CREATE apps/angular/myremote/module-federation.config.ts

docs/shared/recipes/storybook/plugin-angular.md

@@ -92,6 +92,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'feature-ui-my-button',
+  standalone: true,
   templateUrl: './my-button.component.html',
   styleUrls: ['./my-button.component.css'],
 })

packages/angular/docs/application-examples.md

@@ -35,16 +35,6 @@ nx g @nx/angular:app my-app --inlineStyle --inlineTemplate
 
 {% /tab %}
 
-{% tab label="Standalone Components application" %}
-
-Create an application that is setup to use standalone components:
-
-```bash
-nx g @nx/angular:app my-app --standalone
-```
-
-{% /tab %}
-
 {% tab label="Set custom prefix and tags" %}
 
 Set the prefix to apply to generated selectors and add tags to the application (used for linting).

packages/angular/docs/component-examples.md

@@ -11,16 +11,6 @@ nx g @nx/angular:component my-component
 
 {% /tab %}
 
-{% tab label="Standalone Component" %}
-
-Create a standalone component named `my-component`:
-
-```bash
-nx g @nx/angular:component my-component --standalone
-```
-
-{% /tab %}
-
 {% tab label="Single File Component" %}
 
 Create a component named `my-component` with inline styles and inline template:

packages/angular/docs/downgrade-module-examples.md

@@ -1,25 +0,0 @@
-## Examples
-
-Below are some examples of how to generate configuration and setup for using `ngUpgrade`'s `DowngradeModule` for your application.
-
-{% tabs %}
-
-{% tab label="Basic Usage" %}
-
-```bash
-nx g @nx/angular:downgrade-module --name=myAngularJsModule --project=myapp
-```
-
-{% /tab %}
-
-{% tab label="Setup Router" %}
-
-Allow a setup that configures routing for `DowngradeModule`.
-
-```bash
-nx g @nx/angular:downgrade-module --name=myAngularJsModule --project=myapp --router=true
-```
-
-{% /tab %}
-
-{% /tabs %}

packages/angular/docs/karma-project-examples.md

@@ -1,15 +0,0 @@
-## Examples
-
-{% tabs %}
-
-{% tab label="Basic Usage" %}
-
-To add karma to project, run the following command.
-
-```bash
-nx g @nx/angular:karma-project --project=myapp
-```
-
-{% /tab %}
-
-{% /tabs %}

packages/angular/docs/library-examples.md

@@ -43,12 +43,3 @@ nx g @nx/angular:library --directory=libs/nested/my-lib --importPath=@myorg/nest
 ```
 
 {% /tab %}
-
-{% tab label="Standalone component"%}
-Creates the `my-standalone-lib` library with a standalone component as an entry point instead of an ng-module. The component can be used via the `myorg-standalone-component` selector.
-
-```bash
-nx g @nx/angular:library --standalone --selector=myorg-standalone-component  my-standalone-lib
-```
-
-{% /tab %}

packages/angular/docs/upgrade-module-examples.md

@@ -1,25 +0,0 @@
-## Examples
-
-Below are some examples of how to generate configuration and setup for using `ngUpgrade`'s `UpgradeModule` for your application.
-
-{% tabs %}
-
-{% tab label="Basic Usage" %}
-
-```bash
-nx g @nx/angular:upgrade-module --name=myAngularJsModule --project=myapp
-```
-
-{% /tab %}
-
-{% tab label="Setup Router" %}
-
-Allow a setup that configures routing for `UpgradeModule`.
-
-```bash
-nx g @nx/angular:upgrade-module --name=myAngularJsModule --project=myapp --router=true
-```
-
-{% /tab %}
-
-{% /tabs %}