我正在尝试将具有多个模块的 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
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 {
}
注意:当模块存在于项目中(而不是库)时,这是有效的。
仅供参考:不同的组件正在调度一些操作,例如重定向到(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)
我看到了这个 GitHub 问题和这个 Stack Overflow 问题,都提出了相同的答案,但它们在我的情况下不起作用。
有没有人知道如何解决这个问题?谢谢!