Angular 混合错误:尝试在设置之前获取 AngularJS 注入器 [英] Angular Hybrid Error: Trying to get the AngularJS injector before it being set

问题描述

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

I have AngularJS application and i am trying to make hybrid app but not able to use AngularJS service insight Angular component : getting error

错误错误:在设置之前尝试获取 AngularJS 注入器.

ERROR Error: Trying to get the AngularJS injector before it being set.

我的 main.ts 是

my main.ts is

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 :

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 :

and 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) { } 部分时，我收到错误:

When I remove SignInComponent constructor part code compiles well but with @Inject(AuthService) private authService: any) { } part I am getting an error :

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

Trying to get the AngularJS injector before it being set.

请给我一些建议，我可以如何实现 angularJS 服务洞察 Angular 组件.谢谢

Please give me some suggesting how can I implement angularJS service insight Angular component. Thanks

附言我的 package.json :

P.S. my 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

And AngularJS version : 1.6.8

推荐答案

这意味着您正在组件树中的某处引入 AngularJS 依赖项.它可能在您的直接组件中，或者在后续的某些依赖项中.

This means you are pulling in an AngularJS dependency somewhere in your component tree. It may be in your immediate component or some dependency further down the line.

调试:

方法一

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

Add a debugger statement immediately before your bootstrap call:

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

1. 打开 JS 控制台，让测试运行并在调试器位置暂停.
2. 点击停止/暂停"图标(在来源"选项卡的侧栏中)并选中在异常情况下暂停".取消暂停调试器.
3. 调试器应该在调用 injectorFactory 时停止.使用堆栈浏览器查找对 resolveNgModuleDep 的调用.这些将是递归的，因此堆栈顶部将更接近叶节点，而堆栈更下方的调用将更接近您正在测试的组件.查找类似以下的行:tokenKey = "ServiceName".这可能是您的违规服务.
4. 再深入堆栈一层，找出哪个组件试图注入该服务.
5. 在您的测试中，模拟一个提供程序来处理该特定注入.请注意，此代码仅假设一个问题注入.对于多个注射器问题，您需要对以下情况进行特殊处理:

1. With your JS Console open, let the test run and pause at the debugger location.
2. Click the Stop/Pause icon (in the sidebar on the 'sources' tab) and checkmark "Pause on Exceptions". Unpause the debugger.
3. The debugger should stop within a call to injectorFactory. Use the stack explorer to find calls to resolveNgModuleDep. These will be recursive, so the top of the stack will be closer to a leaf node, while calls further down the stack will be closer to your component being tested. Look for lines like: tokenKey = "ServiceName". This is potentially your offending service.
4. Dive down the stack one more layer to find which component tried to inject that service.
5. Within your test, mock out a provider to handle that specific injection. Note that this code assumes only one problem injection. For multiple injector issues, you will need to special case these:

 beforeEach(() => {
   setupModule({
     imports: [
       ...
     ],
     providers: [
       {
         provide: '$injector',
         useValue: {
           get: () => {
             return new MockService();  // enhance as needed
           },
         }
       }
     ],
   });

方法二

1. 模拟 $injector 调用的提供者，并返回一个空对象.

1. Mock out a provider for the $injector call, and return an empty object.

beforeEach(() => {
   setupModule({
     imports: [
       ...
     ],
     providers: [
       {
         provide: '$injector',
         useValue: {
           get: (serviceName?: string) => {
            console.log('looking for serviceName:', serviceName);
            return {};  // this will break things differently
           },
         }
       }
     ],
   });

1. 查看您的控制台输出以查找有问题的服务/签名.这可能会或可能不会比方法 1 涉及的工作更少.

这篇关于Angular 混合错误:尝试在设置之前获取 AngularJS 注入器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！