diff --git a/docs/generated/packages/angular/generators/application.json b/docs/generated/packages/angular/generators/application.json index 0f786b6610..e7e990831b 100644 --- a/docs/generated/packages/angular/generators/application.json +++ b/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"], diff --git a/docs/generated/packages/angular/generators/component.json b/docs/generated/packages/angular/generators/component.json index f2b737df15..5f492d1644 100644 --- a/docs/generated/packages/angular/generators/component.json +++ b/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"], diff --git a/docs/generated/packages/angular/generators/library.json b/docs/generated/packages/angular/generators/library.json index f7fe88c1e2..34f49bc2a2 100644 --- a/docs/generated/packages/angular/generators/library.json +++ b/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"], diff --git a/docs/shared/angular-standalone-tutorial/2-project-graph.md b/docs/shared/angular-standalone-tutorial/2-project-graph.md index bb8c63d3f0..1837ae5d39 100644 --- a/docs/shared/angular-standalone-tutorial/2-project-graph.md +++ b/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'], }) diff --git a/docs/shared/guides/module-federation/dynamic-mfe-angular.md b/docs/shared/guides/module-federation/dynamic-mfe-angular.md index 87e8f3986f..b4a997ef89 100644 --- a/docs/shared/guides/module-federation/dynamic-mfe-angular.md +++ b/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. diff --git a/docs/shared/recipes/module-federation/creating-a-host.md b/docs/shared/recipes/module-federation/creating-a-host.md index 2a20b93c43..99b04faee0 100644 --- a/docs/shared/recipes/module-federation/creating-a-host.md +++ b/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 diff --git a/docs/shared/recipes/module-federation/creating-a-remote.md b/docs/shared/recipes/module-federation/creating-a-remote.md index 37246a90ed..b17fa59805 100644 --- a/docs/shared/recipes/module-federation/creating-a-remote.md +++ b/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 diff --git a/docs/shared/recipes/storybook/plugin-angular.md b/docs/shared/recipes/storybook/plugin-angular.md index db3e38353c..86cee12a2a 100644 --- a/docs/shared/recipes/storybook/plugin-angular.md +++ b/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'], }) diff --git a/packages/angular/docs/application-examples.md b/packages/angular/docs/application-examples.md index 45f621902c..a32039a42b 100644 --- a/packages/angular/docs/application-examples.md +++ b/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). diff --git a/packages/angular/docs/component-examples.md b/packages/angular/docs/component-examples.md index 775d688882..d5dde6aa8d 100644 --- a/packages/angular/docs/component-examples.md +++ b/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: diff --git a/packages/angular/docs/downgrade-module-examples.md b/packages/angular/docs/downgrade-module-examples.md deleted file mode 100644 index 5d304e576d..0000000000 --- a/packages/angular/docs/downgrade-module-examples.md +++ /dev/null @@ -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 %} diff --git a/packages/angular/docs/karma-project-examples.md b/packages/angular/docs/karma-project-examples.md deleted file mode 100644 index 8396363fc0..0000000000 --- a/packages/angular/docs/karma-project-examples.md +++ /dev/null @@ -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 %} diff --git a/packages/angular/docs/library-examples.md b/packages/angular/docs/library-examples.md index fe75d44e60..9c93b0cbd2 100644 --- a/packages/angular/docs/library-examples.md +++ b/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 %} diff --git a/packages/angular/docs/upgrade-module-examples.md b/packages/angular/docs/upgrade-module-examples.md deleted file mode 100644 index 1887cae639..0000000000 --- a/packages/angular/docs/upgrade-module-examples.md +++ /dev/null @@ -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 %}