Angular新手求助：独立路由模块配置及AppModule导入报错解决

嘿，作为Angular新手遇到路由配置的问题太正常了，我来帮你搞定这个报错！

你在RouterModule.forRoot(AppRoutes.getRoutes())处报错的核心原因很明确：你把getRoutes()定义成了AppRoutes类的实例方法，但你直接用类名去调用它——实例方法必须先创建类的实例才能调用，直接通过类名调用肯定会报错。

下面给你两种靠谱的解决办法，第一种是Angular官方推荐的写法，第二种适配你原来的类封装思路：

方案一：直接导出路由数组（最常用、官方推荐） #

这是Angular项目里配置路由的标准姿势，不需要用类封装，直接导出符合Routes类型的数组就行：

修改你的app.routes.ts：

import { Routes } from '@angular/router';
import { UsersComponent } from './users/users.component';

// 直接导出路由数组，明确标注类型更规范
export const appRoutes: Routes = [
  { path: 'users', component: UsersComponent }
];

然后在app.module.ts里导入并使用：

import { appRoutes } from './app.routes';
// ...其他必要导入

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // 这里提一句：HttpModule已经被废弃了，只用HttpClientModule就够了
    RouterModule.forRoot(appRoutes)
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案二：把方法改成静态方法（适配你的原有写法） #

如果你坚持想用类来封装路由逻辑，那只需要把getRoutes()改成静态方法，这样就能直接通过类名调用了：

修改app.routes.ts：

import { Routes } from '@angular/router';
import { UsersComponent } from './users/users.component';

export class AppRoutes {
  // 加上static关键字，把方法变成类的静态方法
  static getRoutes(): Routes {
    return [
      { path: 'users', component: UsersComponent }
    ];
  }
}

这样修改后，你原来的app.module.ts代码就能正常运行了，不需要改动其他部分。

最后再补个小提醒：记得把HttpModule删掉哦，它是Angular旧版本的模块，现在已经被HttpClientModule完全替代了，留着反而容易混淆。

内容的提问来源于stack exchange，提问作者Pankaj Bhandarkar