angular - Angular serve library

Question

In latest versions of Angular cli, we can use ng g library lib-name command to create library. As mentioned in the Angular docs :

ng serve <project>

And:

<project>   The name of the project to build. Can be an app or a library.

So, we can serve library. But when I serve I get the following errors:

Project 'ngx-tab-component' does not support the 'serve' target.
Error: Project 'ngx-tab-component' does not support the 'serve' target.
at ServeCommand.initialize (C:\Users\vahidnajafi\angular\ngx-tab-app\node_modules\@angular\cli\models\architect-command.js:53:19)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3

Answer 1

The project where you generate your library in serves as a host to debug and test it.

Simply import your library in your host application module, make sure all dependencies are available and serve the host application. All changes you make inside your library are directly live reloaded into your host application.

Note: You have to import projects/foo-lib/src/public_api, not 'dist/foo-lib' though

Use your official library name, for example @foo/foo-library, angular will find it in the correct location.

Answer 2

You can update path in main tsconfig.json from

"paths": {
  "library": {
    "dist/library"
  }
}

to

"paths": {
  "library": {
    "projects/library/src/public-api"
  }
}

Then you don't need to start separate build for your library and rebuild also works.

Answer 3

Finally found the solution.

First I watch to built version of library by following (provided from Angular Cli 6.2):

ng build foo-lib --watch

Then I serve application simply by:

ng serve

And I import the module from dist directory (because I can watch to built version):

import { FooLibModule } from 'dist/foo-lib';

Then every change in my library, cause change to the build version, and my application can reload properly.

It seems the process is a bit complicated.