miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Colum Ferry 2023-11-09 19:04:34 +00:00 committed by GitHub
parent b9e02d152b
commit a98ccdedf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 9 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/generated/packages/angular/generators/application.json
View File

@ -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"],

2
docs/generated/packages/angular/generators/component.json
View File

@ -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"],

2
docs/generated/packages/angular/generators/library.json
View File

@ -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"],

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

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

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

@ -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.

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

@ -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

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

@ -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

1
docs/shared/recipes/storybook/plugin-angular.md
View File

@ -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'],
})

10
packages/angular/docs/application-examples.md
View File

@ -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).

10
packages/angular/docs/component-examples.md
View File

@ -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:

25
packages/angular/docs/downgrade-module-examples.md
View File

@ -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 %}

15
packages/angular/docs/karma-project-examples.md
View File

@ -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 %}

9
packages/angular/docs/library-examples.md
View File

@ -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 %}

25
packages/angular/docs/upgrade-module-examples.md
View File

@ -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 %}