NullInjectorError:没有InjectionToken ToastConfig的提供商！用于角+电子项目的茉莉花规范
NullInjectorError:没有InjectionToken ToastConfig的提供商！用于角+电子项目的茉莉花规范
提问于 2020-07-15 12:39:28
问题
大家好！第一次在这里问问题，希望能得到一些帮助。我目前正在开发一个Electron+Angular应用程序，并最终准备测试所有的服务和组件。在尝试启动与WebStorm一起创建的示例规范以及组件和服务时，我面临当前的错误：
NullInjectorError: StaticInjectorError(DynamicTestModule)[InjectionToken ToastConfig]:
StaticInjectorError(Platform: core)[InjectionToken ToastConfig]:
NullInjectorError: No provider for InjectionToken ToastConfig!这是我试图运行的简单测试文件
import {TestBed} from '@angular/core/testing';
import {CognitoService} from './cognito.service';
import {ToastrModule, ToastrService} from 'ngx-toastr';
describe('CognitoService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ToastrModule.forRoot()],
providers: [
CognitoService,
{provide: ToastrService, useClass: ToastrService}
]
}).compileComponents();
});
it('should be created', () => {
const service: CognitoService = TestBed.get(CognitoService);
expect(service).toBeTruthy();
});
});这是我从运行测试中获得的堆栈跟踪
NullInjectorError: StaticInjectorError(DynamicTestModule)[InjectionToken ToastConfig]:
StaticInjectorError(Platform: core)[InjectionToken ToastConfig]:
NullInjectorError: No provider for InjectionToken ToastConfig!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ InjectionToken ToastConfig ] })
at <Jasmine>
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:724:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:2093:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:2037:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:1941:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:2093:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:2037:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:1941:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20895:1)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:21584:1)
at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:627:1)这是我在解决方案中使用的当前应用程序模块，因为我已经看到它可能依赖于在这里正确导入ToastrModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { ModalModule, TooltipModule } from 'ngx-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import { LayoutModule } from './layout/layout.module';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ConfirmationDialogComponent } from './shared/confirmation-dialog/confirmation-dialog.component';
import {SharedModule} from './shared/shared.module';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NoopAnimationsModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
SharedModule,
LayoutModule,
ToastrModule.forRoot({
positionClass: 'toast-top-full-width'
}),
TooltipModule.forRoot(),
ModalModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
],
entryComponents: [ConfirmationDialogComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }我试过什么
- 验证了
ToastrModule.forRoot在导入部分
中。
- 在tsconfig.spec.json中删除/添加了"jasmine“、"jest”，这是
tsconfig.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}- 尝试了npm更新
- 试图安装@type/jasmine和@type/jest
任何帮助都将不胜感激，谢谢提前！
PS:如果你需要更多的信息，我会尽快添加
回答 6
Stack Overflow用户
发布于 2020-11-06 11:07:02
尝试指定烤面包机的位置，否则会产生空注入错误。
app.module.ts
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
FormsModule,
BsDropdownModule.forRoot(),
ToastrModule.forRoot({
positionClass :'toast-bottom-right'
})
],Stack Overflow用户
发布于 2020-10-05 18:03:22
const toastrService = {
success: (
message?: string,
title?: string,
override?: Partial<IndividualConfig>
) => {},
error: (
message?: string,
title?: string,
override?: Partial<IndividualConfig>
) => {},
};在提供程序数组中使用存根
{ provide: ToastrService, useValue: toastrService }Stack Overflow用户
发布于 2021-03-11 15:31:15
无法复制，但使用ToastrModule.forRoot()对我有效。
但我这样做了，我的自定义服务缠绕在Toastr周围，并像这样使用它。
providers: [
{ provide : ToasterNotificationService,
useClass : ToasterStub
}
]ToasterStub类是：
class ToasterStub {
showSuccess(message: string, title: string): void {}
showError(message: string, title: string): void {}
showInfo(message: string, title: string): void {}
showWarning(message: string, title: string): void {}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62915060
复制相关文章
相似问题
腾讯云开发者
