CODEWITHSUNDEEP
angular6
Ticdoc
Ticdoc

Reputation: 268

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

Fresh project using Angular CLI + Angular Material today.

Went to import RouterModule and Routes from @angular/router in the 'app.module.ts' file, added RouterModule and Routes to imports and got this error:

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.

Not sure how to fix this. Here is the code.

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 { }

Upvotes: 0

Views: 5743

Answers (2)

Steve Land
Steve Land

Reputation: 4862

More or less as the error describes, Routes is a Type as opposed to an instantiated or injectable object - so you cant import it into a module. What you can do is use it to declare your app routes and then use those when importing the RouterModule in order to define the available routes.

Your mistake is here:

enter image description here

You cannot import Routes - because it is a TYPE. You may only import other Modules.

The docs have a good description of how module imports work, if you're interested: https://angular.io/guide/ngmodules#angular-modularity

Here is a simple example.

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 { }

Upvotes: 1

Ticdoc
Ticdoc

Reputation: 268

After some more reading and courses, I created a new 'app-routing.module.ts' file in the /app folder, and put in the following code, removed the imports for RouterModule and Routes in the 'app.module.ts' file, and the error disappeared:

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

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

@NgModule({

})

export class AppRoutingModule {  }

The course I learned this from, however did say that I could have done it the way I did in the OP, but obviously that did not work (unless I was missing something?).

I guess this is the 'recommended' way of doing it, but now it really seems more like the required way to do it.

Upvotes: 0

Related Questions