Angular 6 CLI工作区创建可导出服务的库遇问题求指导

嘿，我来帮你搞定这个问题！你遇到的错误是因为Angular的NgModule有明确规则：exports数组只能用来导出可声明对象（组件、指令、管道），服务不属于这类，所以不能直接放进exports里。

错误原因拆解 #

Angular对NgModule的各个数组有严格的用途限制：

• declarations：仅能存放组件、指令、管道这类可声明对象
• exports：仅能导出已经在declarations里声明过，或者从其他模块导入的可声明对象
• 服务属于依赖提供者，要通过providers数组或者@Injectable的providedIn配置来注册，和exports完全不搭边

正确的实现方式 #

有两种常用的方式让你的库服务能被应用正常使用：

方式1：使用providedIn: 'root'（Angular 6+推荐方案）

直接在服务类上配置providedIn: 'root'，这样服务会自动注册到根注入器，成为全局单例，应用不需要额外配置模块就能调用：

首先修改你的服务代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 自动注册到根注入器，全局可用
})
export class FormsLibService {
  // 你的服务逻辑示例
  getSampleData() {
    return { label: '测试', value: '示例内容' };
  }
}

然后修改库的模块，只需要导出组件即可：

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

@NgModule({
  imports: [],
  declarations: [FormsLibComponent],
  exports: [FormsLibComponent] // 仅导出组件，服务无需在这里处理
})
export class FormsLibModule { }

方式2：在库模块的providers中声明服务

如果希望服务和库模块绑定（比如模块懒加载时才初始化服务），可以在库模块的providers数组里注册服务：

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

@NgModule({
  imports: [],
  declarations: [FormsLibComponent],
  exports: [FormsLibComponent],
  providers: [FormsLibService] // 在这里注册服务，和模块绑定
})
export class FormsLibModule { }

应用中调用服务 #

不管用哪种方式，应用端只需要：

1. 确保已经导入FormsLibModule（方式2必须导入模块；方式1可选择不导入模块，直接导入服务）
2. 在需要的组件/服务中注入FormsLibService即可使用：

import { Component } from '@angular/core';
import { FormsLibService } from 'forms-lib'; // 从你的库导入服务

@Component({
  selector: 'app-root',
  template: `<h1>调用库服务结果：{{ serviceData | json }}</h1>`
})
export class AppComponent {
  serviceData: any;

  constructor(private formsLibService: FormsLibService) {
    this.serviceData = formsLibService.getSampleData();
  }
}

这样就能正常使用库中的服务啦！

内容的提问来源于stack exchange，提问作者Bruce Wilcox