路由问题

Question

我正在使用Angular 6，并且遇到布线问题。我目前有我的登录和产品模块。我正在尝试为每个模块创建模块和路由文件（用于登录的单独文件和用于Produkt的单独文件）。我想在下面做：

1. 登录页面是我的第一页。
2. 我从App.component.html渲染所有模块（产品和更多模块）

但是我无法从app.component.html路由到产品搜索页面。遇到错误-Cannot match any routes. URL Segment: 'rullko/produkt/search'

我知道这是一个小错误，但我无法弄清楚。

有人可以告诉我如何实现吗？

下面是我的代码。

App.component.html

<div class="app-container">
  <mat-toolbar color="warn" class="mat-elevation-z6">
    <button mat-button #mybutton (click)="start.toggle()" fxShow.sm="true" fxShow.gt-sm="false" *ngIf="(!sidenavOpened)" [disableRipple]="true">
      <mat-icon>menu</mat-icon>
    </button>
    <a routerLink="['/rullko']" class="app-name">
      <img class="logo" src="" alt="">{{ 'Werbe und Produktdatenbank' }}
    </a>
    <span class="fill-remaining-space"></span>
    <div class="toolbar-element clickable" (click)="logout()">
      <mat-icon>power_settings_new</mat-icon>
    </div>
  </mat-toolbar>

  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav [(mode)]="over" [(opened)]="opened" #start class="mat-elevation-z2">
      <mat-nav-list>
        <mat-accordion>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{ 'Flyer Menu' }}
              </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-panel-description>
              <a routerLink="['/rullko/hamm/flyerSearch']">
                <mat-icon>search</mat-icon>
                {{ 'Search' }}
              </a>
            </mat-panel-description>
          </mat-expansion-panel>

          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{ 'Werbedata Menu' }}
              </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-panel-description>
              <a routerLink="['/rullko/werbedata/flyerSearch']">
                <mat-icon>search</mat-icon>
                {{ 'Create' }}
              </a>
            </mat-panel-description>
            <mat-panel-description>
              <a routerLink="['/rullko/werbedata/flyerSearch']">
                <mat-icon>search</mat-icon>
                {{ 'Search' }}
              </a>
            </mat-panel-description>
          </mat-expansion-panel>

          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{ 'Produkt Menu' }}
              </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-panel-description>
              <a mat-list-item [routerLink]="['/rullko/produkt/search']">
                <mat-icon>search</mat-icon>
                {{ 'Search' }}
              </a>
            </mat-panel-description>
          </mat-expansion-panel>
        </mat-accordion>
      </mat-nav-list>
    </mat-sidenav>
    <div class="wrapper" #wrapper [ngClass]="{'wrapper': true, 'wrapper2': !loggedIn}">
      <router-outlet></router-outlet>
    <div class="push"></div>
  </div>
      <mat-sidenav-content>
      </mat-sidenav-content>
  </mat-sidenav-container>
</div>

App.routing.ts

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'produkt',
    loadChildren: './produkt/produkt.module#ProduktModule'
  },
 {
    path: '**',
    redirectTo: 'rullko'
  }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

App.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AuthenticationModule,
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    HttpModule,
    JsonpModule,
    HttpClientModule,
    routing
  ],
  providers: [
    AuthGuard,
    ProduktService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Produkt.module.ts

@NgModule({
  imports: [
    CommonModule,
    MatCardModule,
    produktContentRouting
  ],
  declarations: [
    SearchComponent
  ]
})
export class ProduktModule { }

Produkt.routing.ts

const produktRoutes: Routes = [
  {
    path: 'search',
    component: SearchComponent,
    canActivate: [AuthGuard]
  },
];

export const produktContentRouting: ModuleWithProviders = RouterModule.forChild(produktRoutes);