Skip to main content

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 section of the angular.json file.

Tip

Also adds it to the test section if the test builder is not @angular/build:unit-test.

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 section of the angular.json file.

Tip

Also removes it from the test section if the test builder is not @angular/build:unit-test.

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 section of the angular.json file.

Tip

Also adds it to the test section if the test builder is not @angular/build:unit-test.

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 section of the angular.json file.

Tip

Also removes it from the test section if the test builder is not @angular/build:unit-test.

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 section of the angular.json file.

Tip

Also adds it to the test section if the test builder is not @angular/build:unit-test.

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 section of the angular.json file.

Tip

Also removes it from the test section if the test builder is not @angular/build:unit-test.

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​

getAngularVersion​

Gets the version of Angular currently used in the project.

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

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

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', [
      ...
    ]);
  };