- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将具有多个模块的 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/
当包裹在 EmberJS Controller 的 actions 中时,如何从另一个 Action 调用一个 Action ? 使用现已弃用的方式定义操作的原始代码: //app.js App.In
我有一个 Action (一个yaml文件),用于将docker镜像部署到Google Cloud Run。 我希望收到通知构建和推送结果的Slack或电子邮件。 构建操作完成后,如何触发消息操作?
Selenium 的 actions 类中存在的 tick(Action action) 和 tick(Interaction...actions) 方法的用途是什么? 是否与点击任何 webElem
简短的背景故事 我们目前为数百名用户提供对话操作。我们在过去三年中为我们的一位客户开发了这个 Action 作为“工作”。正如我们最近发现的那样,我们会受到对话行为的影响。 当然,我们现在正在研究如何
考虑系统用户可以并发方式执行两个操作,第一个操作 (A1) 仅对用户的订单执行,第二个操作 (A2) 包括在执行时执行 (A1),如下面的使用所述-案例图..((考虑A1完全执行U1,A2完全执行U2
我正在为 android 中的 ActionBar 而苦苦挣扎。 这是我的问题:我的操作项没有显示在操作栏中,而是堆叠在操作溢出中,无论我做什么.. 我花了一天的时间寻找解决方案,但我似乎找不到缺少的
我正在构建一个工作流,其中一个操作为工作流中的一个步骤提供条件。我该如何使用这个值? 该操作的值为空,因此计算结果为 false,并且从未部署过任何内容... jobs: build: s
鉴于您有一些全局 View (例如,显示加载屏幕),您可能希望在许多情况下发生这种情况,为该行为创建一个 Action 创建者/ Action 对还是为相关 Action 创建 reducer 更合适
我有一个使用 DialogFlow 构建的 Actions on Google 代理,其中包含多个操作(例如 actions.intent.MAIN 和 get_day_of_week)。 当我在 3
是否可以从我的 action.yml 文件中引用另一个 GitHub 操作? 请注意,我在这里谈论的是操作,而不是工作流程。我知道这可以通过工作流来完成,但是操作可以引用其他操作吗? 最佳答案 答案似
在 Vuex 操作中,我们有以下实现。 async actionA({ commit, dispatch }) { const data = this.$axios.$get(`/apiUrl`)
我正在将我的应用程序服务器从 Jboss 4.2 迁移到 7.1。我在 Struts 配置中收到以下错误。 struts.xml 中定义的 Action 被调用,而 Action 包中的操作未被调用。
我向 ActLand 发送请求,然后 intercept(),如果没有登录则重定向到 Login.jsp。 struts.xml:
我有一个 Action 创建器,它接受一个 id 和一个回调函数。它向服务器发送请求以执行某些操作并返回一个虚拟操作。我在这里想做的就是调用回调函数并退出,因为该虚拟操作对我来说没有用处,例如喜欢帖子
我已经使用 Html.Action 方法调用了另一个 View 。当用户单击操作链接时,我想在 subview 内使用参数调用相同的操作。 当我写这段代码时,我得到了这个错误信息: Html.Acti
是 public event Action delt = () => { Console.WriteLine("Information"); }; 的重载版本 Action delg = (a, b)
countresultsfrom.addActionListener(new ActionListener() { public void actionPerforme
我刚刚看到一个 brand-new video在 Rx 框架上,一个特别的签名引起了我的注意: Scheduler.schedule(this IScheduler, Action) 在 23:55,
我创建了一个在我的开发者帐户中完美运行的 DialogFlow 应用程序。 但我需要以另一个用户的身份对其进行测试,因此在我的 Google Action 模拟器中,我添加了另一个测试帐户作为项目的所
我正在尝试实现消息存储拦截器以在我的 JSp 上显示 ActionMessage,但无法访问 ActionMessage。有人可以提供一个链接如何实现消息存储拦截器吗? 最佳答案 这是我的一个应用程序
我是一名优秀的程序员,十分优秀!