angular - 在 Angular 6 库中使用 NgRx(带有 ngrx-actions 库)

标签 angular angular6 ngrx angular-library

我正在尝试将具有多个模块的 Angular 应用程序拆分为多个(单独的)Angular 库(使用 this guide )，因此我可以在多个 Angular 应用程序中使用这些库。
目前该项目有几个模块，例如:

  • 一个用于身份验证/授权；
  • 一个包含各种表格组件的
  • 一个包含各种过滤器组件
  • 一个包含各种图表组件的
  • ...(我猜你明白了)...

我开始着手将身份验证/授权模块“转换”为一个库，因为我预计这将是最难、最复杂的模块。
现在我面临一些问题，我将在下面解释。

该模块(目前存在)结合使用 NgRx 和 ngrx-actions 来减少样板文件。如前所述(在 the guide 中)，创建了一个库和一个用于测试该库的应用程序。 我将现有模块的所有内容复制到库文件夹中。

必须进行一些调整，因为现有模块从 environment.ts 和 global.ts 读取一些常量，当它用作库时(可能)不存在。

现在我的文件夹结构如下所示，以提供更多上下文(删除了 node_modules):

.
├── README.md
├── angular.json
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── projects
│   ├── auth-lib
│   │   ├── karma.conf.js
│   │   ├── ng-package.json
│   │   ├── ng-package.prod.json
│   │   ├── package-lock.json
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── lib
│   │   │   │   ├── auth-check
│   │   │   │   │   ├── auth-check.component.html
│   │   │   │   │   └── auth-check.component.ts
│   │   │   │   ├── auth-guard.service.ts
│   │   │   │   ├── auth-routing.module.ts
│   │   │   │   ├── auth.module.ts
│   │   │   │   ├── auth.service.ts
│   │   │   │   ├── callback
│   │   │   │   │   ├── callback.component.ts
│   │   │   │   │   └── callback.html
│   │   │   │   ├── interceptors
│   │   │   │   │   └── auth.interceptor.ts
│   │   │   │   ├── permission-guard.service.ts
│   │   │   │   ├── signin
│   │   │   │   │   └── signin.component.ts
│   │   │   │   └── store
│   │   │   │       ├── auth-state.interface.ts
│   │   │   │       ├── auth.actions.ts
│   │   │   │       ├── auth.effects.ts
│   │   │   │       ├── auth.reducers.ts
│   │   │   │       └── auth.store.ts
│   │   │   ├── public_api.ts
│   │   │   └── test.ts
│   │   ├── tsconfig.lib.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── browserslist
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json
└── tslint.json

public_api.ts 包含以下代码:

/*
 * Public API Surface of auth-lib
 */

export * from './lib/auth.module';
export * from './lib/auth-guard.service';
export * from './lib/permission-guard.service';
export * from './lib/auth.service';

auth.module.ts 包含以下代码:

import {NgModule} from '@angular/core';
import {SigninComponent} from './signin/signin.component';
import {AuthRoutingModule} from './auth-routing.module';
import {CallbackComponent} from './callback/callback.component';
import {AuthService, InternalAuthService} from './auth.service';
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {AuthInterceptor} from './interceptors/auth.interceptor';
import {AuthEffects} from './store/auth.effects';
import {EffectsModule} from '@ngrx/effects';
import {AuthStore} from './store/auth.store';
import {AuthCheckComponent} from './auth-check/auth-check.component';
import {NgrxActionsModule} from 'ngrx-actions/dist';
import {StoreRouterConnectingModule} from '@ngrx/router-store';

@NgModule({
  declarations: [
    SigninComponent,
    CallbackComponent,
    AuthCheckComponent
  ],
  imports: [
    AuthRoutingModule,
    NgrxActionsModule.forRoot({auth: AuthStore}),
    EffectsModule.forFeature([AuthEffects]),
  ],
  providers: [
    AuthService,
    InternalAuthService,
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
    StoreRouterConnectingModule,
  ],
  exports: [],
})
export class AuthModule {

}

注意:当模块存在于项目中(而不是作为库)时，这是有效的。
仅供引用:不同的组件正在分派(dispatch)一些操作，例如重定向到 (Auth0) 登录页面。

