如何在 Angular 5 组件中使用 AngularJS 服务?
我有 AngularJS 应用程序,我正在尝试制作混合应用程序但无法使用 AngularJS 服务洞察 Angular 组件:出现错误
ERROR Error: Trying to get the AngularJS injector before it being set.
我的 main.ts 是
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
应用模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
import { SignInComponent } from "./modules/login/components/sign-in/sign-in.component";
import { authServiceProvider } from './shared/angularJS-upgraded-providers';
@NgModule({
declarations: [
AppComponent,
SignInComponent
],
imports: [
BrowserModule,
UpgradeModule,
FormsModule
],
entryComponents: [
SignInComponent
],
providers: [authServiceProvider],
bootstrap: [SignInComponent]
})
export class AppModule {
ngDoBootstrap() {}
}
angularJS-upgraded-providers.ts :
import { InjectionToken } from "@angular/core";
export const AuthService = new InjectionToken<any>('authService');
export function authServiceFactory(i: any) {
return i.get('authService');
}
export const authServiceProvider = {
provide: AuthService,
useFactory: authServiceFactory,
deps: ['$injector']
};
和 sign-in.component.ts :
import { Component, Inject } from '@angular/core';
import {AuthService} from "../../../../shared/angularJS-upgraded-providers";
@Component({
selector: 'sign-in',
template: require('./sign-in.component.html')
})
export class SignInComponent {
constructor(
@Inject(AuthService) private authService: any) {
}
}
当我删除 SignInComponent 构造函数时,部分代码编译良好,但使用 @Inject(AuthService) private authService: any) { } 部分时出现错误:
Trying to get the AngularJS injector before it being set.
请给我一些建议,我可以如何实现 angularJS 服务洞察 Angular 组件。 谢谢
附言我的 package.json :
{
"name": "test",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack-dev-server --port=4200 --open chrome"
},
"dependencies": {
"@angular/common": "^5.2.11",
"@angular/compiler": "^5.2.11",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.11",
"@angular/http": "^5.2.11",
"@angular/platform-browser": "^5.2.11",
"@angular/platform-browser-dynamic": "^5.2.11",
"@angular/router": "^5.2.11",
"@angular/upgrade": "^5.2.11",
"core-js": "^2.5.7",
"reflect-metadata": "^0.1.12",
"rxjs": "^5.5.11",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/jquery": "^3.3.6",
"@types/node": "^8.10.23",
"awesome-typescript-loader": "^5.2.0",
"css-loader": "^1.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.22.1",
"ts-loader": "3.2.0",
"typescript": "^2.9.2",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
AngularJS 版本:1.6.8
最佳答案
这意味着您在组件树的某处引入了 AngularJS 依赖项。它可能位于您的直接组件中,也可能位于线下的某些依赖项中。
调试:
方法一
在 bootstrap
调用之前添加一个 debugger
语句:
it('should render the component', () => {
debugger;
bootstrap(Ng2AppComponent);
...
});
- 打开 JS 控制台,让测试在调试器位置运行和暂停。
- 单击“停止/暂停”图标(位于“来源”选项卡的边栏中)并勾选“出现异常时暂停”。取消暂停调试器。
- 调试器应该在调用
injectorFactory
时停止。使用堆栈资源管理器查找对resolveNgModuleDep
的调用。这些将是递归的,因此堆栈的顶部将更接近叶节点,而堆栈下方的调用将更接近被测试的组件。查找类似以下行:tokenKey = "ServiceName"
。这可能是您的违规服务。 - 再深入堆栈一层,找出哪个组件试图注入(inject)该服务。
- 在您的测试中,模拟一个提供程序来处理该特定注入(inject)。请注意,此代码假定只有一个问题注入(inject)。对于多个注入(inject)器问题,您需要对这些进行特殊处理:
beforeEach(() => {
setupModule({
imports: [
...
],
providers: [
{
provide: '$injector',
useValue: {
get: () => {
return new MockService(); // enhance as needed
},
}
}
],
});
方法二
- 为
$injector
调用模拟一个提供者,并返回一个空对象。
beforeEach(() => {
setupModule({
imports: [
...
],
providers: [
{
provide: '$injector',
useValue: {
get: (serviceName?: string) => {
console.log('looking for serviceName:', serviceName);
return {}; // this will break things differently
},
}
}
],
});
- 查看您的控制台输出以找到有问题的服务/签名。这可能会或可能不会比方法 1 涉及更少的工作。
关于angularjs - Angular 混合错误 : Trying to get the AngularJS injector before it being set,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51994678/