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

【问题标题】：Angular 6 CLI Workspaces. How to create library that exports servicesAngular 6 CLI 工作区。如何创建导出服务的库
【发布时间】：2018-11-05 04:02:57
【问题描述】：

背景：

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

         ng generate library forms-lib

此命令创建类型为的项目带有组件和服务的“库”并导出组件。

问题：

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

此代码不起作用：

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!

有人能指出正确的方向吗？

谢谢。

【问题讨论】：

cli提供的默认库模板包含@Injectable({ providedIn: 'root' })的服务，这似乎意味着您不需要在库级别提供此服务或应用程序模块（如果你想要一个 singleton service 就是）。它正常工作！

标签： angular angular-cli

【解决方案1】：

我知道我迟到了，但为了以后的参考：我通过以下方式解决了我的问题：

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

import { FormsLibModule } from 'forms-lib';

注意：VS Code 将此导入显示为错误，但没关系，因为它编译得很好。不要尝试对此导入使用自动导入，因为它未在此处列出。

【讨论】：

我们正在讨论在 Angular 库中创建服务并从中导出。与库模块无关。
这对我也很好。让它与 VSCode 一起工作的技巧是创建一个 exports.module.ts 文件并添加 export { FormsLibService } from 'forms-lib'; 并在您的导入中使用它。它将在 VSCode 上显示为错误，但仅在此文件中。

【解决方案2】：

似乎您错过了在模块的提供者数组中添加服务。

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

【讨论】：

在模块中导出服务时出错。仅允许使用上述解决方案导出组件、模块、管道和指令。对于导出服务，我们需要在 public_api.ts 中有 import 语句
据我所知，您不需要导出服务，只需将 providers 包含在模块中的数组中（因为您已经这样做了），然后在应用程序或其他模块中使用它导入定义服务的模块。

【解决方案3】：

这可能对你有用：

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]
        };
      }
}

【讨论】：

此解决方案不起作用。我尝试过这个。但是在 public_api.ts 中导入语句有效

【解决方案4】：

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

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

相反，我只需要使用库名称：

import {FormsLibModule} from 'forms-lib';

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

【讨论】：

【解决方案5】：

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

首先在你的 Angular 应用中找到 projects/nameOfLibProject/src/public_api.ts 然后添加

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

【讨论】：

我正在尝试这种方法（在 public_api.ts 中添加我的服务），但是当我尝试在我的服务中使用一个函数时，它会给出错误 this.mySvc.myFunction is not a function
@elesh.j 你导入服务了吗？这里我使用import { AlertsService } from '@myLib/commons-ng-core'; 还确保你的库在你的 package.json 中
@elesh.j 你能解决这个错误吗？在尝试访问该函数时，我也遇到了同样的错误 this.service.function is not a function。

【解决方案6】：

考虑到在 Angular 8 下创建库，我们需要在 public_api.ts 中导出服务 export * from './lib/components/spinner/spinner.service';

【讨论】：

同角度6