W
W
whiteleaf2017-12-18 13:49:55
Angular
whiteleaf, 2017-12-18 13:49:55

[Angular] Why error TS2322?

Tell me, please, what am I doing wrong, that AuthGuard does not work in Angular 5 for me.
It seems that I am doing everything correctly, but this error appeared.

ERROR in src/app/app-routing.module.ts(11,7): error TS2322: Type '
{ path: string; canActivate: typeof AuthGuard; component: typeof H
omeComponent; }[]' is not assignable to type 'Route[]'.
  Type '{ path: string; canActivate: typeof AuthGuard; component:
typeof HomeComponent; }' is not assignable to type 'Route'.
    Types of property 'canActivate' are incompatible.
      Type 'typeof AuthGuard' is not assignable to type 'any[]'.
        Property 'includes' is missing in type 'typeof AuthGuard'.

app-routing.module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ShopComponent } from './shop/shop.component';
import { NotFoundComponent } from './not-found/not-found.component';

import { AuthGuard } from './_guards/auth.guard';


const routes: Routes = [
  {
    path: '',
    canActivate: AuthGuard,
    component: HomeComponent
  },
  {
    path: '**',
    canActivate: AuthGuard,
    component: NotFoundComponent
  }
];

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

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

import { HomeComponent } from './home/home.component';
import { ShopComponent } from './shop/shop.component';
import { NotFoundComponent } from './not-found/not-found.component';

import { AuthGuard } from './_guards/auth.guard';


const routes: Routes = [
  {
    path: '',
    canActivate: AuthGuard,
    component: HomeComponent
  },
  {
    path: '**',
    canActivate: AuthGuard,
    component: NotFoundComponent
  }
];

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

AppModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { TopComponent } from './_layout/top/top.component';
import { FooterComponent } from './_layout/footer/footer.component';
import { LeftNavComponent } from './_layout/left-nav/left-nav.component';
import { ContentComponent } from './_layout/content/content.component';
import { HomeComponent } from './home/home.component';
import { ShopComponent } from './shop/shop.component';
import { NotFoundComponent } from './not-found/not-found.component';

import { AuthGuard } from './_guards/auth.guard';


@NgModule({
  declarations: [
    AppComponent,
    TopComponent,
    FooterComponent,
    LeftNavComponent,
    ContentComponent,
    HomeComponent,
    ShopComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question