jQueryの処理はComponentに書く

趣旨

angularからjQueryの処理を呼び出すためにはどうすればいい？
jQueryの処理を記載してみたものの、どうにも動かなくて困った...
どこでつまづいたのか、どう対応したのかについて説明します。

つまづきポイント

angularに自動で読み込んでほしかったので、assets配下にコードとjQuery.jsを配置。

assets/common.js

// ロード時処理
$(function() {
    ...
});

開発ツールで確認。
コードもjQueryもangularによってscripts.bundle.jsにまとめられてる。
htmlのヘッダにscripts.bundle.jsの呼び出し宣言もつけてくれている。

…でも、どうにも実行されていないっぽい

対応

jQueryの処理は、Componentの中に書く！

そもそも宣言されてるだけでただの飾りになってるのでは？と思い
Component内に移植してやるとうまく動きました

main.component.ts

import { Component, OnInit } from '@angular/core';

// jQuery用の変数宣言
declare var $;

@Component({
  selector: 'main-component',
  templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {
    ngOnInit(): void {
        // ロード時処理
        $(function() {
            ...
        });
      }
    }
}

そんな実装で大丈夫か？

自己解決した後、調べてみると普通に対応策書かれてましたね
Angular2/4にてjQueryを読み込んで使用する

今回はindex.htmlにjQueryの呼び出し宣言書いてないから、
実装には微妙な違いがあったりするけど。

一番いい実装は型宣言ファイル引っ張ってくる方式なのかなぁ？

command

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

個人的には、jQueryは必要なComponentでのみ
明示的に変数宣言して使ったほうがいいんじゃないかと思います。

後からソースコードにgrepかけて、jQuery使ってるところを簡単に特定できるし

declare var $;