Angular 2嵌套路徑拋出錯誤

我正在使用@angular在ASP.NET Core中處理Angular 2應用程序。我有一個着陸頁，它位於基本網址上，它有自己的佈局文件，索引頁和控制器。Angular 2嵌套路徑拋出錯誤

我想添加的是我的網站/ toolkit的整個部分。首先，我使用我的內部佈局，索引和控制器將MyProfileComponent放在/ toolkit中。我還創建了一個ProfileComponent駐留在/ toolkit/profile /上：uniquename

問題是，當我運行應用程序，因爲我添加了內部路由後，出現錯誤。

/工具包引發此錯誤

Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'ProfileComponent'

Error: Cannot find primary outlet to load 'ProfileComponent'

at getOutlet (D:\Projects..\node_modules\@angular\router\bundles\router.umd.js:3018:23)

和/工具/資料/ sdfsad拋出這個錯誤

Exception: Call to Node module failed with error: Error: Uncaught (in promise): [object Object]

我是新來的角2，我已經看到的一切讓你在使用現在是組件上的絕對指令屬性，但在此版本的角度2中已消失（@angular是2.0.0版）。我可能做錯事，但這裏有件：

_InternalLayout（多餘的東西去掉了）

<head> 
    <base href="/toolkit" /> 
</head> 
<body class="menubar-top menubar-dark theme-primary"> 
    @RenderBody() 

    @RenderSection("scripts", required: false) 
</body>

/Toolkit/Index.cshtml

@{ 
    Layout = "~/Views/Shared/_InternalLayout.cshtml"; 
} 

<app asp-prerender-module="@Url.Content("ClientApp/dist/main-server")">Loading...</app> 

<script src="@Url.Content("~/dist/vendor.js")" asp-append-version="true"></script> 

@section scripts { 
    <script src="@Url.Content("~/dist/main-client.js")" asp-append-version="true"></script> 
}

app.component.html

<router-outlet></router-outlet>

app.component.ts

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

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
}) 
export class AppComponent { 

}

app.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 

import { AppComponent } from './components/app/app.component' 
import { LandingPageLayoutComponent } from './components/landing/landing-page-layout.component'; 
import { SignInComponent } from './components/account/sign-in.component'; 
import { RegisterComponent } from './components/account/register.component'; 
import { ProfileComponent } from './components/profile/profile.component'; 
import { MyProfileComponent } from './components/profile/my-profile.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     LandingPageLayoutComponent, 
     SignInComponent, 
     RegisterComponent, 
     ProfileComponent, 
     MyProfileComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: 'signin', component: SignInComponent }, 
      { path: 'register', component: RegisterComponent }, 

      { 
       path: 'toolkit', 
       component: MyProfileComponent, 
       children: [ 
        { path: '' }, 
        { path: 'profile/:uniquename', component: ProfileComponent }, 
       ] 
      }, 

      { path: '', component: LandingPageLayoutComponent }, 
      { path: '**', redirectTo: 'error' } 
     ]) 
    ] 
}) 
export class AppModule { 
}

根頁面，登錄和註冊所有的工作，雖然我已經當同樣的問題我嘗試登錄並註冊/帳戶下的孩子。我敢肯定，我正在做一些愚蠢的事情，一旦我們搞清楚了，我會嘗試其他一些嵌套這些網頁。

編輯

我使用this Visual Studio 2015 template如果它很重要。它工作正常，直到我開始嘗試添加嵌套的路線。

來源

2016-10-25 Josh

根據您的錯誤以及我在您的路由器模塊代碼app.module.ts中看到的內容，有兩種可能的解決方案，具體取決於您的目標是什麼。

1）如果在路線「/工具包」，你想看到MyProfileComponent和路線「/工具/資料/：uniquename」（這裏顯示的完整路徑）你想看到ProfileComponent代替MyProfileComponent的那麼你的路由器的代碼需要看起來像：

RouterModule.forRoot([ 
     { path: 'signin', component: SignInComponent }, 
     { path: 'register', component: RegisterComponent }, 
     { 
      path: 'toolkit', 
      children: [ // change here 
       { path: '', component: MyProfileComponent }, // both components are siblings within 'toolkit' path 
       { path: 'profile/:uniquename', component: ProfileComponent } 
      ] 
     }, 
     { path: '', component: LandingPageLayoutComponent }, 
     { path: '**', component: ErrorComponent } // this also needs to be changed to match a component 
    ])

2）如果在路線「工具/資料/：uniquename」你想看到MyProfileComponent和ProfileComponent 嵌套在那麼你的路由器的代碼看起來應該像

RouterModule.forRoot([ 
     { path: 'signin', component: SignInComponent }, 
     { path: 'register', component: RegisterComponent }, 

     { 
      path: 'toolkit', 
      component: MyProfileComponent, 
      children: [ 
       // this line needs to be removed { path: '' }, 
       { path: 'profile/:uniquename', component: ProfileComponent } 
      ] 
     }, 
     { path: '', component: LandingPageLayoutComponent }, 
     { path: '**', component: ErrorComponent } // this also needs to be changed to match a component 
    ])

（2）cont'd-內。然後my-profile.component.ts您template必須有一個<router-outlet></router-outlet>處理嵌套子路由

在這兩種情況下，你path: **'需要具有與它關聯的組件。在進行重定向時，您必須包含pathMatch屬性，例如pathMatch: 'full'

來源

2016-10-25 23:00:45

感謝您的回覆，托馬斯。這是我之後的第一個條件，其中兩個是兄弟姐妹。我改變了我的路由到你的建議，現在當我去/ toolkit，我看到LandingPageComponent而不是MyProfileComponent。/toolkit/profile/asfsdf顯示我的ProfileComponent。我們更接近！ – Josh

在index.html（或者說_InternalLayout）中，嘗試將您的基本標籤更改爲''。我懷疑現在MyProfileComponent是通過'toolkit/toolkit'導航到的，因爲你的'toolkit'設置爲基礎href –

我試過了，有同樣的想法，但是它繼續加載錯誤的佈局頁面。我正在尋找其他選項，因爲我認爲交換mvc佈局並沒有解決問題。我想我會嘗試根據路線交易角度內的佈局，希望我可以使用https://stackoverflow.com/questions/34881401/style-html-body-from-web-component-angular-2來改變身體 – Josh

Angular 2嵌套路徑拋出錯誤

回答

相關問題