首页 文章

当Angular组件降级为angularjs时,依赖项注入出错

提问于
浏览
0

我正在将angularjs应用程序升级到角度5,如this guide中所述

我有从角度代码引导的混合应用程序,这很顺利 . 作为下一步,我创建了一个angular5组件,它取决于angular5服务 . 我降级了组件并在angularjs中声明为指令 . 我看到的问题是服务没有注入组件 . 如果我从组件中删除服务依赖项,它可以正常工作 .

这是我的代码和错误

Component

@Component({
  selector: 'test-detail',
  template: `
    <h2>Windstorm details! {{test}}</h2>
    <div><label>id: </label>1</div>
  `
})
export class TestComponent { 

  private test:string;
  constructor( private testService:TestService){

  }
  ngOnInit(){
    this.test = this.testService.test();
  }
}

Service:

import { Injectable } from '@angular/core';

@Injectable()
export class TestService{
    test(){
        return "hello";
    }
}

NG5 Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import {TestComponent} from '../ng5/directives/test.directive';
import {TestService} from '../ng5/services/test.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({

  imports: [
    BrowserModule,
    UpgradeModule,
    HttpClientModule
  ],
  declarations:[
    TestComponent
  ] ,
  entryComponents: [
    TestComponent
  ],
  providers:[
    TestService
  ]

})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { 

  }
  ngDoBootstrap() {

    this.upgrade.bootstrap(document.documentElement, ['MyApp']);
  }
}

AngularJS Module:

angular.module("MyApp").directive('testDetail',  downgradeComponent({ component: TestComponent }) as angular.IDirectiveFactory);

启动页面时出现的错误是

uncaught Error: Can't resolve all parameters for TestComponent: (?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getDependenciesMetadata (compiler.js:15699)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getTypeMetadata (compiler.js:15534)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15019)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15847)
    at compiler.js:15317
    at Array.map (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15317)
    at JitCompiler.webpackJsonp.529.JitCompiler._loadModules (compiler.js:34404)
    at JitCompiler.webpackJsonp.529.JitCompiler._compileModuleAndComponents (compiler.js:34365)

1 回答

  • 1

    我在回答我自己的问题 . 以下列方式声明服务解决了问题

    providers:[
        { provide: 'TestService', useClass: TestService }
    
      ]
    

相关问题