Angular 5（または4）：AngularJSで使用するためのダウングレードコンポーネント

先日、非常に珍しいタスクが発生しました。AngularJSでAngularのコンポーネントを使用する方法を学ぶ必要がありました。 5分間のタスクのようです。 インターネットにも同様の例がたくさんあり、ドキュメントには何かがあるようです。 しかし、実際には、すべてが晴れているわけではなく、問題の解決にはさらに時間がかかったことが判明しました。 一般的に、従来のコードを幸せにサポートすることに専念し、単に角質異常者専用



最初に、伝統的な見出しTL DR： 良いグラフマニアック、スタジオの例



さて、今、あなたはグラファイトすることができます。



そもそも、角度でのドキュメントは非常に悪いです。 だから、それは最初のバージョンで、今日まで続いています。 一般に、伝統。 したがって、 この記事をダウングレードの基礎として取り上げました。 次に、コード自体：



注意！ 完全を期すために、以下に角成分のタイプスクリプトなしの例を示します。 それ以降のコードはすべてこのスタイルになります。



したがって、実際には、コンポーネント：

let HelloComponent = function () { }; HelloComponent.annotations = [ new ng.core.Component({ selector: 'hello-world', template: 'Hello World!' }) ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで十分だと思われるので、今度はdowngradeComponentを呼び出します。 しかし、ありません。 ここに記載されている例は不完全であるため、ドキュメントは不発に終わっています。



AppModuleコードを追加します。

 class AppModule { } AppModule.prototype.ngDoBootstrap = function() { // do nothing }; AppModule.annotations = [ new ng.core.NgModule({ declarations: [HelloComponent], imports: [ng.upgrade.static.UpgradeModule, ng.platformBrowser.BrowserModule], entryComponents: [HelloComponent] }) ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ngDoBootstrapについては、上記のダウングレードの基礎として述べた記事から学ぶことができます。



これでモジュールが完成しました。AngularJSでこれらすべてを接続する必要があります。

 angular.module("app", []) .directive("helloWorld", ng.upgrade.static.downgradeComponent({component: HelloComponent}))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、Angularのダウンロード自体を追加します。

 ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { const upgrade = platformRef.injector.get(ng.upgrade.static.UpgradeModule); upgrade.bootstrap(document.body, ['app'], { strictDi: true }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、この例も機能しません。

不明なプロバイダー：$$ angularLazyModuleRefProvider

最終的に、AngularJSモジュールの依存関係として$$ UpgradeModuleを渡すだけでよいことがわかりました。



PSは、他の誰かがこれを必要とするかもしれないという理由で記事を書くことにしました。 誰かを助けることができたら嬉しいです。



PPSその他のリンク： ES5での角度の書き込み