Angular 混合自举应用程序中的 DI

Question

我有一个相当大的 AngularJS（又名 Angular 1）应用程序，它是用 Typescript 编写的。我决定新功能应该写在 Angular（又名 Angular 4）中，并已采取步骤在 "hybrid mode".

中提升应用程序

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

当我尝试向我的 Angular 添加 Angular 服务时出现问题（到目前为止所有 Angular 4）。 Angular 无法正常工作，吐出看似无处不在的东西 无法解析所有参数... 错误。

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

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

Angular 混合自举应用程序中的 DI

Angular DI in a hybrid boostrapped application

javascript

dependency-injection

hybrid

angularjs

typescript