Javascript 混合升压应用中的角度DI

我有一个相当大的AngularJS（又名Angular1）应用程序，它是用Typescript编写的。我已经决定新功能应该用Angular（又名Angular 4）编写，并已采取步骤在“混合模式”下提升应用程序

这似乎是可行的（所有AngularJS位都很好），我添加了一个角度组件，渲染效果很好

当我尝试将角度服务添加到我的角度服务时，问题就出现了（到目前为止，所有的角度服务都是4）。Angular无法工作，吐出似乎无处不在的 无法解析…的所有参数。错误

但是，如果我在components构造函数中用@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});
});

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

非常感谢,， 杰夫

只需添加

"emitDecoratorMetadata": true

---

到您的

tsconfig.json

可以共享您的tsconfig吗？当然：{“编译器选项”：{“模块”：“commonjs”，“目标”：“es6”，“sourceMap”：true，“noImplicitAny”：true，“declaration”：true，“experimentalDecorators”：true}，“排除”：[“节点\模块”，“*/.spec.ts”]，“include”：[“app/***/.ts”]}太棒了！非常感谢你。

"emitDecoratorMetadata": true