Custom Angular Schematics extremly slow

373 Views Asked by At

I am working on a custom package that will override default Angular Schematics, by providing a custom template for spec files. So running ng generate component should create a component as in default schematics, but the spec file should be overridden by my template.

The package works as expected apart from the time that takes to generate a component. It takes over 3 minutes to generate it! I have no idea why as my setup looks pretty straightforward and I have no idea, what could be the bottleneck. I will appreciate any ideas, what could be wrong or at least how to check, what's causing the issue.

Here is my code:

collection.js

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "extends": [
    "@schematics/angular"
  ],
  "schematics": {
    "component": {
      "factory": "./component/index#Component",
      "schema": "./component/schema.json"
    },
  }
}

factory - index.ts

export function parseName(path: string, name: string) {
  const nameWithoutPath = basename(name as Path);
  const namePath = dirname((path + '/' + name) as Path);

  return {
    name: nameWithoutPath,
    path: normalize('/' + namePath),
  };
}

export function Component(_options: any): Rule {
  const parsedPath = parseName(_options.path || '.', _options.name);
  console.log('generating component using custom schematics');

  return chain([
    externalSchematic('@schematics/angular', 'component', _options),
    filter(f => !f.endsWith('spec.ts')),
    mergeWith(apply(url('./files'), [ // Custom spec files are located here.
      template({
        ..._options,
        name: parsedPath.name,
        classify: strings.classify,
        dasherize: strings.dasherize,
      }),
      move(normalize(parsedPath.path as string)),
    ])),
  ]);
}

template - file

import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';

describe('<%= classify(name) %>Component', () => {
  let component: <%= classify(name) %>Component;

  beforeEach(() => {
    component = new <%= classify(name) %>Component();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

As you see, inside the function that generates component I've put a console log - it appears immediately in the terminal while running ng g component, then it takes over 3 minutes to do the rest of the code...

1

There are 1 best solutions below

0
On BEST ANSWER

I realised that the slow behaviour was a result of the filter function. I guess it's not only filtering created files in the schematic, but it checks each project file.

Here is what I did to get rid of the filter function :)

mergeWith(templateSource, MergeStrategy.Overwrite),

the templateSource is the same as in the original question.