Блог

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

И вот в чем ошибка.

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

Я создаю приложение для ввода и вывода времени ожидания с использованием Angular 7.

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

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

Затем я добавил файл routes.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, дочерние элементы или 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>
  

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

Таким образом, мы

вы должны создать файл 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 {}
  

Удачи!

сама ошибка, говорящая о том, что вы должны предоставить свойство component , redirectTo children or 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 {
}