Question

我正在尝试在Angular中实现路由但是收到错误 Cannot read property 'forRoot' of undefined
我的app.routes.ts文件是

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from '../../components/login/login.component';
import { SignupComponent } from '../../components/signup/signup.component';
import { ResourcesComponent } from '../../components/resources/resources.component';
import { MyApp } from './app.component';
const routes: Routes=[
    {path:'',component:MyApp},
    {path:'login',component:LoginComponent},
    {path:'signup', component:SignupComponent},
    {path:'resources',component:ResourcesComponent},
];
export const routing=RouterModule.forRoot(routes);

app.module.ts文件

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyApp } from './app.component';
import { LoginComponent } from '../../components/login/login.component';
import { SignupComponent } from '../../components/signup/signup.component';
import { ResourcesComponent } from '../../components/resources/resources.component'; 
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './app.routes';

@NgModule({
    declarations:[
        MyApp,
        LoginComponent,
        SignupComponent,
        ResourcesComponent,
        NavbarComponent
    ],
    entryComponents: [MyApp],
    imports:[BrowserModule,RouterModule.forRoot(routes)],
    bootstrap: [MyApp]
})
export class AppModule {}

但是得到了RouterModule和路由的错误，即@ angular / router / index没有导出的成员'RouterModule'和'Routes'

Answer 1

据我所知：https://angular.io/api/router/RouterModule

您应该在RouterModule内使用NgModule。因此，您的文件应导出routes而不是routing：

import { Routes } from '@angular/router';
import { LoginComponent } from '../../components/login/login.component';
import { SignupComponent } from '../../components/signup/signup.component';
import { ResourcesComponent } from '../../components/resources/resources.component';
import { MyApp } from './app.component';
export const routes: Routes=[
    {path:'',component:MyApp},
    {path:'login',component:LoginComponent},
    {path:'signup', component:SignupComponent},
    {path:'resources',component:ResourcesComponent},
];

然后在模块文件中：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

@NgModule({
  imports: [RouterModule.forRoot(routes)]
})
class MyNgModule {}

Answer 2

您还没有提到使用哪个版本的角度。我认为您正在使用（以下）一些弃用的路线。您可以使用上面显示的@Maciej Soabala路线。如果要将路径导出为单独的模块，也可以按照

进行操作

https://angular.io/guide/router#refactor-the-routing-configuration-into-a-routing-module

然后你的代码看起来像

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from '../../components/login/login.component';
import { SignupComponent } from '../../components/signup/signup.component';
import { ResourcesComponent } from '../../components/resources/resources.component';
import { MyApp } from './app.component';
const routes: Routes=[
    {path:'',component:MyApp},
    {path:'login',component:LoginComponent},
    {path:'signup', component:SignupComponent},
    {path:'resources',component:ResourcesComponent},
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class routing{}

然后您可以根据需要在其他模块中导入路由并使用它。

Answer 3

如果您使用 SystemJS 版本 0.20 或更高版本加载模块，请使用以下设置：

System.config({ meta: { "./*": { "esModule": true } } <more settings> });

RouterModule - 无法读取未定义的属性'forRoot'

3 个答案: