未定义RoutingModuleModule

Question

我是angular的初学者，我想显示链接127.0.0.1/登录，但它给了我一个错误。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule , Routes} from '@angular/router';


import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';
import { TaskFormComponent } from './components/task-manager/task-form/task-form.component';
import { TaskListComponent } from './components/task-manager/task-list/task-list.component';
import { TaskDetailComponent } from './components/task-manager/task-detail/task-detail.component';
import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-item.component';

const appRoute:Routes = [
  {path:'' ,component:TaskManagerComponent}

]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
  ],
  imports: [
    BrowserModule,
       RouterModule.forRoot(appRoute),
       RoutingModuleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

routing-module.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule , Routes} from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';


const routes:Routes=[
   { path : 'login',component:LoginComponent },
   { path : 'task' ,component:TaskManagerComponent }
];

@NgModule({
  declarations: [
    LoginComponent

  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    RoutingModuleModule
  ],
  exports:[RouterModule]
})
export class RoutingModuleModule { }

app.component.html

 <div class="row">
    <div class="col">
        <app-header></app-header>
    </div>
  </div>
  <hr>
  <div class="row mt-5 mb-5">
    <div class="col mx-auto">
      <router-outlet></router-outlet>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col">
      <app-footer></app-footer>
    </div>
  </div>

Answer 1

还请在RouterModule.ts中声明您的所有路线

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule , Routes} from '@angular/router';
    import { LoginComponent } from './components/login/login.component';
    import { TaskManagerComponent } from './components/task-manager/task-manager.component';


    const routes:Routes=[
       { path : 'login',component:LoginComponent },
       { path : 'task' ,component:TaskManagerComponent },
       { path :  '', redirectTo: 'task', pathMatch: 'full'}
    ];

    @NgModule({
      declarations: [
        LoginComponent

      ],
      imports: [
        CommonModule,
        RouterModule.forRoot(routes)
      ],
      exports:[RouterModule]
    })
    export class RoutingModuleModule { }

Answer 2

您忘了在RoutingModuleModule中导入app.module

只需在app.module中添加以下行以导入语句

import { RoutingModuleModule } from './routing-module.module';