找不到路由页面的角线

Question

我是新手。我正在尝试在页面之间路由我的角度项目。当我转到其他页面时，我将转到主页（http://localhost:4200）。我搜索了一些有关问题的解决方案，但从未解决过问题。也许我的路由页面找不到正确的路径？在这里app.routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
  {
    path: '',
    children: [
      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardModule'},
      {path: 'issue', loadChildren: './pages/issue/issue.module#IssueModule'},
      {path: 'project', loadChildren: './pages/project/project.module#ProjectModule'}
    ]
  },
];

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

app.component.html

<div>
<h1>
Welcome to {{title}}!
</h1>
</div>
<router-outlet></router-outlet>

这里app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app.routing.module';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

dashboard.module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DashboardComponent } from './dashboard.component';
    import { DashboardRoutingModule } from './dashboard.routing.module';



    @NgModule({

      imports: [
        CommonModule,
        DashboardRoutingModule,
       ],
      declarations: [DashboardComponent]
    })
    export class DashboardModule { }
dahsboard.routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {DashboardComponent} from './dashboard.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

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

我的想法是eclipse，因为我正在研究java ee和eclipse中加载的angular插件。

Answer 1

您的惰性加载模块以旧方式导入。您的Angular版本可能不推荐使用这些导入。

旧：loadChildren: './pages/dashboard/dashboard.module#DashboardModule'

==>

新：

loadChildren: import('./pages/dashboard/dashboard.module')
                     .then(mod => mod.DashboardModule

）

尝试这个：

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
    {path: 'dashboard', loadChildren: import('./pages/dashboard/dashboard.module')
         .then(mod => mod.DashboardModule),
     ...
];