Angular 混合错误：试图在设置之前获取 AngularJS 注入器

Posted 2023-02-19

【中文标题】Angular 混合错误：试图在设置之前获取 AngularJS 注入器

【英文标题】：Angular Hybrid Error: Trying to get the AngularJS injector before it being set

【发布时间】：2019-01-30 08:34:26

【问题描述】：

如何在 Angular 5 组件中使用 AngularJS 服务？

我有 AngularJS 应用程序，我正在尝试制作混合应用程序，但无法使用 AngularJS 服务洞察 Angular 组件：出现错误

ERROR 错误：试图在设置之前获取 AngularJS 注入器。

我的 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']
;

和登录.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) 部分我收到错误：

尝试在设置之前获取 AngularJS 注入器。

请给我一些建议，我该如何实现 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

【问题讨论】：

你有一个angular标签和一个angularjs标签，你用的是哪个版本的angular？

Angular 版本：5.2.11，AngularJS 版本：1.6.8

【参考方案1】：

这意味着你在组件树的某个地方引入了一个 AngularJS 依赖项。它可能在您的直接组件中，也可能在您的某些依赖项中。

调试：

方法一

在您的 bootstrap 调用之前添加一个 debugger 语句：

it('should render the component', () => 
   debugger;
   bootstrap(Ng2AppComponent);
   ...
 );

打开 JS 控制台后，让测试运行并在调试器位置暂停。 单击停止/暂停图标（在“来源”选项卡的侧边栏中）并选中“异常时暂停”。取消暂停调试器。 调试器应在调用injectorFactory 时停止。使用堆栈资源管理器查找对resolveNgModuleDep 的调用。这些将是递归的，因此堆栈的顶部将更靠近叶节点，而堆栈下方的调用将更靠近正在测试的组件。查找如下行：tokenKey = "ServiceName"。这可能是您的违规服务。 再深入堆栈一层，找出哪个组件试图注入该服务。 在您的测试中，模拟一个提供程序来处理该特定注入。请注意，此代码仅假设一个问题注入。对于多个喷油器问题，您需要对以下情况进行特殊处理：

 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 相比，这可能会或可能不会涉及更少的工作。