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 {
(...)

在我的主app模块中，我这样导入这个模块：

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);

现在，根据我的理解 - 在AppModule中声明的组件模板（DashboardComponent）中，我应该可以在模板中使用。但相反，我得到了：

未处理的承诺拒绝：模板解析错误：'engagement-list' 不是一个已知元素：

我错过了什么？

Answer 1

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

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

引用另一个模块的组件

1 个答案: