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嵌套路径抛出错误

回答

相关问题