[問題] 關於巢狀Route

[leochen0818]

抱歉，忙到現在才弄好Sample Project

‘router-outlet’ is not a known element的問題我發現了，

應該要在各別的module裡也要import RouterModule才不會有error，

但現在有另外一個問題時，

它切換的時候會換一整頁XDDD

再麻煩幫我看一下是我哪裡沒寫好XDDD

感謝！！

leochen0818/NestSample

[leochen0818]

OK！我成功了！

我要的巢狀結構，最後是用ui-router達成的，

原本的 'is not known element’的問題，
在父視圖的Module裡import UIRouterModule之後就可以正常讀取了，如下：

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

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

@NgModule({
  imports: [
    CommonModule,
    UIRouterModule // This is point
  ],
  declarations: [
    DashboardComponent
  ],
  exports: [
    DashboardComponent
  ]
})
export class DashboardModule { }

所以總的來說，目前的Routing會是這樣子的：

// 以下是 AppModule
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 { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';

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

// 以下是 AppRoutingModule
import { NgModule } from '@angular/core';
import { UIRouterModule } from '@uirouter/angular';

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

const loginState = {
  name: 'login',
  url: '/login',
  component: LoginComponent
};

const dashboardState = {
  name: 'dashboard',
  url: '/dashboard',
  component: DashboardComponent
};

const homeState = {
  name: 'home',
  url: '/home',
  component: HomeComponent,
};

@NgModule({
  imports: [
    UIRouterModule.forRoot({
      states: [
        loginState,
        dashboardState,
        homeState
      ],
      otherwise: 'dashboard'
    })
  ],
  exports: [ UIRouterModule ]
})
export class AppRoutingModule { }

// 以下是LoginModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

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

// 以下是DashboardModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UIRouterModule } from '@uirouter/angular';

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

@NgModule({
  imports: [
    CommonModule,
    UIRouterModule
  ],
  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 { }

總而言之呢，
就是在會有子視圖的那個Component的Module裡，
記得import UIRouterModule就沒問題了！

感謝所有回覆的大大們 @Kevin @Jonny @Ticore

P.S. 結果 @Jonny 大大的思路是對的！！！

[Kevin]

你原本的寫法，route config 有問題

    path: 'second',
   component: SecondComponent,
    children: [    
      { path: 'fourth', component: FourthComponent }
    ]

這樣子 SecondComponent 的 router-outlet 才可以使用

[leochen0818]

It’s Work!!

我原本那樣子的寫法是從Angular University找來的XDDD

感謝Kevin大大每次都這麼即時且有耐心的回覆我！！

以下連結是範例專案，如果有需要都歡迎自行Clone

leochen0818/NestSample