Tuesday, 20 March, 2018 UTC


Summary

  • It gives us a new command that fetches an npm package and sets it up with a schematic — a code generator written with the CLI’s scaffolding tool Schematics.
  • Make sure to fetch Beta 5 or higher: – – You also need the Schematics CLI: – – The above mentioned logger library can be found in the branch of my sample: – – After checking out the branch, npm install its dependencies: – – If you want to learn…
  • For the latter task, I’m using the npm package we need to install in the project’s root: – – In order to automate the mentioned tasks, add the following scripts to the : – – Also, extend the script so that the newly introduced scripts are called: – – When…
  • To get the file, set the switch to : – – After we’ve seen that this works, generate a new project with the CLI to find out whether our library plays together with the new : – – Make sure that you point to our folder.
  • To make sure our registry is used, create an file in the project’s root: – – This entry causes npm to look up each library with the scope in our verdaccio instance.
Angular Schulungen, Workshops und Beratung in Deutschland, Österreich und der Schweiz
@ManfredSteyer: Blogged: Frictionless Library Setup with the @Angular CLI and Schematics
Thx to @hanslatwork for reviewing.
This blog post is part of an article series.
It’s always the same: After npm installing a new library, we have to follow a readme step by step to include it into our application. Usually this involves creating configuration objects, referencing css files, and importing Angular Modules. As such tasks aren’t fun at all it would be nice to automate this.
This is exactly what the Angular CLI supports beginning with Version 6 (Beta 5). It gives us a new command that fetches an npm package and sets it up with a schematic — a code generator written with the CLI’s scaffolding tool Schematics. To support this, the package just needs to name this schematic .
In this article, I show you how to create such a package. For this, I’ll use ng-packagr and a custom schematic. You can find the source code in my GitHub account.
If you haven’t got an overview to Schematics so far, you should lookup the well written introduction in the Angular Blog before proceeding here.
To demonstrate how to leverage , I’m using an example with a very simple logger library here. It is complex enough to explain how everything works and not indented for production. After installing it, one has to import it into the root module using :
As you see in…
Custom Schematics