Question

我正在尝试使用Angular 9开发Auth Guard，但是当我尝试在浏览器控制台中将其实现到组件中时出现错误：

错误错误：未捕获（承诺）：NullInjectorError：R3InjectorError（SampleModule）[AuthGuard->存储->存储->存储-> 商店]：NullInjectorError：商店没有提供者！ NullInjectorError：R3InjectorError（SampleModule）[AuthGuard->存储-> 商店->商店->商店]：NullInjectorError：没有商店的提供者！在NullInjector.get（core.js：1050）在R3Injector.get（core.js：16521）在R3Injector.get（core.js：16521）在R3Injector.get（core.js：16521）在NgModuleRef $ 1.get（core.js：35539）在R3Injector.get（core.js：16521）在injectInjectorOnly（core.js：905）在Module.ɵɵinject（core.js：915）在Object.AuthGuard_Factory [作为工厂]（auth.guard.ts：17）在R3Injector.hydrate（core.js：16747）在resolvePromise（zone-evergreen.js：793）在resolvePromise（zone-evergreen.js：752）在zone-evergreen.js：854 在ZoneDelegate.invokeTask（zone-evergreen.js：400）在Object.onInvokeTask（core.js：40744）在ZoneDelegate.invokeTask（zone-evergreen.js：399）在Zone.runTask（zone-evergreen.js：168）在排水微任务队列（zone-evergreen.js：570）

这是守卫：

import {
  CanActivate,
  CanActivateChild,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router'
import { Store } from '@ngrx/store'
import { AppState } from '../auth.store/states/app.state'
import { AuthService } from '../auth.services/auth.services'
import { AuthActions } from '../auth.store/actions/auth.actions'

@Injectable({
    providedIn: 'root'
})

export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private store$: Store<AppState>,
              private authService: AuthService) {
  }

这是我的示例模块

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

import { SampleComponent } from './sample.component';
import { AuthGuard } from 'app/auth.app/auth.guards/auth.guard';

const routes = [
    {
        path     : 'sample',
        component: SampleComponent,
        canActivate : [AuthGuard]
    }
];

@NgModule({
    declarations: [
        SampleComponent
    ],
    imports     : [
        RouterModule.forChild(routes),

        TranslateModule,
    ],

    providers:[
        AuthGuard
    ],

    exports     : [
        SampleComponent
    ]
})

export class SampleModule
{
}

这是我的应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import 'hammerjs';
import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';

const appRoutes: Routes = [
    {
        path        : '',
        loadChildren: () => import('./auth.app/auth.module').then(m => m.AuthModule)
    },    
    {
        path        : '',
        loadChildren: () => import('./main/sample/sample.module').then(m => m.SampleModule)
    }
];

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports     : [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // App modules
        LayoutModule,
        // SampleModule,
    ],
    bootstrap   : [
        AppComponent
    ]
})
export class AppModule
{
}

Answer 1

您将不得不将商店添加到导入中：

imports: [
 StoreModule.forRoot(...)
]

NullInjectorError：没有商店的提供者！ AUTH GUARD Angular 9

1 个答案: