Angular 4-Tasten-Link zu LazyLoading Module Route funktioniert nicht

Question

Ich habe eine Schaltfläche mit einem RouterLink-Anweisung zu einem Lazy Loaded-Modul. Der Link funktioniert jedoch nicht. Während es in der Browser-Adressleiste geladen wird (wenn die Schaltfläche geklickt wird), wird die Komponente nie geladen und in der Konsole erhalte ich einen 404-Fehler. Was mache ich falsch.

Die Funktionalität, die ich erreichen möchte, ist: wenn ich zu/Incidents/5 gehe, um ein ausgefülltes Formular (von Ereignis mit ID = 5 zum Bearbeiten/Aktualisieren) zu erhalten, während ich nach/Incidents/New gehe, um ein leeres zu erhalten Formular, um einen neuen Vorfall einzufügen.

Ich nehme an, dass das Problem wahrscheinlich im IncidentsRoutingModule ist, aber ich kann nicht arbeiten.

Mein Haupt app-Routing-Modul ist die folgende:

const appRoutes: Routes = [ 
    { path: '', redirectTo:'home', pathMatch:'full'}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'incidents', loadChildren : 'app/incidents/incidents.module#IncidentsModule' }, 
    { path: 'patients', loadChildren: 'app/patients/patients.module#PatientsModule' }, 
    { path: 'doctors', loadChildren: 'app/doctors/doctors.module#DoctorsModule' }, 
    { path: 'clinics', loadChildren: 'app/clinics/clinics.module#ClinicsModule' }, 
    { path: 'search', component: SearchComponent }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }) 
    ], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule {} 

Die IncidentsModule ist:

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    IncidentsRoutingModule 
    ], 
    declarations: [ 
    IncidentsComponent, 
    IncidentDetailsComponent, 
    IncidentsListComponent 
    ], 
    providers:[IncidentsService] 
}) 
export class IncidentsModule { } 

Die IncidentsRoutingModule ist:

const incidentsModuleRoutes: Routes = [ 
    { 
    path: '', 
    component: IncidentsComponent, 
    children: [ 
     { 
     path: '', component: IncidentsListComponent, 
     children: [ 
      { 
      path:':id', component: IncidentDetailsComponent 
      }, 

      { 
      path: 'new', component: IncidentDetailsComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild(incidentsModuleRoutes) 
    ], 
    exports: [RouterModule] 
}) 
export class IncidentsRoutingModule { } 

My IncidentsComponent einen Knopf hat mit eine RouterLink-Richtlinie, die nicht funktioniert. Bellow ist mein IncidentsComponent:

@Component({ 
    // selector: 'app-incidents', 
    template: ` 
    <div class="container-fluid"> 
     <h3 style="margin:20px 20px 0px 20px;">Περιστατικά</h3> 
     <button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="/incidents/new"> 
     <i class="fa fa-plus-circle" style="margin-right: 10px"></i> 
     Νέο Περιστατικό 
     </button> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    styleUrls: ['./incidents.component.css'] 
}) 
export class IncidentsComponent { 

    constructor() { 
    } 

} 

Answer 1

Das Problem Zugabe konnte, war, wie ich an der IncidentsRoutingModule vermutet. Ich änderte es zu den folgenden und es funktionierte wie erwartet.

const incidentsModuleRoutes: Routes = [ 
    { 
    path: '', 
    component: IncidentsComponent, 
    children: [ 
     { 
     path: '', component: IncidentsListComponent, 
     }, 
     { 
     path:':id', component: IncidentDetailsComponent 
     }, 
     { 
     path: 'new', component: IncidentDetailsComponent 
     } 
    ] 
    } 
]; 

Offensichtlich, was ich verstanden habe (weiß nicht, ob dies richtig ist, hat es nicht oder es irgendwo gelesen) ist, dass Kinder in faul geladenen Module auf die <router-outlet></router-outlet> Erklärung bezieht. In meiner Situation hatte ich nur eine <router-outlet> innerhalb IncidentsComponent. Daher müssen sich alle Pfade in einem untergeordneten Objekt unter IncidentsComponent befinden. Das Hinzufügen von untergeordneten Objekten unter anderen untergeordneten Komponenten funktioniert vermutlich nur, wenn diese Komponenten auch <router-outlet> Deklarationen haben? Habe ich recht????

Answer 2

ändern es zu

<button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="new"> 
     <i class="fa fa-plus-circle" style="margin-right: 10px"></i> 
     Νέο Περιστατικό 
     </button> 

Sie versuchen useHash: true im forRoot Verfahren Sie Haupt-Routing-Modul