Angular 7 Routing

Question

Я получаю сообщение об ошибке в моем приложении Angular 7

А вот и ошибка.

Ошибка: неверная конфигурация маршрута «панель мониторинга».Должно быть предоставлено одно из следующих: component, redirectTo, children или loadChildren

Я создаю приложение Time in and Time out с использованием Angular 7.

У меня уже есть asp.Net Core Web API, который обрабатывает вход в систему, и он работал как ожидалось.

Затем я решил добавить dashboard и employees

Затем я добавил файл rout.ts

И это код для класса

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Затем я изменил файл app.module.ts

и добавил

import { RouterModule } from '@angular/router';

Затем я также добавил этот код в imports array

RouterModule.forRoot(appRoutes)

Но после перезагрузки приложения Angular 7 на всякий случай, чтобы проверить, есть ли в нем ошибка.

main.ts: 12 Ошибка: неверная конфигурация маршрута «панель мониторинга».Должно быть предоставлено одно из следующих: component, redirectTo, children или loadChildren в validateNode (router.js: 607) в validateConfig (router.js: 577) в Router.push ../ node_modules / @ angular / router / fesm5 / router.js.Router.resetConfig (router.js: 4108) на новом маршрутизаторе (router.js: 3784) в setupRouter (router.js: 5567) в _callFactory (core.js: 21292) в createProviderInstance (core.js): 21238) в initNgModule (core.js: 21168) в новом NgModuleRef (core.js: 21895) в createNgModuleRef (core.js: 21884)

В чем причина этого?И может кто-нибудь подсказать мне, как решить эту проблему?

Я уже пытался найти решение и попробовал тот, который работает для них, но ошибка все еще там.Что мне нужно для того, чтобы заставить это работать?

Это app-routing.module.ts код

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мой ожидаемый вывод для этого - нет ошибки, поэтому я могу перенаправитьк компоненту панели мониторинга при успешном входе в систему

И это код для app.component.html

<app-login></app-login> 
<router-outlet></router-outlet>

Большое спасибо.

Таким образом, нас

Answer 1

Сама ошибка

говорит о том, что вы должны предоставить свойство component, redirectTo, children или loadChildren объекту appRoute, в котором вы определяете маршруты,

Так что здесь вы должны отсутствовать, чтобы добавить любой из вышеперечисленных.

пример

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';

const routes: appRoutes = [
  { path: 'alerts', loadChildren: './components/alerts/alerts.module#AlertsModule' },
  { path: 'settings/assets', loadChildren: './components/settings/assets/assets.module#AssetsModule' },
  { path: 'dashboard', loadChildren: './components/dashboard/dashboard.module#DashboardModule' },
  { path: 'reports', loadChildren: './components/reports/reports.module#ReportsModule' },
  { path: 'settings/alert', loadChildren: './components/settings/alert/alert.module#AlertModule' },
  { path: 'settings/control-framework', loadChildren: './components/settings/control-framework/control-framework.module#ControlFrameworkModule' },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '**', redirectTo: '/dashboard' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 2

Вы должны создать файл app.routing.ts с маршрутами, мой пример для вас:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import { DefaultLayoutComponent } from './containers';

import { LoginComponent } from './views/login/login.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'crm',
        loadChildren: './views/crm/crm.module#CrmModule'
      },
   ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Удачи!