Exercise 7: chain
Kevin Schuchard edited this page May 2, 2019
·
8 revisions
Checkout the chain
branch:
npm run clean
git checkout -f chain
In the src/schematic-starter/index.ts file:
- In the main function, return the
chain
method and include theaddFiles
Rule
function. Invoke with the tree and context to return aTree
.
return chain([addFiles(_options)])(tree, _context);
In the addFiles
helper function:
- Use
mergeWith
to return the source files and accompanyingRule
's. WithmergeWith
, you can merge an input tree with the source passed in returning aRule
const templateSource = apply(url("./files"), [
template({
...strings,
..._options
}),
move(path)
]);
return mergeWith(templateSource);
npm test
You should have the three component files added to the sandbox at sandbox/src/app/components.
In the chain method add another input to execute an external schematic:
example: externalSchematic('@schuchard/prettier', 'add', {})
return chain([addFiles(_options), externalSchematic('@schuchard/prettier', 'add', {})])(
tree,
_context
);
npm test
You should have added the files and setup Prettier.
- Open the sandbox/src/app/app.module.ts file and add the new component to the module declarations.
- Open the sandbox/src/app/app.component.html file and replace the HTML with the new component selector.
If you choose the default name prompt you would use NgConfComponent
and <app-ng-conf></app-ng-conf>
for the above steps.
cd sandbox
npm start