2017-05-09 14 views
1

Angular 4アプリケーションにAngular 1サービスを注入しようとしています。hereの手順を使用しています。アプリはハイブリッドモードでブートストラップされています(Angular 4コンポーネントとサービスが動作しているので動作します)。Angular 1サービスをAngular 4に注入

Angular 1サービスを注入しようとするたびに、未定義のプロパティ 'get'を読み取ることができません

アップグレード-providers.ts:LinksServiceを使用しようとしている

import {LinksService} from "./+services/links/links"; 

export function linksServiceFactory(i: any) { 
    return i.get('bfLinksService');   // <--- Errors here! 
} 
export const linksServiceProvider = { 
    provide: LinksService, 
    useFactory: linksServiceFactory, 
    deps: ['$injector'] 
}; 

マイ角4サービスは、次のようになります。

@Injectable() 
export class EntityService { 

    constructor (
     private http: Http, 
     private links: LinksService 
    ) { 

    } 

    get(id: string): Observable<OrgDetails> { 
     // Do something 
    } 
} 

そして最後にLinksService(活字体で書かれた角度1つのサービス)次のようになります。

export class LinksService { 

    static $inject = ["$log", "$location", PROPERTIES_SERVICE]; 

    private contentHost : string; 
    private thisAppHost : string; 

    constructor (private $log : ng.ILogService, private $location : ng.ILocationService, private props : IPropertiesService) { 
     this.init(); 
    } 

    // Service functions elided 
} 

ブートストラップおよびモジュールのもの:

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     UpgradeModule, 
    ], 
    declarations: [ 
     AppComponent, 
     OrgSummaryComponent, 
    ], 
    providers: [ 
     EntityService, 
     linksServiceProvider 
    ], 
    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: false}); 
}); 

Angular 1(legacy)はすべて正常に機能します。

Angular cantが$ injectorを見つけたようですが、それに関係なくそこにいるべきではありませんか?任意の提案のための

多くのおかげで、 ジェフ

+0

あなただけの角度4でそれを書き換えていないのはなぜ? –

+0

これは大きくて複雑なアプリの一部です。ビッグバンのリライトは現在オプションではありません(時間/リソースの制約)。 – jeffeld

+0

こんにちは、extensionsModuleを、リンクサービスプロバイダを登録した角モジュール宣言でインポートしましたか? –

答えて

1

私の人生の二日は、私は戻って取得することはできませんが、...

がちょうどこの発見:基本的に

https://github.com/angular/angular.io/issues/3317

ドキュメントが間違っています。 appモジュールにconstrcutorを追加すると、そこにupgrade.bootstrapが呼び出され、すべて動作します。

 
export class AppModule { 

    constructor(upgrade: UpgradeModule) { 
     upgrade.bootstrap(document.body, [AppModuleName], {strictDi: true}); 
    } 

    // Does nothing by design. 
    // This is to facilitate "hybrid bootstrapping" 
    ngDoBootstrap() {} 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

回答いただきありがとうございます。

+0

角度サービス内でAngularJSサービスを使用する場合は、この機能が有効ですか? Angularコンポーネントで動作するようにしましたが、Angularサービスではエラーが発生し続けます –

0

実際AngularJSをインスタンス化するためのより良い方法は後です:

platformBrowserDynamic().bootstrapModule(AppModule) 
    .then(platformRef => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; 
    upgrade.bootstrap(document.body, ['app'], { strictDi: false }); 
    }) 
    .catch(err => console.log(err));