<%= dasherize(name) %> works!
```
```scss theme={null}
// src/component/files/__name@dasherize__/__name@dasherize__.component.scss.template
.<%= dasherize(name) %> {
display: block;
}
```
```typescript theme={null}
// src/component/files/__name@dasherize__/__name@dasherize__.component.spec.ts.template
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
describe('<%= classify(name) %>Component', () => {
let component: <%= classify(name) %>Component;
let fixture: ComponentFixture<<%= classify(name) %>Component>;
beforeEach(async () => {
await TestBed.configureTestingModule({
<% if (standalone) { %>imports: [<%= classify(name) %>Component]<% } else { %>declarations: [<%= classify(name) %>Component]<% } %>
}).compileComponents();
fixture = TestBed.createComponent(<%= classify(name) %>Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
```
***
## AST Manipulation
```typescript theme={null}
// Modifying existing TypeScript files
import * as ts from 'typescript';
import { insertImport, addProviderToModule } from '@angular/schematics/utility/ast-utils';
import { InsertChange } from '@angular/schematics/utility/change';
function addImportToModule(options: any): Rule {
return (tree: Tree) => {
const modulePath = options.module;
const text = tree.read(modulePath);
if (!text) {
throw new Error(`Could not read ${modulePath}`);
}
const sourceText = text.toString('utf-8');
const source = ts.createSourceFile(
modulePath,
sourceText,
ts.ScriptTarget.Latest,
true
);
// Add import statement
const importChange = insertImport(
source,
modulePath,
'MyService',
'./my-service'
) as InsertChange;
const recorder = tree.beginUpdate(modulePath);
if (importChange.toAdd) {
recorder.insertLeft(importChange.pos, importChange.toAdd);
}
tree.commitUpdate(recorder);
return tree;
};
}
// Adding to providers array
function addProvider(options: any): Rule {
return (tree: Tree) => {
const modulePath = findModulePath(tree, options);
const source = readSourceFile(tree, modulePath);
const providerChanges = addProviderToModule(
source,
modulePath,
'MyService',
'./my-service'
);
const recorder = tree.beginUpdate(modulePath);
providerChanges.forEach(change => {
if (change instanceof InsertChange) {
recorder.insertLeft(change.pos, change.toAdd);
}
});
tree.commitUpdate(recorder);
return tree;
};
}
```
***
## ng-add Schematic
```typescript theme={null}
// src/ng-add/index.ts
import { Rule, SchematicContext, Tree, chain } from '@angular-devkit/schematics';
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
export function ngAdd(options: any): Rule {
return chain([
addPackageToJson(),
installPackages(),
addToAngularJson(),
updateAppConfig()
]);
}
function addPackageToJson(): Rule {
return (tree: Tree) => {
const packageJson = JSON.parse(tree.read('/package.json')!.toString());
packageJson.dependencies = packageJson.dependencies || {};
packageJson.dependencies['my-library'] = '^1.0.0';
tree.overwrite('/package.json', JSON.stringify(packageJson, null, 2));
return tree;
};
}
function installPackages(): Rule {
return (tree: Tree, context: SchematicContext) => {
context.addTask(new NodePackageInstallTask());
return tree;
};
}
function addToAngularJson(): Rule {
return (tree: Tree) => {
const angularJson = JSON.parse(tree.read('/angular.json')!.toString());
// Add assets, styles, or scripts
const projectName = Object.keys(angularJson.projects)[0];
const project = angularJson.projects[projectName];
const buildTarget = project.architect.build;
buildTarget.options.styles = buildTarget.options.styles || [];
if (!buildTarget.options.styles.includes('my-library/styles.css')) {
buildTarget.options.styles.push('my-library/styles.css');
}
tree.overwrite('/angular.json', JSON.stringify(angularJson, null, 2));
return tree;
};
}
function updateAppConfig(): Rule {
return (tree: Tree) => {
const configPath = '/src/app/app.config.ts';
if (!tree.exists(configPath)) {
return tree;
}
let content = tree.read(configPath)!.toString();
// Add import
if (!content.includes("import { provideMyLibrary }")) {
content = `import { provideMyLibrary } from 'my-library';\n${content}`;
}
// Add provider
if (!content.includes('provideMyLibrary()')) {
content = content.replace(
/providers:\s*\[/,
'providers: [\n provideMyLibrary(),'
);
}
tree.overwrite(configPath, content);
return tree;
};
}
```
***
## Testing Schematics
```typescript theme={null}
// src/component/index.spec.ts
import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
import * as path from 'path';
const collectionPath = path.join(__dirname, '../collection.json');
describe('component schematic', () => {
let runner: SchematicTestRunner;
let tree: UnitTestTree;
beforeEach(() => {
runner = new SchematicTestRunner('schematics', collectionPath);
tree = new UnitTestTree(Tree.empty());
// Create minimal workspace
tree.create('/package.json', JSON.stringify({ name: 'test' }));
tree.create('/angular.json', JSON.stringify({
projects: { app: { root: 'src', sourceRoot: 'src' } }
}));
});
it('should create component files', async () => {
const result = await runner.runSchematic('component', {
name: 'test',
path: 'src/app'
}, tree);
expect(result.files).toContain('/src/app/test/test.component.ts');
expect(result.files).toContain('/src/app/test/test.component.html');
expect(result.files).toContain('/src/app/test/test.component.scss');
expect(result.files).toContain('/src/app/test/test.component.spec.ts');
});
it('should generate standalone component', async () => {
const result = await runner.runSchematic('component', {
name: 'button',
path: 'src/app',
standalone: true
}, tree);
const content = result.readContent('/src/app/button/button.component.ts');
expect(content).toContain('standalone: true');
expect(content).toContain('imports: [CommonModule]');
});
it('should not create spec file when withTests is false', async () => {
const result = await runner.runSchematic('component', {
name: 'simple',
path: 'src/app',
withTests: false
}, tree);
expect(result.files).not.toContain('/src/app/simple/simple.component.spec.ts');
});
it('should use correct naming conventions', async () => {
const result = await runner.runSchematic('component', {
name: 'user-profile',
path: 'src/app'
}, tree);
const content = result.readContent('/src/app/user-profile/user-profile.component.ts');
expect(content).toContain('export class UserProfileComponent');
expect(content).toContain("selector: 'app-user-profile'");
});
});
```
***
## Custom Builders
```typescript theme={null}
// builders/build/index.ts
import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { JsonObject } from '@angular-devkit/core';
import { Observable, of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
interface BuildOptions extends JsonObject {
outputPath: string;
optimize: boolean;
watch: boolean;
}
export default createBuilder
## Custom Schematics Overview