AngularとjQuery/jQuery UIを組み合わせる

AngularとjQuery/jQuery UIを組み合わせるのは何か間違ってる気がしますが、
Angularの部品が足りなくて、どうしても使いたいことが起きることがあるかと思います（たぶん…）。
ここは意識低い系の方法を紹介します。
（意識高い系の方法は知識不足でちょっとわからなかった）。一応補足に記載。
ここで紹介する方法のデメリットはTypeScriptを使ってるのにjQueryの型がなくなってしまうことです（てかそれで別に困らない）。 こういうシチュエーションがそれなりにあると思うのに、
jQuery排他主義の人が多いのか（自分もどちらかといえばそう） 情報が錯綜しているのでまとめました。

jQueryをインストールする

これは普通にnpmからインストールします

$ npm install --save-dev jquery

jQuery UIをインストールする

公式のは1.12.1で止まっていて、いつからかnpmで提供されるのは部品ごとに細かく分かれたらしく、 Angularから使うにはwebpackをいじらないといけない模様。 ただ、jquery-ui-distっていうのを作ってくれている人がいて、それを使えばnpmからイケるのだが、 ちょっと怪しいので、フツーに公式からzipを落として配置することにする。 https://jqueryui.com/download/
から最新版をデフォルトの設定で落として、 src/assets/vendor/jquery-ui とか作ってあげてそこに以下の解凍した中身を放り込む

external/
images/
AUTHORS.txt
...
jquery-ui.theme.min.css
LICENSE.txt
package.json

angular.jsonにCSSとJSを登録する

 "projects": {
    "client": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
        ...
            "styles": [
              "src/assets/vendor/jquery-ui/jquery-ui.min.css",
              ...
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/vendor/jquery-ui/jquery-ui.min.js"
              ...
            ]
...

stylesとscripts部分にJQueryとJQueryUIのCSSとJSを追加する。

使ってみる

あとはjQuery/jQuery UIを使っているところのTypeScriptで
declare var $: any;と書けばいいだけ。
この場合、import $ from 'jquery';はいりません。
ただし、型はない状態のままです。
これだけです。 どうしてもDOMを操作する場合は ngAfterViewInit()でやるとかありますが、基本はこれだけでOKです。

補足: 意識高い系の方法

おそらく、型を使う場合は、うまくいってませんが

$ npm install --save-dev @types/jquery
$ npm install --save-dev @types/jqueryui

とやってかつ

import $ from 'jquery';
import 'jqueryui';

とやればOKだと思われる...がこれだけではうまくいかない…（詳細不明）。 詳しい人教えてください。

ググると出てくる情報源

https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular