하이브리드 부스트 응용 프로그램의 각도 DI

Question

필자는 Typescript로 작성된 상당한 AngularJS (Angular 1) 애플리케이션을 사용합니다. 나는 새로운 기능을 Angular (Angular 4)로 작성하고 "하이브리드 모드"로 앱을 향상시키는 조치를 취해야한다고 결정했습니다.

이것은 작동합니다 (모든 AngularJS 비트가 정상적으로 작동합니다). 그리고 하나의 Angular 구성 요소를 추가 했으므로 잘 렌더링됩니다.

내 앵글에 각도 서비스를 추가하려고하면 문제가 발생합니다 (지금까지 모든 앵글 4). 각도가 작동하지 않아 보이는 것처럼 튀어 나와 있습니다 ... 오류의 모든 매개 변수를 해결할 수 없습니다.

그러나 구성 요소 생성자에서 형식을 @Inject로 표시하면 제대로 작동합니다.

모든 문서에서는 @Inject를 일상적으로 사용할 필요가 없다는 사실을 지적합니다. 왜 이것이 실패할까요?

내 용어는 AngularJS 서비스를 Angular 구성 요소와 서비스에 주입해야하며,이 상황이 나를 안심시키지 않습니다.

app.module.ts :

// All AngualarJS definitions appear before this section. 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     UpgradeModule, 
    ], 
    declarations: [ 
     AppComponent, 
     OrgSummaryComponent 
    ], 
    providers: [ 
     OrgDetailsService, 
    ], 
    bootstrap: [ 
     AppComponent, 
    ], 
}) 
export class AppModule { 
    ngDoBootstrap() { 
     // Does nothing by design. 
     // This is to facilitate "hybrid bootstrapping" 
    } 
} 

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; 
    upgrade.bootstrap(document.body, [AppModuleName], {strictDi: true}); 
}); 

조직 - details.service.ts :

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

export class OrgDetails { 
    public orgName: string; 
} 

@Injectable() 
export class OrgDetailsService { 

    getOrgDetails() : OrgDetails { 
     const od = new OrgDetails(); 
     od.orgName = "Some Org Name from a REST service"; 
     return od; 
    } 
} 

조직 - summary.component.ts :

import {Component, Inject, OnInit} from "@angular/core"; 
import {OrgDetailsService} from "./org-details.service"; 

@Component ({ 
    selector: "orgsummary", 
    template: "<h2>{{OrgName}}</h2>", 
}) 
export class OrgSummaryComponent implements OnInit { 
    constructor (
     /*@Inject(OrgDetailsService)*/ private orgs: OrgDetailsService, // Only works if I uncomment the @Inject 
    ) { 

    } 

    public OrgName: string; 

    ngOnInit(): void { 
     this.OrgName = `${this.orgs.getOrgDetails().orgName}`; 
    } 
} 

tsconfig.json :

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "target": "es6", 
    "sourceMap": true, 
    "noImplicitAny": true, 
    "declaration": true, 
    "experimentalDecorators": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "**/*.spec.ts" 
    ], 
    "include" : [ 
    "app/**/*.ts" 
    ] 
} 

많은 감사, 제프

Answer 1

은 그냥 tsconfig.json