Comprehensive Angular plugin for Nx workspaces providing executors, generators, and utilities for managing Angular applications and libraries.
90
Utility functions in @nx/angular provide helper functionality for manipulating Angular code structures, adding imports, providers, and routes programmatically.
Functions for adding imports to Angular modules and components.
/**
* Add import to an Angular module
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param importName - Name of the import to add
*/
function addImportToModule(
tree: Tree,
modulePath: string,
importName: string
): void;
/**
* Add import to an Angular component
* @param tree - Virtual file system tree
* @param componentPath - Path to the component file
* @param importName - Name of the import to add
*/
function addImportToComponent(
tree: Tree,
componentPath: string,
importName: string
): void;
/**
* Add import to an Angular directive
* @param tree - Virtual file system tree
* @param directivePath - Path to the directive file
* @param importName - Name of the import to add
*/
function addImportToDirective(
tree: Tree,
directivePath: string,
importName: string
): void;
/**
* Add import to an Angular pipe
* @param tree - Virtual file system tree
* @param pipePath - Path to the pipe file
* @param importName - Name of the import to add
*/
function addImportToPipe(
tree: Tree,
pipePath: string,
importName: string
): void;Usage Example:
import { addImportToModule } from "@nx/angular/src/utils";
import { Tree } from "@nx/devkit";
// Add HttpClientModule to app.module.ts
addImportToModule(
tree,
"src/app/app.module.ts",
"HttpClientModule"
);Functions for adding providers to various Angular configurations.
/**
* Add provider to bootstrapApplication call
* @param tree - Virtual file system tree
* @param filePath - Path to the main.ts file
* @param provider - Provider to add
*/
function addProviderToBootstrapApplication(
tree: Tree,
filePath: string,
provider: string
): void;
/**
* Add provider to application configuration
* @param tree - Virtual file system tree
* @param filePath - Path to the app.config.ts file
* @param provider - Provider to add
*/
function addProviderToAppConfig(
tree: Tree,
filePath: string,
provider: string
): void;
/**
* Add provider to Angular component
* @param tree - Virtual file system tree
* @param componentPath - Path to the component file
* @param provider - Provider to add
*/
function addProviderToComponent(
tree: Tree,
componentPath: string,
provider: string
): void;
/**
* Add provider to Angular module
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param provider - Provider to add
*/
function addProviderToModule(
tree: Tree,
modulePath: string,
provider: string
): void;
/**
* Add view provider to Angular component
* @param tree - Virtual file system tree
* @param componentPath - Path to the component file
* @param provider - View provider to add
*/
function addViewProviderToComponent(
tree: Tree,
componentPath: string,
provider: string
): void;Usage Example:
import { addProviderToBootstrapApplication } from "@nx/angular/src/utils";
// Add HttpClient provider to main.ts
addProviderToBootstrapApplication(
tree,
"src/main.ts",
"provideHttpClient()"
);Utility to check if Angular components, directives, or pipes are standalone.
/**
* Check if Component, Directive or Pipe is standalone
* @param tree - Virtual file system tree
* @param sourceFile - TypeScript source file
* @param decoratorName - Name of the decorator to check
* @returns True if the component is standalone
*/
function isStandalone(
tree: Tree,
sourceFile: ts.SourceFile,
decoratorName: DecoratorName
): boolean;
type DecoratorName = 'Component' | 'Directive' | 'Pipe';Functions for managing Angular routing configurations.
/**
* Add a new route to a routes definition
* @param tree - Virtual file system tree
* @param routesFile - Path to the routes file
* @param route - Route configuration to add
* @param lazy - Whether the route should be lazy loaded
* @param routesConst - Name of the routes constant
* @param importPath - Import path for the route component
*/
function addRoute(
tree: Tree,
routesFile: string,
route: string,
lazy?: boolean,
routesConst?: string,
importPath?: string
): void;
/**
* Add provider to route configuration
* @param tree - Virtual file system tree
* @param routesFile - Path to the routes file
* @param provider - Provider to add to route
*/
function addProviderToRoute(
tree: Tree,
routesFile: string,
provider: string
): void;Usage Example:
import { addRoute } from "@nx/angular/src/utils";
// Add a lazy-loaded route
addRoute(
tree,
"src/app/app.routes.ts",
"{ path: 'feature', loadComponent: () => import('./feature/feature.component').then(m => m.FeatureComponent) }",
true
);Helper functions specifically designed for use within generators.
/**
* Find NgModule file in directory hierarchy
* @param tree - Virtual file system tree
* @param path - Starting path to search from
* @param module - Optional specific module name to find
* @returns Path to the found module or null
*/
function findModule(
tree: Tree,
path: string,
module?: string
): string | null;
/**
* Add component/directive/pipe to NgModule
* @param tree - Virtual file system tree
* @param path - Path where the item is located
* @param modulePath - Path to the module file
* @param name - Name of the item
* @param className - Class name of the item
* @param fileName - File name of the item
* @param ngModuleProperty - NgModule property to add to
* @param isFlat - Whether the structure is flat
* @param isExported - Whether the item should be exported
*/
function addToNgModule(
tree: Tree,
path: string,
modulePath: string,
name: string,
className: string,
fileName: string,
ngModuleProperty: ngModuleDecoratorProperty,
isFlat?: boolean,
isExported?: boolean
): void;
/**
* Insert property into NgModule decorator
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param name - Name of the property to insert
* @param property - NgModule property type
*/
function insertNgModuleProperty(
tree: Tree,
modulePath: string,
name: string,
property: ngModuleDecoratorProperty
): void;
/**
* Insert import into NgModule
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param importName - Name of the import to add
*/
function insertNgModuleImport(
tree: Tree,
modulePath: string,
importName: string
): void;
type ngModuleDecoratorProperty =
| 'imports'
| 'exports'
| 'declarations'
| 'providers'
| 'bootstrap';Usage Example:
import { findModule, addToNgModule } from "@nx/angular/src/generators/utils";
// Find the nearest module and add a component to it
const modulePath = findModule(tree, "src/app/feature");
if (modulePath) {
addToNgModule(
tree,
"src/app/feature",
modulePath,
"feature-component",
"FeatureComponent",
"feature.component",
"declarations"
);
}Utility functions for Tailwind CSS integration.
/**
* Generates glob patterns for Tailwind CSS based on app dependencies
* @param dirPath - Directory path of the application
* @param fileGlobPattern - Optional file glob pattern to use
* @returns Array of glob patterns for Tailwind CSS configuration
*/
function createGlobPatternsForDependencies(
dirPath: string,
fileGlobPattern?: string
): string[];Usage Example:
import { createGlobPatternsForDependencies } from "@nx/angular/tailwind";
// Generate patterns for Tailwind CSS configuration
const patterns = createGlobPatternsForDependencies(__dirname);
// Use in tailwind.config.js
module.exports = {
content: [
...patterns,
"./src/**/*.{html,ts}"
],
// ... rest of config
};Utilities for Cypress component testing integration.
/**
* Angular Nx preset for Cypress Component Testing
* @param pathToConfig - Path to the Cypress configuration
* @param options - Optional configuration options
* @returns Cypress configuration object
*/
function nxComponentTestingPreset(
pathToConfig: string,
options?: NxComponentTestingPresetOptions
): CypressConfig;
interface NxComponentTestingPresetOptions {
buildTarget?: string;
ctViteConfig?: string;
}
interface CypressConfig {
component: {
devServer: {
framework: string;
bundler: string;
options?: any;
};
specPattern: string;
indexHtmlFile?: string;
};
}Usage Example:
import { nxComponentTestingPreset } from "@nx/angular/plugins/component-testing";
export default nxComponentTestingPreset(__filename, {
buildTarget: "my-app:build"
});Advanced utility functions available through @nx/angular/src/generators/utils for complex Angular module manipulation tasks.
Functions for locating and working with Angular modules within the file system.
/**
* Find an Angular module file in the file system tree
* @param tree - Virtual file system tree
* @param path - Starting path to search from
* @param module - Optional specific module file name
* @returns Path to the found module file
*/
function findModule(tree: Tree, path: string, module?: string): string;
/**
* Add a component, directive, or pipe to an Angular module
* @param tree - Virtual file system tree
* @param path - Path to the component/directive/pipe file
* @param moduleOptions - Configuration for adding to module
*/
function addToNgModule(
tree: Tree,
path: string,
moduleOptions: AddToModuleOptions
): void;
interface AddToModuleOptions {
module?: string;
path?: string;
name: string;
flat?: boolean;
export?: boolean;
skipImport?: boolean;
}Functions for directly manipulating NgModule decorator properties.
/**
* Insert a property into an NgModule decorator
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param name - Name of the item to add
* @param property - NgModule property to add to
*/
function insertNgModuleProperty(
tree: Tree,
modulePath: string,
name: string,
property: NgModuleDecoratorProperty
): void;
/**
* Insert an import into an NgModule decorator
* @param tree - Virtual file system tree
* @param modulePath - Path to the module file
* @param className - Name of the class to import
* @param importPath - Path to import from
*/
function insertNgModuleImport(
tree: Tree,
modulePath: string,
className: string,
importPath: string
): void;
type NgModuleDecoratorProperty = 'imports' | 'providers' | 'declarations' | 'exports';Usage Examples:
import {
findModule,
addToNgModule,
insertNgModuleProperty,
insertNgModuleImport
} from "@nx/angular/src/generators/utils";
// Find the nearest module file
const modulePath = findModule(tree, "src/app/feature", "feature.module.ts");
// Add a component to a module with export
addToNgModule(tree, "src/app/feature/my-component.ts", {
module: modulePath,
name: "MyComponent",
export: true
});
// Add a service to module providers
insertNgModuleProperty(tree, modulePath, "MyService", "providers");
// Add an import to the module
insertNgModuleImport(tree, modulePath, "CommonModule", "@angular/common");import * as ts from 'typescript';
interface Tree {
read(filePath: string): Buffer | null;
write(filePath: string, content: Buffer | string): void;
exists(filePath: string): boolean;
delete(filePath: string): void;
rename(from: string, to: string): void;
children(dirPath: string): string[];
isFile(filePath: string): boolean;
}
type DecoratorName = 'Component' | 'Directive' | 'Pipe';
type ngModuleDecoratorProperty =
| 'imports'
| 'exports'
| 'declarations'
| 'providers'
| 'bootstrap';
interface NxComponentTestingPresetOptions {
buildTarget?: string;
ctViteConfig?: string;
}Install with Tessl CLI
npx tessl i tessl/npm-nx--angularevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10