2017-05-13 9 views
2

私はJhipster 4をAngular 2で使用しています。私のプロジェクトでサードパーティのlibを使う必要がありますが、ライブラリはnpmにはなく、.d.tsファイルはありません。私は直接jsを含める必要があります。 npm経由でインストールされたライブラリの場合はvendor.ts内部でインポートできますが、jsでは動作しません。プロジェクトでこのファイルを使用するにはどうすればいいですか?Jhipster 4で通常のサードパーティのjsライブラリを使用するには?

答えて

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することができます。この方法で、少なくともそれを働かせることができます。私も今、これを把握しようとしています

+0

しかし場合は、JhipsterはWebPACKのを使用していることです勧めることは、vendor.ts内のjsをインポートすることです。私はそれを行い、図書館を宣言しようとしましたが、私はそれを使用しようとすると定義されません。私はそれがindex.html –

+0

に含まれていないと思うそれは面白いです。 index.htmlに直接リンクしてみて、違いがあるかどうか確認してください。それは問題を診断するのに役立つかもしれません。つまり、それはvendor.tsのものか、宣言のものかです。 – mikegeyser

+0

index.htmlで直接リンクするjsの正しい場所を読み込めません。 Webpackはポート9090上で動作し、自動リロードを使用するマイクロサーバを作成するので、インデックスに直接追加されたjsを取得しません –

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; 
関連する問題