Angular

Rules

ensureIsAngularWorkspace

Ensures that the workspace, where the schematic is currently running on, is actually an Angular workspace or throws an exception otherwise.

Note

The test is done by ensuring the existence of an angular.json file.

import { ensureIsAngularWorkspace, schematic, workspace } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    ensureIsAngularWorkspace(),

    // Using chainable (test is implicit)
    workspace()
      .toRule()
  ]);

ensureIsAngularApplication

Ensures that a project is actually an Angular application or throws an exception otherwise.

import { ensureIsAngularApplication, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    ensureIsAngularApplication('ProjectName'),

    // Using chainable (test is implicit)
    application(options.project)
      .toRule()
  ]);

ensureIsAngularLibrary

Ensures that a project is actually an Angular library or throws an exception otherwise.

import { ensureIsAngularLibrary, schematic, library } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    ensureIsAngularLibrary('ProjectName'),

    // Using chainable (test is implicit)
    library(options.project)
      .toRule()
  ]);

isAngularVersion

Executes a rule only if the current Angular version installed in the project satisfies a given range.

import { isAngularVersion, schematic, workspace } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    isAngularVersion('<= 11', (): Rule => {
      ...
    }),

    // Using chainable
    workspace()
      .isAngularVersion('<= 11', (): Rule => {
        ...
      })
      .toRule()
  ]);

addAngularJsonAsset

Adds a new asset to a project build and test sections of the angular.json file.

import { addAngularJsonAsset, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addAngularJsonAsset('src/manifest.webmanifest', 'ProjectName'),

    // Using chainable
    application(options.project)
      .addAngularJsonAsset('__SRC__/manifest.webmanifest', 'ProjectName')
      .toRule()
  ]);

removeAngularJsonAsset

Removes an asset from a project build and test sections of the angular.json file.

import { removeAngularJsonAsset, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeAngularJsonAsset('src/manifest.webmanifest', 'ProjectName'),

    // Using chainable
    application(options.project)
      .removeAngularJsonAsset('__SRC__/manifest.webmanifest', 'ProjectName')
      .toRule()
  ]);

addAngularJsonStyle

Adds a new style to a project build and test sections of the angular.json file.

import { addAngularJsonStyle, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addAngularJsonStyle('src/assets/my-styles.css', 'ProjectName'),

    // Using chainable
    application(options.project)
      .addAngularJsonStyle('__SRC__/assets/my-styles.css', 'ProjectName')
      .toRule()
  ]);

removeAngularJsonStyle

Removes a style from a project build and test sections of the angular.json file.

import { removeAngularJsonStyle, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeAngularJsonStyle('src/assets/my-styles.css', 'ProjectName'),

    // Using chainable
    application(options.project)
      .removeAngularJsonStyle('__SRC__/assets/my-styles.css', 'ProjectName')
      .toRule()
  ]);

addAngularJsonScript

Adds a new script to a project build and test sections of the angular.json file.

import { addAngularJsonScript, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addAngularJsonScript('src/my-script.js', 'ProjectName'),

    // Using chainable
    application(options.project)
      .addAngularJsonScript('__SRC__/my-script.js', 'ProjectName')
      .toRule()
  ]);

removeAngularJsonScript

Removes a script from a project build and test sections of the angular.json file.

import { removeAngularJsonScript, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeAngularJsonScript('src/my-script.js', 'ProjectName'),

    // Using chainable
    application(options.project)
      .removeAngularJsonScript('__SRC__/my-script.js', 'ProjectName')
      .toRule()
  ]);

addDeclarationToNgModule

Inserts a declaration (ex. Component, Pipe, Directive) into an NgModule declarations and also imports that declaration.

import { addDeclarationToNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addDeclarationToNgModule('src/app/app.module.ts', 'TestComponent', './components/test'),

    // Using chainable
    application(options.project)
      .addDeclarationToNgModule('__SRC__/app/app.module.ts', 'TestComponent', './components/test')
      .toRule()
  ]);

