“没有 AuthGuard 的提供者！"在 Angular 2 中使用 CanActivate [英] "No provider for AuthGuard!" using CanActivate in Angular 2

问题描述

显然这已经过时了，现在您在 NgModule 中的 providers 数组中提供保护.观看其他答案或官方文档以了解更多信息.

EDIT : Obviously this is outdated, now you provide your guard at the providers array in an NgModule. Watch other answers or official documentation for more information.

• 对组件的引导已经过时
• provideRouter() 也已经过时了

• bootstrapping on a component is outdated
• provideRouter() is outdated as well

我正在尝试使用 Angular2 指南中的登录名和 AuthGuard 在我的项目中设置身份验证:https://angular.io/docs/ts/latest/guide/router.html

I'm trying to setup Authentication in my project, using a login and AuthGuard from the Angular2 guide : https://angular.io/docs/ts/latest/guide/router.html

我正在使用发行版:@angular/router":3.0.0-beta.1".

I'm using the release : "@angular/router": "3.0.0-beta.1".

我会尽量解释清楚，如果您需要更多细节，请随时告诉我.

I'll try to explain as much as possible, feel free to tell me if you need more details.

我有我的 ma​​in.ts 文件，它使用以下代码增强应用程序:

I have my main.ts file which boostraps the app with the following code :

bootstrap(MasterComponent, [
    APP_ROUTER_PROVIDERS,
    MenuService
])
.catch(err => console.error(err));

我加载了 MasterComponent，它加载了一个 Header，其中包含允许我浏览我的应用程序的按钮，它现在还包含我的 main.

I load the MasterComponent, which loads a Header containing buttons that allow me to navigate through my app and it also contains my main for now.

我按照指南使我的应用程序以相同的方式工作，使用以下 app.routes.ts :

I'm following the guide to make my app work the same way, with the following app.routes.ts :

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...MasterRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    AUTH_PROVIDERS
];

以及指南中的 login.routes.ts，它定义了我的 AuthGuard :

And the login.routes.ts from the guide, which defines my AuthGuard :

export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

我的主组件有自己的路由定义，其中还包含我试图设置的守卫.ma​​ster.routes.ts:

my Master component has its own route definition, which also contains the guard I'm trying to setup. master.routes.ts :

export const MasterRoutes : RouterConfig = [
    { path: '', redirectTo: '/accueil', pathMatch: 'full' },

    {
        path: 'accueil',
        component: AccueilComponent
    },

    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

而且我使用的文件与指南相同，它们是 auth.guard.ts、auth.service.ts、login.component.ts 和 login.routes.ts.

And I'm using the same files as the guide, which are auth.guard.ts, auth.service.ts, login.component.ts and login.routes.ts.

在我的 header.component.ts 文件中，当我尝试访问任何路由时，它工作得很好，但是当我尝试访问受保护的路径 (/dashboard) 时，我得到 没有 AuthGuard 的提供者！错误.

In my header.component.ts file, when I try to access any routes, it's working just fine, but when I try to access the guarded path (/dashboard), I get the No provider for AuthGuard! error.

我看到最近的帖子和我的问题一样(NoProviderError在 Angular 2 中使用 CanActivate)，但对我来说，守卫被正确引导到 ma​​in.ts 文件，所以我的路由器应该知道哪些路由应该与 AuthGuard 一起提供，对吗?

I saw the recent post with the same issue as mine (NoProviderError using CanActivate in Angular 2), but to me the guard is bootstraped correctly up to the main.ts file, so my router should know which routes should be provided with the AuthGuard right ?

任何帮助或建议将不胜感激.谢谢！

Any help or advice would be greatly appreciated. Thanks !

推荐答案

其实只是导入中的一个错字...

Actually, it was only a typo in an import...

我正在打字

从'./../Authentification/auth.guard'导入{ AuthGuard };

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

代替

从 './../authentification/auth.guard' 导入 { AuthGuard };

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

使它不起作用但同时不显示任何错误...

making it not working but at the same time not displaying me any error...

(悲伤的脸)

这篇关于“没有 AuthGuard 的提供者！"在 Angular 2 中使用 CanActivate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！