Угловые 2 ошибки в определении вложенных маршрутов

Я работаю над приложением Angular 2, используя @angular в ASP.NET Core. У меня есть целевая страница, расположенная на базовом url со своим собственным файлом макета, страницей индекса и контроллером.Угловые 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 и все, что я видел, хочет использовать теперь обсолютное свойство Directives на компонентах, но это ушло в эту версию углового 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 { 
}

Корневая страница, вход в систему и зарегистрировать всю работу, хотя у меня была такая же проблема, когда Я пробовал сделать вход и зарегистрировать детей под учетной записью. Я уверен, что я делаю что-то глупое, и как только мы это выясним, я попробую другое гнездование с этими страницами.

EDIT

Я использую this Visual Studio 2015 template, если это имеет значение. Он работал нормально, пока я не начал добавлять вложенные маршруты.

источник

2016-10-25 Josh

Исходя из вашей ошибки и того, что я вижу в вашем коде RouterModule, в 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», потому что у вас есть «набор инструментов», заданный как базовый href –

Я пробовал это, имея такую же мысль, однако он продолжал загружать неправильную страницу макета. Я смотрю на другие варианты, поскольку я считаю, что замена mvc-макетов не работает. Я думаю, что я попытаюсь использовать торговые макеты внутри углового на основе маршрута, надеясь, что я могу использовать https://stackoverflow.com/questions/34881401/style-html-body-from-web-component-angular-2 для изменить тело – Josh

Угловые 2 ошибки в определении вложенных маршрутов

ответ

Смежные вопросы