那些遇到过的问题

在 Angular 6 库中使用 NgRx（带有 ngrx-actions 库）

Ste*_*ver 6 ngrx angular angular-library angular6

我正在尝试将具有多个模块的 Angular 应用程序拆分为多个（单独的）Angular 库（使用本指南），因此我可以在多个 Angular 应用程序中使用这些库。
目前该项目有几个模块，例如：

  • 一个用于认证/授权；
  • 一个包含所有类型的表格组件
  • 一个包含所有类型的过滤器组件
  • 一个包含所有类型的图表组件
  • ......（我想你明白了）......

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

该模块（目前存在）结合使用 NgRx 和 ngrx-actions 来减少样板。就像（在指南中）提到的那样，创建了一个库和一个用于测试库的应用程序。我将现有模块的所有内容复制到库文件夹中。

必须进行一些调整，因为现有模块从 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
Run Code Online (Sandbox Code Playgroud)

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';
Run Code Online (Sandbox Code Playgroud)

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 {

}
Run Code Online (Sandbox Code Playgroud)

注意：当模块存在于项目中（不是作为库）时，这是有效的。
仅供参考：不同的组件正在调度一些操作，例如重定向到 (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)
Run Code Online (Sandbox Code Playgroud)

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

有没有人知道如何解决这个问题？谢谢！

Ste*_*ver 7

我在之前的帖子中提到的 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)
Run Code Online (Sandbox Code Playgroud)

导入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)
Run Code Online (Sandbox Code Playgroud)

通过导入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 {
}
Run Code Online (Sandbox Code Playgroud)

我现在必须测试的一件事是，我是否能够向正在导入 auth 库的 Angular 应用程序添加状态和路由，因为在库中导入了多个forRoot带有空数组的语句。我会在测试后更新这篇文章！

归档时间：

查看次数：

4695 次

最近记录：

7 年，2 月 前
NullInjectorError:没有ReducerManager的提供程序 9
更多相关链接
相关归档
你似乎不依赖于"@ angular/core".这是一个错误 133
Angular cast选择值为int 33
多个自动完成在同一页面中,角度为4,角度为4 18
Angular 2给出SystemJS找不到/ angular2/http模块 17
Angular 4.一系列http请求被取消 16
警告:无法解析UsersPermissionsService的所有参数这将成为Angular v5.x中的错误 15
访问ViewChildren查询列表的第n个子元素（角度） 8
在angular5 / 6中单击按钮时如何从url下载文件 7
'Actions'类型中不存在属性'payload' 6
Angular 应用程序中的 ngrx 导入 5
难疑归档
为什么Google会在(1)之前提前; 他们的JSON回复？ 3940
我是否施放了malloc的结果？ 2318
如何在Python中小写一个字符串？ 1908
ssh"权限太开放"错误 1859
我怎样才能找到带有Mathematica的Waldo？ 1538
从Git提交中删除文件 1484
为什么Java有瞬态字段？ 1406
安全地将JSON字符串转换为对象 1298
自定义HTTP标头:命名约定 1051
什么是"Linting"？ 1044