Tuesday, 13 December, 2016 UTC
Summary
In the first post we built our application in AOT mode, now it’s time to create a library that is AOT compliant.
Most of you are thinking …”wait, is it not the same????” No it’s not, unfortunately it is not an easy job to find good resources and angular.io doesn’t help a lot for that.
Don’t worry we’ll figure out how to do it. First things first, of course, we need to write our code… we’ll assume that we have an awesome library containing a component that displays ‘HelloWorld’ (it will be an useful library ).
HelloWorld library
Nothing special here, in our library we have:
- module – HelloWorld.module.ts;
- component – HelloWorld.component.ts;
- html – HelloWorld.component.html;
- scss – HelloWorld.component.scss (that will be hard to manage…but we’ll see later);
- test – HelloWorld.spec.ts … writing the tests for your library is really important (vital)!!!
There’s one file that requires more attention and it is the module.
404: Not Found
The most important lines are 14 and 15.
By convention, the forRoot static method both provides and configures services at the same time. It takes a service configuration object and returns a ModuleWithProviders which is a simple object with two properties:
ngModule– theCoreModuleclassproviders– the configured providers
The root
AppModule imports the CoreModule and adds the providers to the AppModule providers.Ok! We’ve our awesome component, now let’s build our library by creating the dist that will be used by another application. Unfortunately tools like webpack or rollup are not very helpful for that because they create one output bundled file (and it is not what we want).
In this case we’ve just one solution and actually it is the best one: the ngc compiler. The command is quite easy to use and it’s:
ngc -p src/tsconfig.aot.json
The tsconfig file is:
404: Not Found
Of course it is better to write this command in our package.json:
404: Not Found
As you can see on line 11 with the build command we run 3 commands in sequence:
The first one deletes the dist folder, the second one compiles our source code and the last one is the tricky part. Ngc is unable to understand scss file so we have to manage it manually. We’ll create a gulp file:
404: Not Found
this gulp performs a couple of tasks:
- copy all the html files;
- copy the assets;
- copy the scss.
The most important part is line 23 that does the inline resource:
404: Not Found
the output of the compiled component will be:
aot compiled component
As you can see the templateUrl and the StyleUrls have been replaced by their content.
Well, we’re done and the full example is available here! Technically there’s a small caveat, the old deploy system like System.js etc requires an umd file. We can bundle our library in two possible ways:
- with webpack (have a look at my previous post);
- with rollup.js – Larkin suggests to use rollup.js for libraries.
rollup for library
The last little thing ( I promise it is the last one) is that in the github repo we have webpack for the tests (again … keep in mind, tests are crucial).
Now we’re really done
Special thanks as usual to Olivier Combe for the review and If you enjoyed the post follow me on twitter @DZurico
The post How to create an Angular library appeared first on Angular and Javascript blog.