angular - Angular - 导入和使用自定义模块 - 出现 StaticInjector 错误

Question

我有一个具有多项目文件夹结构的 Angular 7 项目。我为每个项目创建了一个模块。对于此示例，假设我有两个项目，一个主项目和一个子项目。

我的主项目.module.ts：

//main-project.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MainProjectComponent } from './main-project.component';
import { SubProjectModule } from '../../../sub-project/src/app/sub-project.module';
import { routing } from './main-project-routing.module';

@NgModule({
  declarations: [
    MainProjectComponent
  ],
  imports: [
    BrowserModule,
    routing,
    SubProjectModule
  ],
  providers: [],
  bootstrap: [MainProjectComponent]
})
export class MainProjectModule { }

我的子项目.module.ts：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { routing } from "./sub-project-routes.routes";
import { StatusComponent } from "./components/status.component";
import { SubProjectService } from "./services/sub-project.service";

@NgModule({
  declarations: [
    SubProjectComponent,
    StatusComponent
  ],
  imports: [
    BrowserModule,
    routing,
  ],
  providers: [SubProjectService],
  bootstrap: [SubProjectComponent]
})
export class SubProjectModule { }

据我了解，如果我在 MainProjectModule 中导入 SubProjectModule，我不应该在 MainProject 模块文件中添加 SubProject 专门使用的服务或组件 - 这是正确的吗？

现在，如果我尝试创建 SubProjectComponent（它使用在 SubProjectModule 的声明部分中声明的 StatusComponent），我会收到以下错误：

StaticInjectorError(MainProjectModule)[StatusComponent -> SubProjectComponent]: No provider for SubProjectComponent!

这是我的 SubProjectComponent 模板：

<h2>This is the SubProjectComponent page.</h2>
<status></status> <!--'status' is the html selector for the StatusComponent-->

我最近将一个旧的 Angular 2 项目升级到 Angular 7，所以重组并不太顺利。我到底做错了什么？

标签： angulardependency-injectionangular7

Answer 1

为了使用您的组件，SubProjectModule您需要export这些组件。

@NgModule({
   declarations: [
      SubProjectComponent,
      StatusComponent
   ],
   imports: [
      BrowserModule,
      routing,
   ],
   exports: [
      SubProjectComponent,
      StatusComponent
   ],
   providers: [SubProjectService],
   bootstrap: [SubProjectComponent]
})
export class SubProjectModule { }