Angular 6 CLI工作区。如何创建导出服务的库

Question

背景：

• Angular CLI 6 引入了工作区的概念。
• 一个工作区可以包含多个项目。
• 工作区和项目的配置都在工作区根目录下的 'angular.json' 文件中。
• 每个项目可以是应用程序或库。
• CLI 可以使用如下命令生成一个库项目：

         ng generate library forms-lib 

• 此命令创建一个类型为“library”的项目，并包含组件和服务，同时导出该组件。

问题：

我一直在尝试创建一个库，并使其中的服务可供需要它们的应用程序使用，但一直没有成功。

以下代码无法正常工作：

import { NgModule } from '@angular/core';
import { FormsLibComponent } from './forms-lib.component'; 
import { FormsLibService } from './forms-lib.service';

@NgModule({
    imports: [],
    declarations: [FormsLibComponent],
    exports: [FormsLibComponent, FormsLibService],
})
export class FormsLibModule {
}

返回错误：

Uncaught Error: Can't export value FormsLibService from FormsLibModule
as it was neither declared nor imported!

有人能指点我一下吗？

谢谢。

- Bruce Wilcox

---

cli提供的默认库模板包含一个带有@Injectable({ providedIn: 'root' })的服务，这似乎意味着您不需要在库级别或应用程序模块中提供此服务（如果您想要一个单例服务）。它只会“正常工作”！ - Keith Howie

Answer 1

您可以通过在public_api.ts中添加一些代码来添加要从库导出的服务。

首先，在您的 Angular 应用程序中找到 projects/nameOfLibProject/src/public_api.ts，然后添加。

export * from './lib/locationOf/your.service';

- shahidfoy

---

我正在尝试这种方法（在public_api.ts中添加我的服务），但当我尝试使用我的服务中的函数时，它会出现错误“this.mySvc.myFunction不是一个函数”。 - elesh.j

@elesh.j，你导入了服务吗？这是我使用的代码：import { AlertsService } from '@myLib/commons-ng-core'; 请确保你的库已经在package.json中。 - shahidfoy

@elesh.j 你能解决这个错误吗？我也遇到了同样的问题，当尝试访问该函数时，出现了“this.service.function不是一个函数”的错误。 - Ankush Dutt

Answer 2

这可能对你有帮助：

这可能适合你：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsLibComponent } from './forms-lib.component'; 
import { FormsLibService } from './forms-lib.service';

@NgModule({
    declarations: [FormsLibComponent],
    exports: [FormsLibComponent],
})
export class FormsLibModule {
    static forRoot(): ModuleWithProviders {
        return {
          ngModule: FormsLibModule,
          providers: [FormsLibService]
        };
      }
}

- R. Richards

---

该解决方案行不通。我已经尝试过了。但是在public_api.ts中导入语句是有效的。 - Mukesh Rathore

Answer 3

看起来你忘记在模块的提供者数组中添加你的服务了。

@NgModule({
    imports: [],
    providers: [FormsLibService],
    declarations: [FormsLibComponent, FormsLibService],
    exports: [FormsLibComponent, FormsLibService],
})

- Haris

---

在模块中导出服务时出现错误。只有组件、模块、管道和指令可以使用上述解决方案进行导出。如果要导出服务，我们需要在public_api.ts中添加导入语句。 - Mukesh Rathore

据我所知，您不需要导出服务，只需将其包含在模块的提供者数组中（就像您已经做的那样），然后在应用程序或另一个模块中导入定义了该服务的模块，并使用它。 - OmGanesh

Answer 4

我的问题是： 在导入语句中，我选择了Webstorm自动完成提供的内容，大致相当于

。

import {FormsLibModule} from 'forms-lib/lib/forms-lib.module';

相反，我只能使用库名：

import {FormsLibModule} from 'forms-lib';

（注：我有一个工作区，其中包含库以及测试它的应用程序）

- MJL

---

很奇怪，这个可以工作。不过我想知道为什么它不能按预期的方式工作（在 Angular 14 中也发生了这种情况）... - paddotk

Answer 5

就 Angular 8 下创建库而言，我们需要在 public_api.ts 中导出服务。

export * from './lib/components/spinner/spinner.service';

- Mukesh Rathore

---

同Angular 6 - netalex

Answer 6

我知道我来晚了，但是为了以后参考：

1. ng build FormsLibModule
2. 将库的模块添加到目标模块和组件文件中，如下所示:

import { FormsLibModule } from 'forms-lib';

注意：VS Code会将此导入显示为错误，但不要紧，因为它可以编译成功。不要尝试使用自动导入此导入，因为它没有列在其中。

- mor222

---

我们正在讨论在Angular库中创建服务并从中导出，而不是关于LibraryModule。 - Mukesh Rathore

这对我也很有效。让它在VSCode中工作的诀窍是创建一个exports.module.ts文件，添加export { FormsLibService } from 'forms-lib';并在导入时使用它。它会在VSCode中显示为错误，但仅限于此文件。 - Eldelshell