然后.. 当我想在 app.module.ts(“测试应用程序”)中导入 AuthModule 时，我收到以下错误，我无法解决。 

Error: StaticInjectorError(AppModule)[NgrxActionsModule -> ReducerManager]: 
  StaticInjectorError(Platform: core)[NgrxActionsModule -> ReducerManager]: 
    NullInjectorError: No provider for ReducerManager!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at _createClass (core.js:8429)
    at _createProviderInstance (core.js:8393)

我看到了this GitHub issue和 this Stack Overflow question ，两者都提出了相同的答案，但在我的情况下它们不起作用。

有人知道如何解决这个问题吗？谢谢!

最佳答案

我在之前的帖子中提到的 Stack Overflow 页面和 GitHub 问题页面中的建议不足以解决这个问题，但帮助我“解决”了问题或至少更进一步。

通过导入 StoreModule.forRoot({}) 将抛出另一个异常:

Error: StaticInjectorError(AppModule)[AuthEffects -> Actions]: 
  StaticInjectorError(Platform: core)[AuthEffects -> Actions]: 
    NullInjectorError: No provider for Actions!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at _createClass (core.js:8425)
    at _createProviderInstance (core.js:8393)

导入 EffectsModule.forRoot([]) 后，将返回以下异常:

Error: StaticInjectorError(AppModule)[StoreRouterConnectingModule -> Router]: 
  StaticInjectorError(Platform: core)[StoreRouterConnectingModule -> Router]: 
    NullInjectorError: No provider for Router!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at _createClass (core.js:8425)
    at _createProviderInstance (core.js:8393)

通过导入 RouterModule.forRoot([]) 它将(最终)起作用!
我的 auth.module.ts 现在看起来像这样:

import {NgModule} from '@angular/core';
import {SigninComponent} from './signin/signin.component';
import {AuthRoutingModule} from './auth-routing.module';
import {CallbackComponent} from './callback/callback.component';
import {AuthService, InternalAuthService} from './auth.service';
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {AuthInterceptor} from './interceptors/auth.interceptor';
import {AuthEffects} from './store/auth.effects';
import {EffectsModule} from '@ngrx/effects';
import {AuthCheckComponent} from './auth-check/auth-check.component';
import {StoreRouterConnectingModule} from '@ngrx/router-store';
import {StoreModule} from '@ngrx/store';
import {RouterModule} from '@angular/router';
import {NgrxActionsModule} from 'ngrx-actions/dist';
import {AuthStore} from './store/auth.store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
  declarations: [
    SigninComponent,
    CallbackComponent,
    AuthCheckComponent
  ],
  imports: [
    RouterModule.forRoot([]),
    AuthRoutingModule,
    StoreModule.forRoot({}),
    NgrxActionsModule.forRoot({auth: AuthStore}),
    EffectsModule.forRoot([]),
    EffectsModule.forFeature([AuthEffects]),
    StoreRouterConnectingModule,
  ],
  providers: [
    AuthService,
    InternalAuthService,
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
  ],
  exports: [],
})
export class AuthModule {
}

我现在必须测试的一件事是我是否能够将状态和路由添加到导入 auth 库的 Angular 应用程序，因为在图书馆。我会在测试后更新这篇文章!

关于angular - 在 Angular 6 库中使用 NgRx(带有 ngrx-actions 库)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52200600/

上一篇：angular - 将 Youtube API 与 Angular 6 (Typescript) 结合使用

下一篇：angular - NgRx 选择器过滤器空值

相关文章：

html - Angular 6 Material - 使用组件时使用了哪些类

angular - 响应式(Reactive)表单自定义验证器不显示 Angular6 中的错误

angular - 如何在 Angular 6中实现内容显示更多和显示更少

angular - 使用 props 在 createSelector ngrx 中过滤

javascript - 状态管理概念与其他解决方案

Angular 5 无法读取未定义的属性 'remove'

angular - 在哪里可以找到特定版本的文档

css - Angular 4 TalwindCSS 设置

Angular 7 测试错误- rxjs asyncObject 错误 : Timeout - Async callback was not invoked within 5000ms

javascript - 在 ngrx/effect 中访问商店的正确方法

©2024 IT工具网  联系我们