javascript - 混合升压应用中的 Angular DI

Question

我有一个用 Typescript 编写的相当大的 AngularJS(又名 Angular 1)应用程序。我决定应使用 Angular(又名 Angular 4)编写新功能，并采取措施以“混合模式”增强应用程序。

这似乎有效(所有 AngularJS 位都工作正常)，并且我添加了一个 Angular 组件并且渲染良好。

当我尝试将 Angular 服务添加到我的 Angular 中时(到目前为止都是 Angular 4)，问题就出现了。 Angular 无法工作，吐出了看似无处不在的内容无法解析所有参数...错误。

但是，如果我用 @Inject 标记组件构造函数中的类型，那么它就可以正常工作。

所有文档都指出我不需要定期使用 @Inject，那么为什么会失败？

我的中期需求是将 AngularJS 服务注入(inject)到 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});
});

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

非常感谢，杰夫

Answer 1

只需添加

"emitDecoratorMetadata": true

到您的tsconfig.json