尝试在 Angular 中进行路由时出现问题

Question

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

const routes: Routes = [
{path: 'login', component: LoginComponent},
{path:'forget-password', component: ForgetPasswordComponent},
{path:'**', component: NotFoundComponent},
{path: '' , redirectTo : '/login', pathMatch: 'full'}
];

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

*

这是我的代码，但它说，*

编译有问题：

错误

src/app/app-routing.module.ts:5:28 - 错误 TS2304：找不到名称“LoginComponent”。

5 {路径：'登录'，组件：LoginComponent}，~~~~~~~~~~~~~~~

错误

src/app/app-routing.module.ts:6:37 - 错误 TS2304：找不到名称“ForgetPasswordComponent”。

6 {路径：'忘记密码'，组件：ForgetPasswordComponent}，~~~~~~~~~~~~~~~~~~~~~~~~

错误

src/app/app-routing.module.ts:7:24 - 错误 TS2304：找不到名称“NotFoundComponent”。

7 {路径:'**',组件:NotFoundComponent},~~~~~~~~~~~~~~~~~~

**

在我的 app.component.html 中，我还有以下代码：

<router-outlet></router-outlet>

**

这是我第一次尝试角度路由，并且能够为我创建的组件创建路由。

Answer 1

您必须导入 AppRoutingModule 中使用的所有组件。

如果不是，您可以使用 auth 文件夹中的终端创建所有组件

ng g auth/[component_name],

这是 AppRoutingModule 的代码。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login.component';
import { ForgetPasswordComponent} from './auth/forget-password.component';
import { NotFoundComponent} from './auth/not-found.component';

const routes: Routes = [
{path: 'login', component: LoginComponent},
{path:'forget-password', component: ForgetPasswordComponent},
{path:'**', component: NotFoundComponent},
{path: '' , redirectTo : '/login', pathMatch: 'full'}
];

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