Angular：'Routes'只是指一个类型，但在这里被用作一个值

Question

今天使用 Angular CLI + Angular Material 的新项目。

要从 'app.module.ts' 文件中的 @angular/router 导入 RouterModule 和 Routes，将 RouterModule 和 Routes 添加到导入中并出现此错误：

ERROR in src/app/app.module.ts(18,5): error TS2693: 'Routes' only refers to a
type, but is being used as a value here.

不知道如何解决这个问题。这是代码。

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationComponent } from './navigation/navigation.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, 
         MatListModule } from '@angular/material';

@NgModule({
declarations: [
  AppComponent,
  NavigationComponent
],
imports: [
  RouterModule,
  Routes,
  BrowserModule,
  BrowserAnimationsModule,
  LayoutModule,
  MatToolbarModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatListModule
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Answer 1

经过更多的阅读和课程，我在 /app 文件夹中创建了一个新的 'app-routing.module.ts' 文件，并放入以下代码，删除了 'app.module.ts' 文件中对 RouterModule 和 Routes 的导入，错误消失：

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

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

@NgModule({

})

export class AppRoutingModule {  }

我从中学到的课程确实说我可以按照我在 OP 中的方式完成，但显然那没有用（除非我遗漏了什么？）。

我想这是 'recommended' 的做法，但现在看起来更像是 必需的 方式。

Answer 2

或多或少如错误所述，Routes 是一个 Type 而不是实例化或可注入对象 - 因此您不能将其导入模块。您可以做的是使用它来声明您的应用程序路由，然后在导入 RouterModule 时使用它们来定义可用路由。

你的错误在这里：

您无法导入Routes - 因为它是TYPE。您只能导入其他模块。

文档很好地描述了模块导入的工作原理，如果您有兴趣：https://angular.io/guide/ngmodules#angular-modularity

这是一个简单的例子。

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

import { AppComponent } from './app.component';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent 
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular：'Routes'只是指一个类型，但在这里被用作一个值

Angular: 'Routes' only refers to a type, but is being used as a value here

angular6