8

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
Improve this question
8
  • 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? Commented Jan 11, 2019 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. Commented Jan 11, 2019 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. :) Commented Jan 11, 2019 at 12:53
  • So how can I test my library? Should I serve application in each change of library? (That's really a pain) Commented Jan 11, 2019 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. Commented Jan 11, 2019 at 13:12

4 Answers 4

Reset to default
10

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.

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

2 Comments

All the npm link and wait-for huzzle gone. Nice!
This should be the approved answer.
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.

Improve this answer

7 Comments

Thanks for your answer. But unfortunately serving application doesn't make any sense for changing code in library.
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.
you have to import 'projects/foo-lib/src/public_api' or 'projects/foo-lib', not 'dist/foo-lib' though
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.
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. blog.angularindepth.com/… for reference.
|
6

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.

Improve this answer

1 Comment

you only need ng serve and import from project folder.
0

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",
      ]
    },
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.