Creating an Angular 6 Library

This is a short post, but rightfully so, the Angular team have done a great job making all our lives that bit easier.

Creating shared angular modules that you can install accross many node projects, in previous versions of Angular was a real pain and required alot more manual work to install the correct bundlers etc.

Sometimes it really felt like:

But now you can setup a library in Angular 6 with a few lines.

Starting from scratch

Make sure you have the Angular CLI installed and then do this:

Generate your app

First you need an Angular app in order to generate a library and to use it in. Change my-library-app to whatever you want your app to be called:

ng new my-library-app

This isn’t the library, and instead, more of a test bed to use your library. The CLI now has an easy command to generate new libraries:

Generate your library

First make sure you are in the project directory:

cd my-library-app

Now generate your library, changing my-library to whatever you want your library to be called.

ng generate library my-library

This is the actual library you would install in other projects. Within the projects directory, you will now see your new library. Within here is the code for your library, anything outside of this is the Angular app to either act as a “dummy” or your actual project you want to use this library in. This command changes your tsconfig.json to point the node reference of my-library to your local build of your library (dist/my-library), this means you don’t have to change any code within this project if you want to use the published version of it.

Generating Angular components/services etc. within your library

To generate components/services etc. within your project all you need to do is add the --project argument to the generate command:

ng generate service book --project=my-library

Build your library

Now build your library by specifying the library name:

ng build my-library

*Note: * Right now there is no --watch feature, which means you will have to build every time you change your code.

You can now use this library in your “test” app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { MyLibraryModule } from 'my-library';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Cool huh? But that doesn’t solve shared modules, ’cause you probably want to install it in another project…

Installing your library locally in another project

Before installing your local project you must enable symlinks within your project as npm will use these to reference your local library build.

Within angular.json in your project you want to install it in, add "preserveSymlinks": true within the build options:

{
    "projects": {
            "my-other-project": {
                "architect": {
                    "build": {
                        "options": {
                            "preserveSymlinks": true
                        }
                }
        }
}

Note: this doesn’t include any other properties, just the one mentioned.

You can then install the project using a relative directory path. In my case, the app I generated the library from is a sibling directory so I would do this:

npm link ../my-library/dist/my-library

Everytime you build your library in the other app project, this will pick up on those changes.

NOW we’re sorted!

Publishing to npm

You will need an npm account to do this and a production build. See the docs for more info on publishing npm packages.

ng build my-library --prod
cd dist/my-library
npm publish

and thats it!