文系からでもプログラミングできました!IT関係の情報を書いていきます。

プログラマーinfo

Angular

AngularでJavaScriptやCSSのライブラリを読み込む方法

投稿日:

CSSやJavaScriptライブラリを読み込ませる方法

xterm.jsというTerminalをブラウザ上でエミュレートするためのライブラリを例を使い、AngularでCSSやJavaScriptライブラリを利用する方法を紹介します。

手順

まずAngular.jsonの設定のstylesやscriptsに読み込ませたいファイルのパスを追加します。

例えばnode_modules/xterm/dist/xterm.css./node_modules/xterm/dist/xterm.jsを読み込ませたい場合は以下のように記述します。

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "./node_modules/xterm/dist/xterm.css"
            ],
            "scripts": [
              "./node_modules/xterm/dist/xterm.js"
            ]
          },
.....

 

この記述をしたのち、Commponent.htmlではなくComponent.tsに必要な記述をすることでJavaScriptライブラリを利用することができます。

NG

<h1>Terminal</h1>
<div id="terminal"></div>
<script>
  var term = new Terminal();
  term.open(document.getElementById('terminal'));
  term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>

 

OK

export class AppComponent implements OnInit {
  title = 'app';
  ngOnInit() {
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
  }
}

 

これでxtermが利用できるようになります。

以下のような画面が出来上がります。

 

 

解説

通常の読み込ませ方

npmでインストールしたライブラリはnode_module配下に格納されます。

通常は<link>タグや<script>タグでライブラリのパスからファイルを読み込むことでライブラリを利用できます。なのでインストールガイドでは以下のような記述をするように指示されます。

<head>
  <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
  <script src="node_modules/xterm/dist/xterm.js"></script>
</head>

 

しかし、この場合以下のようなエラーが出ます。

Refused to apply style from 'http://localhost:4200/node_modules/xterm/dist/xterm.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:11 GET http://localhost:4200/node_modules/xterm/dist/xterm.js 404 (Not Found)
localhost/:1 Refused to execute script from 'http://localhost:4200/node_modules/xterm/dist/xterm.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Angularの場合

しかし、Angularの場合はシングルページアプリケーションとして動作するために、事前にCSSファイルやJavaScriptファイルをコンパイルして利用する必要があります。

コンパイルの設定はAngular.jsonに記述されているので、Angular.jsonに必要なライブラリのパスを追加しなければライブラリはうまく動作しません。

cssファイルはscriptオプションに、jsファイルはscriptsオプションの配列に追加する必要があります。

これでCSSやJavaScriptファイルが利用できるようになります。

-Angular

Copyright© プログラマーinfo , 2018 All Rights Reserved Powered by STINGER.