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

问题描述

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

• 在组件上进行引导已过时
• provideRouter()也已经过时了

---

---

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

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

我将尽力解释，如有需要，请随时告诉我.

---

我有我的 main.ts 文件，该文件使用以下代码增强了应用程序:

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

我加载了MasterComponent，它加载了一个Header，其中包含一些按钮，这些按钮使我可以浏览我的应用程序，并且现在还包含我的主程序.

我正在按照该指南使用以下 app.routes.ts 来使我的应用以相同的方式工作:

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

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

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

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

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

我的Master组件具有自己的路由定义，其中还包含我要设置的防护. 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 .

---

在我的 header.component.ts 文件中，当我尝试访问任何路由时，都可以正常工作，但是当我尝试访问受保护的路径(/仪表板)时，得到没有提供AuthGuard！错误.

我看到最近的帖子与我的问题相同( NoProviderError在Angular 2中使用CanActivate )，但是对我来说，防护已正确引导至 main.ts 文件，因此我的路由器应该知道AuthGuard应该提供哪些路由? /p>

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

解决方案

实际上，这只是导入中的错字...

我正在输入

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

代替

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

使其无法正常工作，但同时不向我显示任何错误...

(表情)

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.

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

---

---

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

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.

---

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));

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.

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
];

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];

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] },
];

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.

---

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.

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...

I was typing

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

instead of

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

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

(sadface)

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