Deploy Angular 6 app with component library

Question

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?

I would probably publish on npm, that way anyone can pull from npm. I think with angular 6 you can package now and publish easier, blog.angularindepth.com/… or using an npm lib called ngpackagr npmjs.com/package/ng-packagr — Taranjit Kang
– Taranjit Kang, Commented Jul 26, 2018 at 14:19
Yes it would be no problem, however I would have to add the library as a npm dependency to my package.json, which means that for local test builds it would also build against the npm version. I would have to have two package.json s then — skappler
– skappler, Commented Jul 26, 2018 at 15:45

PeS · Accepted Answer · 2018-07-26 15:46:25Z

5

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:

cd dist/my-lib
npm link
cd to/your/project/dir
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.

answered Jul 26, 2018 at 15:46

PeS

4,0474 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skappler Over a year ago

That would be great. I'll try to deploy the app itself. npm link is not necessary with the newest angular cli version. Adding the lib as a library to the angular.json is enough to build the whole project

skappler Over a year ago

finally had the chance to test this, and the library is indeed included in the my-app bundle. Thank you very much

Collectives™ on Stack Overflow

Deploy Angular 6 app with component library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related