paizaで他の人が書いたPHPソースを動かす方法

このソースを発見したので、Paizaで試してみようと思いました。
https://qiita.com/hedrall/items/fa8d43292f6bbeaf96d7

paiza.toでは、Githubからのリポジトリをインストール実行しようとすると、paiza cloudを使わないとダメと分かりました。

ただ、無料だと作ったサーバーが24時間で消えてしまうので、本当にお試しという感じです。

今回は、PHPの環境で作りました。
npmも、使えました。
でも、後ほど詳しく書きますが、エラーが出たので、npmのバージョンを最新にしようと思い、下記の記事を読んでアンインストールしてから、再びインストールしました。
https://qiita.com/taikan/items/88ff45a12b4e06293794

Node.jsが必要とわかったので、こちらの記事を参考にしてインストールしました。
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

paizaのクラウドサーバーは、Ubuntuでした。

これが無いと怒られるので、インストールしました。
https://www.npmjs.com/package/@angular/core

こちらも、必要になります。
https://github.com/angular/angular-cli#updating-angular-cli

また、パッケージの依存関係を作るために、下記の記事を参考にしてインストールしました。
http://phiary.me/node-js-package-manager-npm-usage/

このコマンドを使いました。
package.json がある階層に移動して、このコマンドを実行します。

$npm install

paiza cloudは、ターミナルがあるので、こうした操作も楽です。

今回のリポジトリを動かすために、色々とインストールしました。

もっと簡単に使うことができた

実は、Angularの環境を作ったとに、ブラウザへのアクセスが出来ない？みたいなエラーが出たのです。
”Invalid Host header”
このエラーのことが分からず、冒頭から無駄なことをしてしまいました。
今回あえて、私がスタックオーバーフローで教えて頂けるまでにハマった様子も、残そうを思います。
実施は、下記の手順で、出来ました。

public_htmlの直下に新しいフォルダを作りました。
（Appで作りました。）

作ったフォルダーに、今回見つけたリポジトリを追加します。
この状態でサーブすると@angular/coreが無いとエラーが出ます。

https://www.npmjs.com/package/@angular/core　
これをリポジトリを入れたフォルダーに、追加して ください。

ng serve --disable-host-check

とコマンドから入力すると、無事にサーブできます。
私は、回線があまりに遅いので、サーブしてポート4200でブラウザが開いたあと、數十分画面が変わりませんでした。
そのため、何か足りないのかなと思い、先に書いたように依存関係をまとめてインストールするコマンドを試しました。
そして、ソースを見ていて下記のリポジトリを呼び込んでいたので、念のため追加しました。
https://www.npmjs.com/package/@angular/platform-browser-dynamic

今回Angular初体験

今回、Angularを初めて使ったので、色々と勉強しながら環境作りをしました。
別途書いた記事のように、初期のプロジェクトを作って、ブラウザに表示できるか試したりしました。
今回を契機にして、Angularの勉強を進めて行きます。

勉強するのに役立つと思う記事を見つけましたので、シェアしたいと思います。
https://www.buildinsider.net/web/angulartips/002