js、cssファイルをどう読み込みさせるのか。

Question

実現したいこと

Typescript、SCSSをコンパイルして、HTMLにそれぞれjs,cssファイルとして読み込んでもらいたい。Angularを使っており、自動的にコンパイルがされる状態。

発生している問題・分からないこと

自分でいろいろな渡し方を試したがどうしてもうまくいかず、読み込んでもらえない。

原因かもしれないと思っているもの
A．渡し方自体も間違っているかもしれない。

B．ファイル自体が間違っているかもしれない。
app.component.(html/ts/scss)とというファイルとmain.ts、index.htmlなどがあり、それぞれの目的の違いが理解できず、分からないままapp.componentにすべて書いた。
ng buildをしたところ、distというディレクトリが作成された。これがコンパイルされたものだと思い、これらも以下のようにHTMLに入れた。しかし、これがあっているのかもわからない状態。

<link rel="stylesheet" href="styles.（伏字）.css"> <script src="main.（伏字）.js"></script> <script src="polyfills.（伏字）.js"></script> <script src="runtime.（伏字）.js"></script>

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

アプリがどうなっているか確認したかったため、ng serveで確認した。localhost4200のサイトでHTMLは出たが、cssとjsファイルが一切読み込まれなかった。そのときはローカルドライブ（パソコン上？）のファイルは参照できないという趣旨のエラー。

→http-serveでというコマンドを使うとローカルサーバー（？）が2個作られたので、それの一方を使いhttp://（伏字）8080/src/main.jsと指定して毎回読み込み前にサーバーを立ち上げたらいける？と思ったが、以下のエラーが出た。（Failed to load resource: the server responded with a status of 404 (Not Found)）

→http://～～と続くこれを使うこと自体が間違っているかもしれないと思い、調べたら事例で出てくるコードはパスを渡したりではなく、main.jsとのみ書いている人が多かったので、
<script src=main.js></script>
と記述。しかし(index):37 Uncaught ReferenceError: clickbutton is not defined
at HTMLButtonElement.onclick ((index):37:70)と表示される。TSファイル、ひいてはJSファイルの中身が伝わっていない。

補足

特になし

Comments

[FKM]

ng generateでapp.tsを作成しましたか？これで作成すれば、cssファイルもコンポーネントごとに自動作成されるはずですが。たとえばHogeというディレクトリを作れば、hoge.component.htmlと一緒にhoge.component.cssというCSSファイルも自動生成されます。

[toothpaste]

コメントありがとうございます。ng generateのことをちゃんとわかっていなかったようです。試したらいけました！
ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

Answer 1

AngularでCSSを制御させる場合は各コンポーネントごとに紐づけるのがセオリーですが、それを制御するためにジェネレータという便利なものが実装されています。

ng g --flat hoge

このようにすれば、同一階層化に一通りのファイル（コンポーネント、テンプレート、スタイルシートとスペックファイル）が自動生成されます（gはgenerateコマンドの略、--flatは同一階層化に作成。--flatを省略した場合はhogeというディレクトリその直下に4種類の制御ファイルが生成される）。この中にhoge.component.cssというCSSファイルも生成されるので、あとはコンポーネントファイル内の@componentデコレータに紐づければ、CSS制御できます。

@Component({
  /*省略*/
  templateUrl: './hoge.component.html',
  styleUrls: ['./hoge.component.css']
})

なお、この紐づけのルールさえわかっていれば、敢えてジェネレータで作る必要はないです。