removeDeclarationFromNgModule

Removes a declaration (ex. Component, Pipe, Directive) from an NgModule declarations.

Tip

Use #removeImportFromFile to also remove the import.

import { removeDeclarationFromNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeDeclarationFromNgModule('src/app/app.module.ts', 'AppComponent'),

    // Using chainable
    application(options.project)
      .removeDeclarationFromNgModule('__SRC__/app/app.module.ts', 'AppComponent')
      .toRule()
  ]);

addImportToNgModule

Inserts an import (ex. NgModule) into an NgModule imports and also imports that import.

import { addImportToNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';
import { tags } from '@angular-devkit/core';

export default (options: any): Rule =>
  schematic('my-schematic', [
    // Import simple module
    addImportToNgModule('src/app/app.module.ts', 'HttpClientModule', '@angular/common/http'),

    // Import forRoot module
    addImportToNgModule(
      'src/app/app.module.ts',
      tags.stripIndent`
        TestModule.forRoot({
          enabled: environment.production
        })
      `,
      'src/common/test'
    ),

    // Using chainable
    application(options.project)
      .addImportToNgModule('__SRC__/app/app.module.ts', 'HttpClientModule', '@angular/common/http')
      .toRule()
  ]);

removeImportFromNgModule

Removes an import (ex. NgModule) from an NgModule imports.

Tip

Use #removeImportFromFile to also remove the import.

import { removeImportFromNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeImportFromNgModule('src/app/app.module.ts', 'TestModule'),

    // Using chainable
    application(options.project)
      .removeImportFromNgModule('__SRC__/app/app.module.ts', 'TestModule')
      .toRule()
  ]);

addExportToNgModule

Inserts an export (ex. Component, Pipe, Directive) into an NgModule exports and also imports that export.

import { addExportToNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addExportToNgModule('src/app/app.module.ts', 'TestComponent', './components/test'),

    // Using chainable
    application(options.project)
      .addExportToNgModule('__SRC__/app/app.module.ts', 'TestComponent', './components/test')
      .toRule()
  ]);

removeExportFromNgModule

Removes an export (ex. Component, Pipe, Directive) from an NgModule exports.

Tip

Use #removeImportFromFile to also remove the import.

import { removeExportFromNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeExportFromNgModule('src/app/app.module.ts', 'TestComponent'),

    // Using chainable
    application(options.project)
      .removeExportFromNgModule('__SRC__/app/app.module.ts', 'TestComponent')
      .toRule()
  ]);

addProviderToNgModule

Inserts a provider (ex. Service) into an NgModule providers and also imports that provider.

import { addExportToNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    addProviderToNgModule('src/app/app.module.ts', 'TestService', './services/test'),

    // Using chainable
    application(options.project)
      .addProviderToNgModule('__SRC__/app/app.module.ts', 'TestService', './services/test')
      .toRule()
  ]);

removeProviderFromNgModule

Removes a provider (ex. Service) from an NgModule providers.

Tip

Use #removeImportFromFile to also remove the import.

import { removeProviderFromNgModule, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeProviderFromNgModule('src/app/app.module.ts', 'TestService'),

    // Using chainable
    application(options.project)
      .removeProviderFromNgModule('__SRC__/app/app.module.ts', 'TestService')
      .toRule()
  ]);

addRouteDeclarationToNgModule

Inserts a route declaration to a router module (i.e. as a RouterModule declaration).

