угловые маршруты теперь работают правильно - PullRequest
Новая
       5

угловые маршруты теперь работают правильно

0 голосов
/ 28 августа 2018

Я пишу угловое приложение. Внутри приложения две папки: admin и fron-app. Что я хочу, если введите localhost: 4200 / admin, то модуль администратора активируется, и пользователь должен увидеть панель мониторинга (localhost: 4200 / admin / dashboard); если пользователь вводит localhost: 4200 / app, активируется модуль fron-app (localhost: 4200 / app / profile). Теперь, когда я набираю localhost: 4200 / приложение активирует модуль администратора. Что не так?

Это основной модуль 

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    MyDateRangePickerModule,
    RouterModule.forRoot(appRoutes, { useHash: true }),
    NgxPermissionsModule.forRoot(),
    AdminModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [DashboardService, StatisticService, OfficeService, UserLdapService,
    CommissionService, AuthService, AuthGuard, GoalService, UserService, {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

это основные маршруты 

export const appRoutes: Routes = [

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  {
    pathMatch:'full',
    path: 'app',
    loadChildren: 'app/front-app/front-app.module#FrontAppModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

административный модуль 

@NgModule({
    declarations: [
        AdminComponent,
        DashboardComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forChild(adminRoutes),
        NgxPermissionsModule.forRoot(),
    ],
    exports:[
        RouterModule
    ],
    schemas: [NO_ERRORS_SCHEMA],
    providers: [DashboardService, StatisticService, OfficeService, UserLdapService,
        CommissionService, AuthService, AuthGuard, GoalService, UserService, {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true,
        }],
})
export class AdminModule { }

административные маршруты 

export const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        pathMatch: 'full',
        path: '',
        redirectTo: 'dashboard',
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]

  },

];

передние маршруты приложения 

export const frontAppRoutes: Routes = [
  {
    path: '',
    component: FrontAppComponent,
    children: [
      {
        path: 'goals',
        component: GoalsComponent
      },
      {
        path: 'login',
        component: FrontLoginComponent
      },
      {
        path: 'profile',
        component: ProfileComponent
      },
    ]

  },

];

1 Ответ

0 голосов
/ 28 августа 2018

удалить app из пути и добавить redirectTo путь

Демонстрация Stackblitz 

export const appRoutes: Routes = [

  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    pathMatch:'full',
    path: 'app',
    loadChildren: './front-app/front-app.module#FrontAppModule'
  },
  {
    path: '',
    redirectTo: 'app',
    pathMatch: 'full'
  }
]
...