从另一个模块引用组件

Question

使用Angular 4 atm。 我有一个引用另一个模块组件的问题。

让我有一种叫EngagementModule模块，定义如下：

import { NgModule } from '@angular/core'; 
import { EngagementRoutingModule } from "./engagement.routes"; 
import { CreateEngagementComponent } from "./create-engagement.component"; 
import { EngagementItemComponent } from "./engagement-item.component"; 
import { EngagementListComponent } from "./engagement-list.component"; 
import EngagementFilterPipe from "./engagement-filter.pipe"; 
import { EngagementRouteActivator } from "./engagement-route-activator.service"; 
import { checkEngagementNewDirty } from "../shared/utils"; 
import { EngagementDetailsComponent } from "./engagement-details/engagement-details.component"; 
import { HttpModule } from "@angular/http"; 
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; 
import { TaskService } from "../tasks/task.service"; 
import { UtilsModule } from "../shared/utils.module"; 
import { CommonModule } from "@angular/common"; 
import { EngagementEditComponent } from "./engagement-edit.component"; 
import { TagInputModule } from 'ng2-tag-input'; 
import { ObserverComponent } from "./engagement-details/observer.component"; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    EngagementRoutingModule, 
    UtilsModule, 
    ReactiveFormsModule, 
    TagInputModule, 
    ], 
    exports: [EngagementListComponent, EngagementItemComponent, EngagementFilterPipe], 
    declarations: [ObserverComponent, CreateEngagementComponent, EngagementDetailsComponent, EngagementItemComponent, EngagementListComponent, EngagementFilterPipe, EngagementEditComponent], 
    providers: [EngagementRouteActivator, TaskService, 
    { 
      provide : 'canDeactivateCreateEngagement', 
      useValue : checkEngagementNewDirty 
    }], 
}) 
export class EngagementModule { } 

，并宣布和出口组件EngagementListComponent：

import {Component, OnInit, Inject} from "@angular/core"; 
import {Task,Engagement, TaskStatus, TSToken, ITaskService} from "../model"; 
import {MessageService} from "../shared/message.service"; 
import {TaskService} from "../tasks/task.service"; 
import {ActivatedRoute} from "@angular/router"; 

@Component({ 
    selector : "engagement-list" , 
    templateUrl : "./app/engagements/engagement-list.component.html", 
    providers : [TaskService, MessageService], 
}) 
export class EngagementListComponent implements OnInit { 
(...) 

，在我主要的应用程序模块，林导入此模块状所以：

import { TagInputModule } from 'ng2-tag-input'; 
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; 
import {NgModule} from "@angular/core"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {AppComponent} from "./app.component"; 
import { 
    TaskListComponent, 
    TaskDetailsComponent, 
    TaskRouteActivator, 
    TaskService, 
    TaskAditComponent 
} from './tasks/index'; 
import {routing} from './app.routes'; 
import {HttpModule} from "@angular/http"; 
import BarGraphComponent from "./dashboard/bar-graph.component" 
import {FormsModule} from "@angular/forms"; 
//import {UserInfoComponent} from "./user/user-info.component"; 
//import {UserSettingsComponent} from "./user/user-settings.component"; 
import { NavComponent} from "./nav/nav.component"; 

// errors 
import {Error404Component} from "./errors/404.component"; 

import "./prod"; // import for side effect. 
import { UtilsModule } from "./shared/utils.module"; 
import { AuthService } from "./user/auth.service"; 
import { UsersService } from "./user/users.service"; 
import { GuardsService } from "./shared/guards.service"; 
import { SearchService } from "./shared/search.service"; 
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 
import { CommonModule } from "@angular/common"; 
import { DashboardComponent } from "./dashboard/dashboard.component"; 

/* HMM */ 
import { EngagementModule } from "./engagements/engagement.module"; 

@NgModule({ 
    imports: [CommonModule, BrowserAnimationsModule, routing,FormsModule, HttpModule, UtilsModule], 
    providers: [ 
     TaskRouteActivator, 
     TaskService, 
     UsersService, 
     AuthService, 
     GuardsService, 
     SearchService, 
     TagInputModule, 
     EngagementModule 
    ], 
    declarations: [ DashboardComponent, AppComponent, TaskDetailsComponent, TaskListComponent, TaskAditComponent, BarGraphComponent, Error404Component, /* UserInfoComponent, UserSettingsComponent, */NavComponent], 
    bootstrap: [AppComponent]  
}) 
class AppModule { } 

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

现在，从我所了解的 - 在一个te在AppModule中声明的组件（DashboardComponent）的模板，我应该可以在模板中使用。但是，相反，我越来越：

未处理的承诺拒绝：模板解析错误：“订婚清单” 不是一个已知的元素：

我缺少什么？

Answer 1

将TagInputModule,EngagementModule添加到imports而不是providers。

imports用于导入模块，providers用于服务。