import { addRouteDeclarationToNgModule, addImportToFile, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule => {
  const componentRoute = "{ path: 'home', component: HomeComponent }";
  const lazyRoute = "{ path: 'user', loadChildren: '() => import('./pages/user/user.module').then(m => m.UserModule)'; }";

  return schematic('my-schematic', [
    // Add component route
    addRouteDeclarationToNgModule('src/app/app-routing.module.ts', componentRoute),
    addImportToFile('src/app/app-routing.module.ts', 'HomeComponent', './pages/home/home.component'),

    // Add lazy route
    addRouteDeclarationToNgModule('src/app/app-routing.module.ts', lazyRoute),

    // Using chainable
    application(options.project)
      .addRouteDeclarationToNgModule('__SRC__/app/app-routing.module.ts', componentRoute)
      .toRule()
  ]);
}

Rules (standalone)

Note

The following rules are only working with standalone projects.

addProviderToBootstrapApplication

Inserts a provider (ex. provideRouter) into a bootstrapApplication's providers and also imports that provider.

import { addProviderToBootstrapApplication, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';
import { tags } from '@angular-devkit/core';

export default (options: any): Rule =>
  schematic('my-schematic', [
    // Add simple module
    addProviderToBootstrapApplication('src/main.ts', 'provideAnimations()', '@angular/platform-browser/animations'),

    // Add module to `importProvidersFrom`
    addProviderToBootstrapApplication('src/main.ts', 'MyModule', 'path/to/my/module', true),

    // Add module with parameters
    addProviderToBootstrapApplication(
      'src/main.ts',
      tags.stripIndent`
        provideRouter(appRoutes,
          withDebugTracing()
        )
      `,
      '@angular/router'
    ),

    // Using chainable
    application(options.project)
      .addProviderToBootstrapApplication('__MAIN__', 'provideAnimations()', '@angular/platform-browser/animations')
      .toRule()
  ]);

removeProviderFromBootstrapApplication

Removes a provider (ex. provideRouter) from a bootstrapApplication's providers.

Tip

Use #removeImportFromFile to also remove the import.

import { removeProviderFromBootstrapApplication, schematic, application } from '@hug/ngx-schematics-utilities';
import { Rule } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  schematic('my-schematic', [
    removeProviderFromBootstrapApplication('src/main.ts', 'provideRouter'),

    // Using chainable
    application(options.project)
      .removeProviderFromBootstrapApplication('__MAIN__', 'provideRouter')
      .toRule()
  ]);

Helpers

getProjectOutputPath

Gets a project output path as defined in the angular.json file.

import { getProjectOutputPath, schematic } from '@hug/ngx-schematics-utilities';
import { Rule, Tree } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  (tree: Tree): Rule => {
    const projectOutputPath = getProjectOutputPath(tree, 'ProjectName');
    return schematic('my-schematic', [
      ...
    ]);
  };

getProjectMainFilePath

Gets a project main file path as defined in the angular.json file.

import { getProjectMainFilePath, schematic } from '@hug/ngx-schematics-utilities';
import { Rule, Tree } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  (tree: Tree): Rule => {
    const projectMainPath = getProjectMainFilePath(tree, 'ProjectName');
    return schematic('my-schematic', [
      ...
    ]);
  };

getProjectFromWorkspace

Gets a project definition object from the current Angular workspace.

import { getProjectFromWorkspace, schematic } from '@hug/ngx-schematics-utilities';
import { Rule, Tree } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  async (tree: Tree): Promise<Rule> => {
    const project = await getProjectFromWorkspace(tree, 'ProjectName');
    return schematic('my-schematic', [
      ...
    ]);
  };

Helpers (standalone)

Note

The following helpers are only working with standalone projects.

getProjectMainConfigFilePath

Gets a standalone project main config file path.

import { getProjectMainConfigFilePath, schematic } from '@hug/ngx-schematics-utilities';
import { Rule, Tree } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  (tree: Tree): Rule => {
    const projectMainPath = getProjectMainConfigFilePath(tree, 'ProjectName');
    return schematic('my-schematic', [
      ...
    ]);
  };

isProjectStandalone

Checks if a project if of type standalone.

import { isProjectStandalone, schematic } from '@hug/ngx-schematics-utilities';
import { Rule, Tree } from '@angular-devkit/schematics';

export default (options: any): Rule =>
  (tree: Tree): Rule => {
    const isStandalone = isProjectStandalone(tree, 'ProjectName');
    return schematic('my-schematic', [
      ...
    ]);
  };