Search code examples
angularangular6angular-cli-v6

Deploy Angular 6 app with component library

I built an Angular 6 app consisting of a library containing components that should be reused in the future and an app. I created everything using angular cli, so I have the default structure 

my-app
 |
 +-projects
 |   |
 |   +-my-lib
 |      |
 |      +-src
 |      +-package.json
 |
 +-src
 +-package.json

To build the project, I first build the library using ng build my-lib --prod and then build the app using ng build --prod. Afterwards the dist directory looks like this

dist
 |
 +-my-app
 +-my-lib

My question is now how to deploy this to my server, so that the app has access to the library. Locally everything works, so should I just transfer the whole dist directory to my server as usual? Or should I publish the library to npm and add it as a regular dependency to my package.json. And if yes, how do I set this up to not interfere with local development, where I want to build against the library in the dist directory?

Solution

  • Your my-app build already contains my-lib library therefore it should be enough to deploy just dist/my-app.

    As for publishing to npm it is really up to you.

    For local development, you might consider using npm link:

    1. cd dist/my-lib
    2. npm link
    3. cd to/your/project/dir
    4. npm link your-library-name (probably my-lib)

    When you change the library and build again, there is no need to redo link, it will pickup new version.

    However from my experience when you update or install other "regular" packages you must do the link again.