Question

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

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

错误错误：尝试在设置AngularJS注射器之前获取它。

我的main.ts是

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module：

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-upgradeed-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）私有authService：任何）{}部分，我都会收到错误消息：

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

请给我一些建议，说明如何实现angularJS服务见解Angular组件。谢谢

P.S。我的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

Answer 1

这意味着您将在组件树中的某个位置引入AngularJS依赖关系。它可能在您的直接组件中，也可能在某些依赖项中。

要调试：

方法1

在您的debugger通话之前添加bootstrap语句：

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
           },
         }
       }
     ],
   });

方法2

为$injector调用模拟提供程序，并返回一个空对象。

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

查看控制台输出以查找有问题的服务签名。请注意，您可能有多个候选者使用相似的方法，因此，与方法1相比，这可能会导致更多的工作。

Angular Hybrid错误：尝试在设置之前获取AngularJS注入器

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

1 个答案: