0
私は、Typescriptで書かれているかなり大きなAngularJS（Angular 1）アプリケーションを持っています。私は、新しい機能をAngular（別名Angular 4）で書いて、「ハイブリッドモード」でアプリをブーストする手順を取ったと判断しました。ハイブリッドブーストされたアプリケーションの角度DI
これはうまくいくようです（すべてのAngularJSビットが正常に動作します）。また、1つのAngularコンポーネントを追加して、それをうまく描画します。
問題は、角型サービス（これまでのすべての角型4）に角度サービスを追加しようとしたときに発生します。角がうまく動作せず、普遍的に浮かぶ ...エラーのすべてのパラメータを解決できません。
しかし、コンポーネントのコンストラクタの型を@Injectでマークすると、正常に動作します。
すべてのドキュメントでは、@ Injectを日常的に使用する必要はないはずですが、なぜこれが失敗するのですか？
私の中期的な言いたいことは、角度のあるコンポーネントとサービスにAngularJSサービスを注入する必要があり、この状況が私に自信を持っているわけではありません。
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"
]
}
多くのおかげで、 ジェフ
に
を追加しますか？ – yurzui
確か:) { "compilerOptions"：{ "モジュール"： "commonjs"、 "ターゲット"： "ES6"、 "sourceMap"：真、 "noImplicitAny"：真、 "宣言"：真、 "experimentalDecorators"：真 }、 "除外"：[ "node_modules"、 "**/* spec.ts。" ]、 "には"：[ 「アプリ/ **/* .ts " ] } – jeffeld
http://stackoverflow.com/questions/39602890/angularjs-2-0-cant-inject-anything-through-componen t-constructor/39608530＃39608530 – yurzui