Тип X является частью деклараций из 2 модулей (Angular 2 RC5)

Я играю с Angular 2 RC5 и столкнулся с следующей проблемой:

"Ошибка: Тип WelcomeComponent является частью деклараций из двух модулей: 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);

Я вижу, о чем жалуется Angular, welcomeRoutes требует WelcomeComponent из WelcomeModule для определения, appRoutes ссылки welcomeRoutes и routing импортируется в AppModule, у которого есть WelcomeModule импортировано, но как я должен строить график маршрутов, охватывающий несколько модулей, тогда?

Единственное решение, которое я вижу, - удалить

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

но такой тип не будет игнорировать всю цель создания модулей, не так ли?

Ответ 1

Вы загружаете ту же конфигурацию маршрута для root и child, но они должны быть разными конфигурациями маршрутов. Полный пример см. В https://angular.io/docs/ts/latest/guide/router.html

Ответ 2

Эта проблема была просто исправлена для меня, переместив объявление в общедоступный модуль и включив его в экспорт, чтобы его можно было использовать из других модулей. Пример упрощенного кода ниже.

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

Ответ 3

Ну, в первый раз, когда я добавил WelcomeComponent в AppModule, было написано

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

потому что WelcomeComponent находится внутри declarations этого модуля.

Затем я добавил WelcomeComponent второй раз, написав

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

как WelcomeComponent является компонентом для перехода к нему, и он кажется, что он добавлен в AppModule неявно.

Я решил проблему, изменив 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 дочерний маршрут.