[Angular] Почему ошибка error TS2322?

Question

[whiteleaf]

Подскажите, пожалуйста, что я делаю не так, что у меня не работает AuthGuard в Angular 5.

Вроде все делаю правильно, но появилась эта ошибка.

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

Comments

[Ivan Stroykin]

Вы выше 2 раза написали пример AppRoutingModule, вместо AuthGuard

[whiteleaf]

Иван Стройкин, Спасибо Вам за отклик!

Я не заметил что я не обернул AuthGuard в [AuthGuard].

Такая мелочь :) как это часто и бывает

[Ivan Stroykin]

whiteleaf, Бывает) не забудьте еще, что для дочерних роутов нужен canActivateChild ;)

[whiteleaf]

Иван Стройкин, Важный нюанс. Учту!

Если можно, хотел бы еще проконсультироваться у Вас касательно следующего:

Как взаимодействовать с переменными sass через angular? И практикуется ли такое?
К примеру нужно когда страница скролится высота верхнего меню меняется.

И еще хотел спросить сразу касательно скролинга. Как более правильнее ловить event'ы в Angular?

Нашел этот вариант:
brianflove.com/2016/10/10/angular-2-window-scroll-...

Но еще не разобрался в нем. Может есть хорошее и проще альтернативы?

[Ivan Stroykin]

whiteleaf, мы у себя в проектах только scss и используем, никакого чистого css )
для этого в директории /app есть директория /styles, в которой есть файл main.scss, в который импортируются другие scss-файлы. Выглядит так:

main.scss

// Resets
@import 'resets/normalize';
@import 'resets/print';
// Fonts
@import 'fonts/roboto';
// ...

Касательно скроллинга, мы используем Angular Material CDK

[whiteleaf]

Иван Стройкин, меня интересовал сам процесс как поменять, пропарить, данные, а именно - переменную в файле scss, и заменить её из ангуляра. А как работают переменные в sass я вроде знаю. Или я вас не так понял.

[Ivan Stroykin]

whiteleaf, Нее, scss живет своею жизнью и не пересекается с Angular