[問題] 關於巢狀Route

General
1

我的整個App是包在第一層 <router-outlet></router-outlet> or <ui-view></ui-view> 裡面（是的，我兩種方法都試過了，都出現一樣的問題…），
接著當我想要在conponent的HTML裡面再放一個 <router-outlet></router-outlet> or <ui-view></ui-view> 來放子視圖的時候，就遇到下圖的錯誤…

image.png1078×127 11.3 KB

想請問有沒有大大知道或遇過這個問題的？
還請不吝指教，感激不盡！！

Angular版本： 4.2.5
是否有使用Angular-Cli： 是

2

你的 module 關於 Routes 的設定程式碼是怎麼寫的?

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

// Components
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component';

// Classes
import { PageStates } from './classes/page-states';
import { StateUrl } from './classes/state-url';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    children: [
      { path: '', component: DashboardComponent },
      { path: 'home', component: HomeComponent }
    ]
  },
  { path: '**', component: DashboardComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }
4

你的 AppModule 有 import AppRoutingModule 嗎?

5 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Root Component
import { AppComponent } from './app.component';

// Config Module
import { AppRoutingModule } from './app-routing.module';

// Custom Modules
import { LoginModule } from './login/login.module';
import { SharedModule } from './shared/shared.module';
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule,
    SharedModule,
    DashboardModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
6

AppComponent的html裡只有一行 <<router-outlet></router-outlet> 而已

7

看起來沒有什麼不對的地方， 完整的程式碼有嗎?

8

關於Route，完整的code都在上面，其他的部份恕無法提供~"~

另外，在DashboardConponent的HTML，重點部分大概就是

<!--main content-->
<div class="main-content">
  <router-outlet></router-outlet>
</div>
<!--main content end-->

值得一提的是，只要我把<router-outlet></router-outlet>註解掉就沒事，
然後到 http://localhost:4200/dashboard/home 這個路徑下也可以work，只不過是整個View換過去罷了

9

DashboardConponent 裡面有 router-outlet ?
所以 dashboard 下要有另外一個 router-outlet 是這樣子的意思嗎 ?

10

結構大概是這樣子的：

<!-- 一開始只有最外層的 router-outlet，用來切換頁面 -->
<!-- 例如從 LoginComponent 切換到 DashboardComponent -->
<router-outlet></router-outlet>

<!-- 到了DashboardComponent會有巢狀結構 -->
<router-outlet>

  <!-- 這層類似於 DashboardComponent 的 ContainerView -->
  <!-- 但我想要有 Route 的效果，所以才想要這樣用 -->
  <router-outlet></router-outlet>

</router-outlet>
11

這是我遇到巢狀的寫法

12

會不會是因為我的父視圖跟子視圖不是同一個Module中才導致這樣的問題？

13

沒看到完整的東西，我沒有辦法判斷原因是什麼
你可以建立另外一個專案模擬類似的情境，這樣比較容易知道問題出在哪裡

14

會不會是 DashboardModule 內要 import RouterModule

15

謝謝你的建議，剛剛試了一下，無效XDDD

16

好的，稍等我一下！

17

之前 NG2 測試專案有遇到一樣的 Error
像這連結寫的一樣

所有會出現在 router-outlet 的 component
都要宣告在 NgModule 的 declarations 輸出

18

請問您是指在哪個Module的declarations呢～～？

19

自己專案宣告的 Module~

這是你的

 @NgModule({
   declarations: [
     AppComponent
   ],

這是 Kevin 的

 @NgModule({
   declarations: [
     AppComponent,
     DashboardComponent,
     HomeComponent,
     LayoutComponent
   ],
20

想請問，如果那些Component有在各別的Module的declarations裡了的話，還需要在AppModule嗎？
例如：

// Login Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';


import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrowserModule
  ],
  declarations: [LoginComponent],
  exports: [
    LoginComponent
  ]
})
export class LoginModule { }

// DashboadModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

// Component
import { DashboardComponent } from './dashboard.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrowserModule
  ],
  declarations: [
    DashboardComponent
  ],
  exports: [
    DashboardComponent
  ]
})
export class DashboardModule { }

// HomeModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Components
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HomeComponent
  ],
  exports: [
    HomeComponent
  ]
})
export class HomeModule { }

就我的理解，應該是不用才對？！