角度服务库

Question

在最新版本的Angular cli中，我们可以使用

ng g library lib-name

命令来创建库。如 Angular docs 中所述：

ng serve <project>

和：

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

所以，我们可以为library服务。但是当我发球时，我得到以下错误：

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

您可以从

更新主要

tsconfig.json

中的路径

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

到

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

然后你不需要为你的库开始单独构建并且重建也可以。

Answer 2

您生成库的项目作为调试和测试它的宿主。

只需将您的库导入主机应用程序模块，确保所有依赖项都可用并为主机应用程序提供服务。您在库中所做的所有更改都会直接实时重新加载到您的主机应用程序中。

注意： 你必须导入

projects/foo-lib/src/public_api

，而不是 'dist/foo-lib'

使用你的官方图书馆名称，例如

@foo/foo-library

，angular会在正确的位置找到它。

Answer 3

终于找到了解决方案。

首先，我通过以下方式观看库的构建版本（由 Angular Cli 6.2 提供）：

ng build foo-lib --watch

然后我通过以下方式简单地提供应用程序：

ng serve

然后我从

dist

目录导入模块（因为我可以观看构建版本）：

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

然后我的库中的每一个变化都会导致构建版本的变化，我的应用程序可以正确地重新加载。

过程好像有点复杂

Answer 4

一些答案建议

ng build mylib --watch

你的图书馆然后

ng serve

但我觉得有点笨拙。我想通过简单地做

ng serve

而不做其他事情来运行一些东西。

这是我提出的解决方案，它在 Angular 15（具有多项目工作区）中运行良好。

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

基本上，我必须在项目的根目录中修改

tsconfig.json

。

来自：

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

收件人：

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