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

I can't imagine a context where it would make sense to serve a library. It's not an application, it's a library. You import a library into an application that you later serve. How are you expecting this to work? — R. Richards, Jan 11 '19 at 12:48
@R.Richards Actually I didn't expect it. But in the docs is mentioned about serving project (and project can be a library). And if there will be no livereload for library, that would be very difficult to develop. — Vahid Najafi, Jan 11 '19 at 12:51
Good points. It is odd that the tools even mentions it if it doesn't do anything. Maybe this is meant for some *future* functionality we don't know about yet. :) — R. Richards, Jan 11 '19 at 12:53
So how can I test my library? Should I serve application in each change of library? (That's really a pain) — Vahid Najafi, Jan 11 '19 at 12:55
Have you tried serving the application that uses the library, then make some change to the library to see if `ng serve` recompiles? I have not tried that, but it would be nice it that worked. — R. Richards, Jan 11 '19 at 13:12
@R.Richards Please see my answer. I found a solution for this. — Vahid Najafi, Jan 11 '19 at 20:50

score 7 · Answer 1 · answered Jun 20 '20 at 12:47

7

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.

answered Jun 20 '20 at 12:47

Jan Kuri

927
12
17

All the `npm link` and `wait-for` huzzle gone. Nice! – d0x Aug 04 '20 at 13:51
This should be the approved answer. – kneeki May 24 '22 at 21:29

Markus Dresch · Accepted Answer · 2019-01-28T07:09:32.297

6

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.

edited Jan 28 '19 at 07:09

answered Jan 11 '19 at 14:43

Markus Dresch

5,290
3
20
40

Thanks for your answer. But unfortunately serving application doesn't make any sense for changing code in library. – Vahid Najafi Jan 11 '19 at 17:36
sure it makes sense, every change in your library is reflected in the host application. you only need `ng serve`, not `ng build foo --watch` like you suggested. – Markus Dresch Jan 14 '19 at 06:50
3

you have to import 'projects/foo-lib/src/public_api' or 'projects/foo-lib', not 'dist/foo-lib' though – Markus Dresch Jan 14 '19 at 06:52
1

Yes. you are completely right. Thank you. I'm going to accept this answer. So please add your last comment to the answer. That was the point. – Vahid Najafi Jan 14 '19 at 13:26
Your note is incorrect. You should import libraries through your dist folder. Same as you would import built libraries installed through npm so should you first build your library and then import it. https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5 for reference. – Potential Guacamole Jan 25 '19 at 13:56
@StephenVerbist, fixed it – Markus Dresch Jan 28 '19 at 07:10
@MarkusDresch What overall project structure do you have? Currently I'm storing my libraries in NPM and they exist separately from host component. So I came with an idea to create some demo host project and place it in the same folder to test and debug libraries in browser. My project structure now is > project >> dist >> packages >> test >> angular.json >> package.json >> ... – Dzmitry Vasilevsky Aug 19 '19 at 10:47

Vahid Najafi · Answer 3 · 2019-01-14T13:31:09.720

5

~~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.

edited Jan 14 '19 at 13:31

answered Jan 11 '19 at 20:49

Vahid Najafi

4,654
11
43
88

you only need `ng serve` and import from project folder. – Markus Dresch Jan 14 '19 at 07:40

score 0 · Answer 4 · answered Apr 24 '23 at 21:21

Some of the answers suggests to ng build mylib --watch your library and then ng serve but I feels a bit clunky. I want something to run by simply doing ng serve and nothing else.

Here is the solution I came up with it works fine in Angular 15 (with multi project workspace).

- libs/common-lib
- projects/firstApp
- projects/secondApp
- tsconfig.json

Basically, I had to modify tsconfig.json in the root of the project.

From:

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "common-lib": [
        "dist/common-lib",
      ]
    },

To:

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "common-lib": [
        "libs/common-lib/src/public-api",
      ]
    },

Angular serve library

4 Answers4

Linked