私はJhipster 4をAngular 2で使用しています。私のプロジェクトでサードパーティのlibを使う必要がありますが、ライブラリはnpmにはなく、.d.tsファイルはありません。私は直接jsを含める必要があります。 npm経由でインストールされたライブラリの場合はvendor.ts内部でインポートできますが、jsでは動作しません。プロジェクトでこのファイルを使用するにはどうすればいいですか?Jhipster 4で通常のサードパーティのjsライブラリを使用するには?
2
A
答えて
0
これは理想的ではありませんが、plain-old-jsを使用することができます。通常はindex.html
と同じようにリンクし、使用する必要のあるTypeScriptコードでは、ライブラリのdeclare
をファイルの先頭に置きます。ですから、例えば:
import { Component } from '@angular/core';
declare myAwesomeJsLibrary: any;
@Component(/* brevity*/)
export class AppComponent {
constructor() {
myAwesomeJsLibrary.doSomethingAwesome();
}
}
はもちろん、あなたの自動補完のいずれかの種類を与えるものではありませんが、あなたは常に独自のインターフェイスを作成し、あなたが本当にしたい場合は、それ用のファイルをd.tsすることができます。この方法で、少なくともそれを働かせることができます。私も今、これを把握しようとしています
1
..私は実際にライブラリはどちらかかかわらず、ファイルvendor.tsでそれらをインポートすることによって動作するように糸を介してインストールすることができませんでした。..
私の現在の回避策(。私がsrc/main/webapp/content/js /にコピーして、CopyWebpackPluginプラグインのwebpack.common.jsから参照してください。
webpack.common.jsでプラグインの下は、私がCopyWebpackPluginにエントリを追加しました:
new CopyWebpackPlugin([
{ from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' },
{ from: './node_modules/swagger-ui/dist', to: 'swagger-ui/dist' },
{ from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
{ from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
{ from: './src/main/webapp/robots.txt', to: 'robots.txt' },
{ from: './src/main/webapp/i18n', to: 'i18n' },
{ from: './src/main/webapp/content/js/FooLib.js', to: 'FooLib.js'}
]),
そしてWebアプリケーション/ index.htmlを
<script src='FooLib.js'></script>
にインポートを追加しました。そして私はそれを使用したコンポーネントでそれを宣言した:
declare var Foo: any;
関連する問題
- 1. Jintでサードパーティのjsライブラリを使用する
- 2. MozillaアドオンSDKでサードパーティのJSライブラリを使用する
- 3. サードパーティのライブラリを角で使用する
- 4. Jhipster Angular 4追加CSS&JS
- 5. は、私はすでにこのインポートを使用してマップを作成するにはmapbox-GL-jsのライブラリを使用する私のコードでは、サードパーティのライブラリ
- 6. ionic 2でサードパーティのJavaScriptライブラリ(pixijs)を使用するには?
- 7. JSPでサードパーティのJavaライブラリを使用
- 8. サードパーティのライブラリ(parse.com)をAngular 2で使用
- 9. サードパーティ(ライブラリ/コンポーネント)のコンパイルで@ angular/cliの角度4の汎用アプリケーション
- 10. 通常のJSライブラリーをIonic2 + typescriptで使用する
- 11. サードパーティのライブラリをAngular 4 Appで初期化する
- 12. Meteor ReactJsとサードパーティ製のjsライブラリ
- 13. Angular 4のコンポーネントでJSライブラリをロードするには
- 14. は、ノード・アプリケーションでは、サードパーティのライブラリを使用して
- 15. angle-cli(angular2)プロジェクトでサードパーティのライブラリを使用する
- 16. OSGi環境でサードパーティのJavaFXライブラリを使用する
- 17. TornadoFXでサードパーティのUIライブラリを使用する
- 18. サードパーティのライブラリを使用してPHPでSiteMap.xmlを生成するには?
- 19. サードパーティのライブラリを使用するサービスをテストする
- 20. サードパーティのライブラリを使用する場合のライセンスの側面
- 21. GWTでhtml + jsライブラリを使用する
- 22. 通常のdjangoプロジェクトでpinax djangoユーザアカウントを使用するには?
- 23. Djangoでこのフォームを使用するには?通常
- 24. サードパーティのライブラリを継続的インテグレーションの使用でソースコントロールに保存する
- 25. Javaサードパーティのライブラリ
- 26. サードパーティ製のライブラリをAngular 4に接続してサービスとして使用する方法
- 27. サードパーティのライブラリをSAPUI5にロード
- 28. サードパーティのJSを使用してJSONデータを取得する
- 29. サードパーティのライブラリをインポート
- 30. TinyMCEの4:プレーンテキストに通常モード
しかし場合は、JhipsterはWebPACKのを使用していることです勧めることは、vendor.ts内のjsをインポートすることです。私はそれを行い、図書館を宣言しようとしましたが、私はそれを使用しようとすると定義されません。私はそれがindex.html –
に含まれていないと思うそれは面白いです。 index.htmlに直接リンクしてみて、違いがあるかどうか確認してください。それは問題を診断するのに役立つかもしれません。つまり、それはvendor.tsのものか、宣言のものかです。 – mikegeyser
index.htmlで直接リンクするjsの正しい場所を読み込めません。 Webpackはポート9090上で動作し、自動リロードを使用するマイクロサーバを作成するので、インデックスに直接追加されたjsを取得しません –