Yakalanmadı (sözde): Hata: 'AchivementComponent'

Question

'u yüklemek için birincil çıkış bulunamıyor Angular2 uygulaması geliştiriyorum ve yönlendirme yapılandırmasında takılıyorum. Yönlendirme ve Gezinme ile ilgili resmi belgelere razı oldum ve bunları uygun şekilde kullandım. Dolambaçlı bir yapıya sahiptir.

-Login Page 
-Home Page 
    |-Achievement 
    |-Task 

Ana sayfa yollarını korumak için auth guard kullanıyorum. Ana sayfada çocuk bileşenleri arasında gezinmek için bir başlık ve bağlantılar vardır. Şu anda bir bağlantıyı tıklatırsanız, tüm ana sayfayı çocuk bileşeniyle yükler, da bu hata verir EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AchievementComponent' Her şeyi kontrol ettim ve doğru görünüyor, ancak bunun için herhangi bir neden bulamıyorum.

app-routing.module.ts

.. 
@NgModule({ 
    imports:[ 
     RouterModule.forRoot([ 
      { path: 'login', component: LoginComponent }, 
      { path: 'home',  component: HomeComponent, canActivate [LoggedInGuard], 
       children:[ 
        { path: 'achievement', component:AchievementComponent }, 
        { path: 'task', component:TaskComponent }, 
        { path: '', redirectTo:'achievement', pathMatch:'full' } 
       ] 
      }, 
      { path: '',   redirectTo:'home', pathMatch:'full' }, 
     ]) 
    ], 
    exports:[ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule { } 

app.module.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     AppRoutingModule, 
     AngularFireModule.initializeApp(firebaseConfig,firebaseAuthConfig), 
    ], 
    declarations: [ 
     AppComponent, 
     LoginComponent, 
     HomeComponent, 
     AchievementComponent, 
     TaskComponent, 
    ], 
    providers: [ 
     UserService, 
     DataService, 
     LoggedInGuard, 
     StorageService 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

app.component.html dosya contails sadece <router-outlet></router-outlet> etiketi.

home.component.html

<div *ngIf="validUser"> 
    ....... 
    <nav> 
     <a routerLink="achivement" >Achivement</a> 
     <a routerLink="task" >Task</a> 
    </nav> 
    <router-outlet></router-outlet> 
</div> 

screen shots

kimse aksi sonra,

Answer 1

Bu hata nedeni, home.component.html dosyasındaki *ngIf bölümdür. Başlangıçta validUser değişkeni false ise, kullanıcı doğrulandıktan sonra validUser değeri true olarak değiştirilmiştir. Bu nedenle

, başında validUser değeri true değiştirildi ve bağlantının biri hem kök bileşeni ve çocuk bileşenlerinin tıklandığında kez yüklendikten sonra, çocuk bileşenlerini yüklemek için hiçbir yönlendirici-çıkış vardır.

Answer 2

Ben çocuk yolları içinde birinci konumda path: '', redirectTo: 'achievment' ... rota devam etmeliyiz bir çözüm verebilir rotaya sahip bir eşleşme .210 yönlendirici de çalışması gerekir

{ path: 'achievement', component:AchievementComponent, pathMatch: 'full' }, 

için pathMatch: 'full' ekleme maçında

{ path: '', redirectTo:'achievement', pathMatch:'full' } 

ekleme olacaktır.