Angular DI in einer Hybrid-Aufladungsanwendung

Question

Ich habe eine umfangreiche AngularJS (alias Angular 1) -Anwendung, die in Typescript geschrieben wird. Ich habe beschlossen, dass neue Features in Angular (auch bekannt als Angular 4) geschrieben werden sollten und habe die Schritte unternommen, um die App im "Hybrid-Modus" zu verbessern.

Das scheint zu funktionieren (alle AngularJS Bits funktionieren gut) und ich habe eine einzelne Angular-Komponente hinzugefügt und das macht gut.

Das Problem kommt, wenn ich versuche, einen Angular Service zu meinem Angular hinzuzufügen (so alle Angular 4 so weit). Angular funktioniert nicht und spuckt die scheinbar allgegenwärtigen Kann nicht alle Parameter für ... Fehler beheben.

Wenn ich jedoch den Typ im Komponentenkonstruktor mit @Inject markiert, funktioniert es ok.

Die gesamte Dokumentation verweist auf die Tatsache, dass ich routinemäßig @Inject nicht verwenden sollte, also warum scheitert das?

Mein mittelfristiger Bedarf besteht darin, AngularJS-Dienste in die Angular-Komponenten und -Dienste zu integrieren, und diese Situation erfüllt mich nicht mit Zuversicht.

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

org-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; 
    } 
} 

org-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" 
    ] 
} 

Vielen Dank, Jeff

Answer 1

Fügen Sie einfach

"emitDecoratorMetadata": true 

zu Ihrem tsconfig.json