Do generate a component library for isolated components
Do keep components dumb or presentational
Do communicate through @Input and @Output
Do use OnPush change detection
Do use standalone component architecture
Do use the --flat architecture
Avoid--inlineStyle option
Avoid--inlineTemplate option
Component library generator options
Run the below command to view all library options.
nx g component --help
Components options reference:
From: @nrwl/angular (v15.8.1)
Name: component (aliases: c)
Creates a new, generic Angular component definition in the given or default project.
Options:
--name The name of the component. [string]
--export Specifies if the component should be exported in the declaring `NgModule`. Additionally, [boolean]
if the project is a library, the component will be exported from the project's entry
point (normally `index.ts`) if the module it belongs to is also exported or if the
component is standalone.
--project The name of the project. [string]
--standalone Whether the generated component is standalone. _Note: This is only supported in Angular [boolean]
versions >= 14.1.0_
--changeDetection, -c The change detection strategy to use in the new component. [string] [choices: "Default", "OnPush"] [default: "Default"]
--displayBlock, -b Specifies if the style will contain `:host { display: block; }`. [boolean]
--flat Create the new files at the top level of the current project. [boolean]
--inlineStyle, -s Include styles inline in the component.ts file. Only CSS styles can be included inline. [boolean]
By default, an external styles file is created and referenced in the component.ts file.
--inlineTemplate, -t Include template inline in the component.ts file. By default, an external template file [boolean]
is created and referenced in the component.ts file.
--module, -m The filename or path to the NgModule that will declare this component. [string]
--path The path at which to create the component file, relative to the current workspace. [string]
Default is a folder with the same name as the component in the project root.
--selector The HTML selector to use for this component. [string]
--skipImport Do not import this component into the owning NgModule. [boolean]
--skipSelector Specifies if the component should have a selector or not. [boolean]
--skipTests Do not create `spec.ts` test files for the new component. [boolean]
--style The file extension or preprocessor to use for style files, or `none` to skip generating [string] [choices: "css", "scss", "sass", "less", "none"] [default: "css"]
the style file.
--type Adds a developer-defined type to the filename, in the format `name.type.ts`. [string] [default: "component"]
--viewEncapsulation, -v The view encapsulation strategy to use in the new component. [string] [choices: "Emulated", "None", "ShadowDom"]
Generate a component library
Run the below command to generate a component library
nx g lib --name={{component-name}} --directory=libs/components --changeDetection=OnPush --flat --standalone --style=scss