I want a custom schematic that will create a page in my application. To do this, I want to use the existing core schematics to create a routing module, then create a component in that module to display my page content, and finally wire everything together. It's the "wire everything together" that has me stumped. I can't find clear guidance on the "right" way to to this. Should I:
a) directly modify the existing files that the "module" and "component" schematics created? (I don't know how to do that)
b) use templates to somehow merge the modifications into the files? (I don't know how to do this either)
Below is the index.ts file for my page schematic as of now. What I don't know how to do is commented by "TODO" towards the end.
Please help!
import {
externalSchematic,
Rule,
SchematicContext,
Tree,
chain,
} from '@angular-devkit/schematics';
export function page(options: any): Rule {
const name = options.name;
return chain([
// create module for this page
externalSchematic('@schematics/angular', 'module', {
name: `pages/${name}`,
routing: true
}),
// create simple component to display in this page
externalSchematic('@schematics/angular', 'component', {
name: `pages/${name}/${name}`,
routing: true
}),
// add component to routing module
(tree: Tree, _context: SchematicContext) => {
// TODO 1: import new component into routing module
// e.g. import { MyPageComponent } from "./my-page/my-page.component";
// TODO 2: add component to routes
// const routes: Routes = [{ path: '', pathMatch: 'full', component: MyPageComponent }];
return tree;
},
]);
}