CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nx--angular

Comprehensive Angular plugin for Nx workspaces providing executors, generators, and utilities for managing Angular applications and libraries.

90

1.09x
Overview
Eval results
Files

utilities.mddocs/

Utilities

Utility functions in @nx/angular provide helper functionality for manipulating Angular code structures, adding imports, providers, and routes programmatically.

Capabilities

AST Manipulation Utilities

Module Import Functions

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"
);

Provider Management Functions

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()"
);

Standalone Detection

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';

Routing Utilities

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
);

Generator Utilities

Helper functions specifically designed for use within generators.

Module Finding and Manipulation

/**
 * 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"
  );
}

Tailwind Utilities

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
};

Component Testing Utilities

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 Generator Utilities

Advanced utility functions available through @nx/angular/src/generators/utils for complex Angular module manipulation tasks.

Module Discovery Functions

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;
}

NgModule AST Manipulation

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");

Types

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

docs

executors.md

generators.md

index.md

migrations.md

module-federation.md

testing.md

utilities.md

tile.json