Question

我正在按照this guide

中的说明将angularjs app升级为角度5

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

这是我的代码和错误

组件

@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();
  }
}

服务

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

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

NG5模块

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模块：

 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)

Answer 1

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

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

  ]

当Angular组件降级为angularjs

1 个答案: