類型X是2個模塊聲明的一部分（Angular 2 RC5）

Question

我正在玩Angular 2 RC5，並遇到了以下問題：

“錯誤：類型WelcomeComponent是2個模塊聲明的一部分：WelcomeModule和AppModule！

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule }  from '@angular/router';
import { WelcomeModule } from './welcome/welcome.module';
import { AppComponent }  from './app.component';
import { 
    routing, 
    appRoutingProviders 
} from './app.routing';

@NgModule({
  imports:      [ 
  BrowserModule, 
  RouterModule, 
  WelcomeModule,
  routing
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})
export class AppModule { }

app.routing.ts

import { 
    Routes,
    RouterModule 
} from '@angular/router';

import { welcomeRoutes } from './welcome/welcome.routing';

const appRoutes: Routes = [
     ...welcomeRoutes
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);

welcome.module.ts

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

import { WelcomeComponent } from './welcome.component';

@NgModule({
    declarations: [ WelcomeComponent ]
})
export class WelcomeModule { }

welcome.routing.ts

import { 
    Routes,
    RouterModule 
} from '@angular/router';

import { WelcomeComponent } from './welcome.component';

export const welcomeRoutes: Routes = [
    { path: 'welcome', component: WelcomeComponent }
];

export const welcomeRoutingProviders: any[] = [];
export const welcomeRouting = RouterModule.forChild(welcomeRoutes);

我可以看到什么角度抱怨， welcomeRoutes需要WelcomeComponent從WelcomeModule來定義， appRoutes引用welcomeRoutes和routing是進口AppModule已WelcomeModule進口的，但我怎么建立一個路線圖跨越多個模塊呢？

我能看到的唯一解決方案是刪除

import { WelcomeModule } from './welcome/welcome.module'

但是這樣會違背首先擁有模塊的整個目的，不是嗎？

Answer 1

通過將聲明移動到常用模塊並將其包含在導出中以便可以從其他模塊中使用，我只需修復此問題。 下面是簡化的代碼示例。

@NgModule({
    imports: [CommonModule],
    declarations: [
        WelcomeComponent
    ],
    exports: [
        WelcomeComponent
    ],
    providers: [
    ]
})

Answer 2

您為root和child加載相同的路由配置，但它們必須是不同的路由配置。 有關完整示例，請參閱https://angular.io/docs/ts/latest/guide/router.html

Answer 3

好吧，我第一次將WelcomeComponent添加到AppModule是通過寫

import { WelcomeModule } from './welcome/welcome.module';

因為WelcomeComponent是該模塊的declarations內部。

然后我通過寫作第二次添加了WelcomeComponent

const appRoutes: Routes = [
     ...welcomeRoutes
];

由於WelcomeComponent是要導航到的組件，它似乎隱式添加到AppModule 。

我通過將app.routing.ts更改app.routing.ts來解決了這個問題

import { 
    Routes,
    RouterModule 
} from '@angular/router';

const appRoutes: Routes = [
    { path: '', redirectTo: '/welcome', pathMatch: 'full' }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);

聲明welcomeRouting為RouterModule.forChild會自動welcome子路由。