时间戳

首页 > 解决方案 > 如何将服务从 Angular 库注入到另一个 Angular 库

angular - 如何将服务从 Angular 库注入到另一个 Angular 库

问题描述

我必须在项目文件夹中添加角度库

ng generate library foo
ng generate library bar

我的 foo 库包含一个包含库文件的 public_api.ts

export * from './lib/foo.service';

我在 foo 中有一个服务定义为抽象类

export abstract class FooService {}

我想在 Bar 服务中扩展 fooService

import { FooService } from 'projects/foo/src/public_api';
export class BarService extends FooService{}

我收到了这个错误

BUILD ERROR
error TS6059: File '/projects/foo/src/lib/foo.service.ts' is not under 'rootDir' 'projects/bar/src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/projects/foo/src/public_api.ts' is not under 'rootDir' '//projects/bar/src'. 'rootDir' is expected to contain all source files.

如何从 bar 获取我的 foo 库？

标签： angular

解决方案

尝试将库视为单独的项目（即使它们位于单个源代码树中）。

如何使您的方法有效：（从头开始）

  1. ng new libs-test
  2. ng generate library foo
  3. ng generate library bar
  4. ng build foo
  5. npm i foo@file:dist/foo // 这会将您的应用程序项目的本地依赖项添加到 foo 库
  6. 打开库的package.json，bar添加"foo": "latest"依赖：
    {
      “名称”：“酒吧”，
      “版本”：“0.0.1”，
      “对等依赖”：{
        "@angular/common": "^7.2.0",
        "@angular/core": "^7.2.0",
        "foo": "latest" // 添加这一行
      }
    }
  1. 去图书馆BarService里面：bar
    从'@angular/core'导入{可注射}；
    从 'foo' 导入 { FooService }；

    @可注射（{
      提供在：“根”
    })
    导出类 BarService 扩展 FooService{

      构造函数（）{
        极好的（）;
      }
    }

请注意非亲属import { FooService } from 'foo';

  1. 建立你的bar图书馆：ng build bar

而已！您的bar库正确使用了该foo功能。

如果您想bar在您的应用程序中使用 's 服务，只需执行以下操作：

  1. ng build bar
  2. npm i bar@file:dist/bar
  3. 在你的AppComponent：
    从'@angular/core'导入{组件}；
    从“酒吧”导入 { BarService }；

    @零件（{
      选择器：'应用程序根'，
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.less']
    })
    导出类 AppComponent {
      标题 = '库测试';

      构造函数（私人 barService：BarService）{

      }
    }
  1. 确保您的应用程序正在正确构建：ng build --aot

推荐阅读