らいふうっどの閑話休題

興味のあることをゆる~く書いていく

Angular & bazel's memo part Normal build revert

Angular & bazel's memo

angular & bazel のサンプルプロジェクトを通常ビルドに戻す時のメモ
Notes on returning angular & bazel sample project to normal build


通常ビルドに戻すために下記ファイル名を変更しました。
The following file names have been changed to return to the normal build.

angular.json ==> angular.json.bazel.bak
angular.json.bak ==> angular.json

f:id:ic_lifewood:20191005155805p:plain

ノーマルビルドを実行した時にエラーになった場合は、下記ファイルを削除
If an error occurs when executing a normal build, delete the following file:

  • src/initialize_testbed.ts
  • src/main.dev.ts
  • src/main.prod.ts

f:id:ic_lifewood:20191005161219p:plain

切替時に通常は、上記ファイルを削除することはなく、ビルドが正常終了するとはずです。
Normally, the above file is not deleted when switching, and the build should end normally.

rbenv memo

github.com rubyをアップデートする時にトラブルを対処した時のメモ
Notes when dealing with troubles when updating ruby.

$ rbenv install 2.5.0

rbenv install コマンド実行すると上記issueのエラーに遭遇しました。
When I executed the rbenv install command, I encountered the above error.

issueの回答は、awkが壊れているのではないか?ということでした。
Isn't the answer of issue awk broken? It was that.

調査の結果、下記 issue が見つかりました。
As a result of the investigation, the following issues were found.

awk の issue / issue of awk

gist.github.com 上記 issue の command.sh で、awkが直りました。
Awk has been fixed in command.sh of the above issue.

バージョンの切り替えができない / Cannot switch versions

rbenv で、2.5.0のインストールができましたが、バージョンが切り替わりませんでした。
その時に見つけた情報です。
With rbenv, 2.5.0 was installed, but the version did not switch.
Information found at that time.

Rubyのバージョンが切り替わらない時の対処法!

自分の環境は、zshなので、 .zshrcに下記内容を追記しました。
Since my environment is zsh, I added the following contents to .zshrc.

export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
eval "$(rbenv init -)"

ruby 2.3.3 => 2.5.0にバージョンアップできました。
ruby 2.3.3 => I was able to upgrade to 2.5.0.

余談 / Digression

jekyll の issue も見つけました。
I also found a jekyll issue.
github.com

bundle exec jekyll serve で起動

理由は、jekyllサイトのローカル環境構築が目的でした。
The reason was to build a local environment for the jekyll site.

ng deploy memo

f:id:ic_lifewood:20190914154053p:plain ng コマンドに deploy が追加されたので試してみれました。
I tried it because deploy was added to the ng command.

リポジトリ作成 / Create Repository

f:id:ic_lifewood:20190914154046p:plain

プロジェクト作成 / Create Angular Project

f:id:ic_lifewood:20190914154125g:plain

angular-cli-ghpagesを追加 / add angular-cli-ghpages

    "angular-cli-ghpages": "^0.6.0",

f:id:ic_lifewood:20190914154201g:plain

スクリプト追加 / add script

    "build": "ng build --prod",
    "deploy": "ng deploy --base-href=/ng-deploy-sample/",

f:id:ic_lifewood:20190914154302p:plain

ng ビルド実行 / excute ng build

f:id:ic_lifewood:20190914154332g:plain

ng デプロイ実行 / excute ng deploy

f:id:ic_lifewood:20190914154406g:plain

ブランチ

デプロイコマンドが実行されると、 gh-pages というブランチが作成されます。
When the deploy command is executed, a branch called gh-pages is created. f:id:ic_lifewood:20190914154459p:plain f:id:ic_lifewood:20190914154524p:plain

リポジトリ設定 / repository setting

リポジトリ設定へ移動します。/ Navigate to repository settings. f:id:ic_lifewood:20190914154542p:plain

GitHub Page

Sourceのプルダウンが、 gh-pages branch になっていれば、公開されています。
If the Source pull-down is in the gh-pages branch, it is open. f:id:ic_lifewood:20190914154647p:plain

デプロイコマンドの結果 / Result of Deploy command

https://gurezo.github.io/ng-deploy-sample/ f:id:ic_lifewood:20190914154719p:plain

サンプルコード github.com

for referrence

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. tips

Docker Angular
Dockerizing an Angular App with Karma and Protractor containers を試してみて、 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. に遭遇したときのメモ
A note on trying Dockerizing an Angular App with Karma and Protractor containers and encountering MaxListenersExceededWarning: Possible EventEmitter memory leak detected.

ブログ記事の Dockerfile ファイルを実装後、 docker build を実行したら、下記エラーが発生
When docker build is executed after implementing Dockerfile file of blog post, the following error occurs

➜  ng-dockerizing git:(master) ✗ docker build -t ng-dockerizing:prod .
Sending build context to Docker daemon  290.8MB
Step 1/11 : FROM node:alpine as builder
 ---> 8880b18e5207
Step 2/11 : COPY package.json package-lock.json ./
 ---> Using cache
 ---> f028b2d6387c
Step 3/11 : RUN npm ci && mkdir /ng-dockerizing && mv ./node_modules ./ng-dockerizing
 ---> Running in 1768cfde52e9
(node:6) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
 :
 :
(node:6) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit

> fsevents@1.2.9 install /node_modules/webpack-dev-server/node_modules/fsevents
> node install
 :
 :
> @angular/cli@8.2.2 postinstall /node_modules/@angular/cli
> node ./bin/postinstall/script.js

added 1085 packages in 42.247s
Removing intermediate container 1768cfde52e9
 ---> 8f2e18ff652f
Step 4/11 : WORKDIR /ng-dockerizing
 ---> Running in 907c44820503
Removing intermediate container 907c44820503
 ---> 6cdea1d1ae53
Step 5/11 : COPY . .
 ---> 6bd6b85f49f3
Step 6/11 : RUN npm run ng build -- --prod --output-path=dist
 ---> Running in 63e569baa171

> ng-dockerizing@0.0.0 ng /ng-dockerizing
> ng "build" "--prod" "--output-path=dist"


chunk {0} runtime-es2015.b2aca5be9e7b8cc1a1b4.js (runtime) 1.41 kB [entry] [rendered]
 :
 :
chunk {2} polyfills-es5.b71e50d75ad86204c322.js (polyfills) 118 kB [initial] [rendered]
Date: 2019-08-24T08:31:14.920Z - Hash: 26e87d3c676623e10980 - Time: 31228ms
Removing intermediate container 63e569baa171
 ---> 6c8fdfdd7be9
Step 7/11 : FROM nginx:alpine
alpine: Pulling from library/nginx
9d48c3bd43c5: Pull complete
13bf8394c846: Pull complete
Digest: sha256:e0f88b21626f56e5d9e038da863aee331640efb03ca7d8f453ed8243343acfaa
Status: Downloaded newer image for nginx:alpine
 ---> 41c8c3458a93
Step 8/11 : COPY nginx/default.conf /etc/nginx/conf.d/
COPY failed: stat /var/lib/docker/tmp/docker-builder601496124/nginx/default.conf: no such file or directory
➜  ng-dockerizing git:(master) ✗ 

エラー発生時の環境 / Environment at the time of error occurrence

➜  ~ npm -v
6.11.2
➜  ~ node -v
v10.16.0
➜  ~
➜  ~ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.0
Node: 10.16.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.0
@angular-devkit/core         8.3.0
@angular-devkit/schematics   8.3.0
@schematics/angular          8.3.0
@schematics/update           0.803.0
rxjs                         6.4.0

➜  ~

調査結果下記のissueを発見 / Find the following issues

github.com

対策は、以下の通り / The measures are as follows

➜  ~ npm install -g npm@6.10.3
/Users/lifewood/.nodebrew/node/v10.16.0/bin/npm -> /Users/lifewood/.nodebrew/node/v10.16.0/lib/node_modules/npm/bin/npm-cli.js
/Users/lifewood/.nodebrew/node/v10.16.0/bin/npx -> /Users/lifewood/.nodebrew/node/v10.16.0/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.10.3
updated 13 packages in 12.083s
➜  ~ node -v
v10.16.0
➜  ~ npm -v
6.10.3

npm のバージョンを下げて解決しました。 / Resolved by lowering the version of npm. 6.11.2 => 6.10.3

npm リリース情報 / npm release information

github.com

サンプルコード / Sample Code

github.com

angular-ja translation bazel

angular-ja translation
angular-ja translation

序章 / Introduction

昨日の 第8回:Angular もくもく会@グンマー 活動内容は、guide/bazel の翻訳 #412 でした。
Yesterday's 8th: Angular Mokumokukai@Gunma Activities are guide/bazel の翻訳 #412.

前回Angular Document Transration Beginingは、途中で休止状態になり、他の方に引き継いで頂いたという苦い思い出があります。
Previous Angular Document Translation Begining is suspended on the way and taken over by the other person I have a bitter memory that I received.

今回は、必ずPull Requestまでやり遂げようと思い、興味のあるテーマ且つボリュームが少ないページを選びました。 それが、Building with Bazel です。
This time, I always decided to finish up to Pull Request, and I chose a page with a few interesting themes and volumes. That is Building with Bazel.

第二章 / Chapter 2

まずは、リポジトリを最新に更新します。
First, update the repository to the latest.

➜  angular-ja git:(master) git fetch upstream master
➜  angular-ja git:(master) git pull upstream master

一度ビルドします。この時にエラーになりました。
原因は、 yarn が最新バージョン v1.16.0だったことです。
Build once. I got an error at this time. The cause is that yarn was the latest version v1.16.0.

ビルド出来るyarn のバージョンは v1.13.0 です。
The version of yarn you can build isv1.13.0.

第三章 / Chapter 3

まず、issueを書きます。
First, write the issue. issue 作成

issue対象のページを入力します。
Enter the page for issue. 対象ページ

入力完了です。
It is input completion. 入力完了

第四章 / Chapter 4

翻訳前にファイルをコピーし、ファイル名を xxxx.en.md とします。 今回は、 bazel.en.md です。
Copy the file before translation and name it xxxx.en.md.
This time, it is bazel.en.md.
翻訳前コピー

後は、差分を見易いように極力同じ行で、翻訳します。
After that, translate on the same line as much as possible to make it easy to see the difference. 翻訳

翻訳が一通り終わったら、Pull Requestを作成します。
After translation is complete, create a Pull Request. Pull Request

第五章 / Chapter 5

Contributor License Agreement (CLA)sign in & submmitします。
Sign in & submmit to Contributor License Agreement (CLA). CLA

その間にCircle CIで諸々のスクリプトが実行されています。
テストが失敗すると下図のようになります。
During that time, various scripts are executed in Circle CI. If the test fails, it will look like the figure below. テスト失敗概要 テスト失敗詳細

コンソールに出力されているエラーの内容を一つずつ修正します。
正常に終了すると下図のようになります。
Correct the contents of the error output on the console one by one.
If it ends normally, it will become like the following figure. テスト正常終了

第六章 / Chapter 6

後はレビューの結果待ちです。 今回はPull Requestまで出来ました。
The rest is waiting for the result of the review. This time we were able to pull request.

終章 / Final Chapter

マージされるまでが翻訳です。 心を無にして、結果を待ちたいと思います。
It is translation until it is merged. I want to have no mind and wait for the results.

参考 / referrence

lifewood.hatenablog.com

追記 / Postscript

先程マージされました。
It was merged earlier.

merge

Angular & bazel's memo part build

Angular & bazel's memo

angular & bazel のサンプルプロジェクトをビルドする時にトラブルが有ったので、その時のメモ
I had trouble when build the sample project of angular & bazel, so the memo of that time

ビルドコマンド実行したら、下記エラー発生。
The following error occurs when executing a build command.

➜  ng-bazel-sample git:(master) ng build
INFO: SHA256 (https://github.com/manekinekko/rules_sass/archive/9862dfc96a4a1f66fe171ef5e043b29853e8445b.zip) = 6035f25dbcd1e5575a681f5d7b9d9821dde09fcf73ccea053d1bc1c9523b1a2a
DEBUG: Rule 'io_bazel_rules_sass' indicated that a canonical reproducible form can be obtained by modifying arguments sha256 = "6035f25dbcd1e5575a681f5d7b9d9821dde09fcf73ccea053d1bc1c9523b1a2a"
ERROR: /private/var/tmp/_bazel_lifewood/55e2e676c374e1a534444472789d2c28/external/local_config_cc/BUILD:55:5: in apple_cc_toolchain rule @local_config_cc//:cc-compiler-darwin_x86_64: Xcode version must be specified to use an Apple CROSSTOOL. If your Xcode version has changed recently, verify that "xcode-select -p" is correct and then try: "bazel shutdown" to re-run Xcode configuration
ERROR: Analysis of target '//src:prodapp' failed; build aborted: Analysis of target '@local_config_cc//:cc-compiler-darwin_x86_64' failed; build aborted
INFO: Elapsed time: 246.700s
INFO: 0 processes.
FAILED: Build did NOT complete successfully (264 packages loaded, 15447 targets configured)
    Fetching @build_bazel_rules_sass_deps; Running yarn install on @io_bazel_rules_sass//sass:package.json 9s
    Fetching @build_bazel_rules_nodejs_rollup_deps; Running yarn install on @build_bazel_rules_nodejs//internal/rollup:package.json 8s
/Users/lifewood/work/ng-bazel-sample/node_modules/@bazel/bazel/node_modules/@bazel/bazel-darwin_x64/bazel-0.26.1-darwin-x86_64 failed with code 1.

ng update @angular/cli@next をインストールしてもエラー
Error installing ng update @angular/cli@next

➜  ng-bazel-sample git:(master) ng build
Starting local Bazel server and connecting to it...
ERROR: /private/var/tmp/_bazel_lifewood/55e2e676c374e1a534444472789d2c28/external/local_config_cc/BUILD:55:5: in apple_cc_toolchain rule @local_config_cc//:cc-compiler-darwin_x86_64: Xcode version must be specified to use an Apple CROSSTOOL. If your Xcode version has changed recently, verify that "xcode-select -p" is correct and then try: "bazel shutdown" to re-run Xcode configuration
ERROR: Analysis of target '//src:prodapp' failed; build aborted: Analysis of target '@local_config_cc//:cc-compiler-darwin_x86_64' failed; build aborted
INFO: Elapsed time: 346.768s
INFO: 0 processes.
FAILED: Build did NOT complete successfully (38 packages loaded, 157 targets configured)
    Fetching @build_bazel_rules_sass_deps; Running yarn install on @io_bazel_rules_sass//sass:package.json
    Fetching @build_bazel_rules_nodejs_rollup_deps; Running yarn install on @build_bazel_rules_nodejs//internal/rollup:package.json
/Users/lifewood/work/ng-bazel-sample/node_modules/@bazel/bazel/node_modules/@bazel/bazel-darwin_x64/bazel-0.26.1-darwin-x86_64 failed with code 1.

以下の手順を行って、ビルドが成功
Follow the steps below for a successful build

ログ / logs

➜  ng-bazel-sample git:(master) ✗ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
Password:
➜  ng-bazel-sample git:(master) ✗ sudo xcodebuild -license
Apple Inc.

Xcode and Apple SDKs Agreement

PLEASE SCROLL DOWN AND READ ALL OF THE FOLLOWING TERMS AND CONDITIONS CAREFULLY BEFORE USING THE APPLE SOFTWARE OR APPLE SERVICES.  THIS IS A LEGAL AGREEMENT BETWEEN YOU AND APPLE.  IF YOU AGREE TO BE BOUND BY ALL OF THE TERMS AND CONDITIONS, CLICK THE “AGREE” BUTTON.  BY CLICKING “AGREE” OR BY DOWNLOADING, USING OR COPYING ANY PART OF THIS APPLE SOFTWARE OR USING ANY PART OF THE APPLE SERVICES, YOU ARE AGREEING ON YOUR OWN BEHALF AND/OR ON BEHALF OF YOUR COMPANY OR ORGANIZATION TO THE TERMS AND CONDITIONS STATED BELOW.  IF YOU DO NOT OR CANNOT AGREE TO THE TERMS OF THIS AGREEMENT, YOU CANNOT USE THIS APPLE SOFTWARE OR THE APPLE SERVICES.  DO NOT DOWNLOAD OR USE THIS APPLE SOFTWARE OR APPLE SERVICES IN THAT CASE.

1.      Definitions
Whenever capitalized in this Agreement:

~~~~~~ 中略 / Abbreviation ~~~~~~
“Xcode Developer Tools” means the Apple-proprietary development platform, including but not limited to software tools, compilers, sample code, Documentation, programming languages, and overall design package provided by Apple hereunder, excluding the Apple SDKs.

“You” or “Your” means the person(s) or entity using the Apple Software or Services or otherwise exercising rights under this Agreement.  If You are entering into this Agreement on behalf of Your company, organization, educational institution, or an agency, instrumentality, or department of the federal government, “


By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] q

You can view the license agreements in Xcode's About Box, or at /Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf

➜  ng-bazel-sample git:(master) ✗
➜  ng-bazel-sample git:(master) ✗ ng build
INFO: Analyzed target //src:prodapp (485 packages loaded, 22708 targets configured).
INFO: Found 1 target...
Target //src:prodapp up-to-date:
  dist/bin/src/prodapp
INFO: Elapsed time: 82.663s, Critical Path: 48.69s
INFO: 7 processes: 6 local, 1 worker.
INFO: Build completed successfully, 8179 total actions
➜  ng-bazel-sample git:(master) ✗

ビルド成功時の環境
Environment when build is successful

macOS
macOS

npm&node&java
npm&node&java

package.json
package.json

サンプルコード

github.com

まとめ

bazel の問題というよりは、Xcodeの問題のようです。
Xcode configuration seems to be more of a problem than bazel.

spec.ts build script

f:id:ic_lifewood:20190701231936p:plain

きっかけ / Trigger

仕事で、ng testをした時、テスト数が多い上にビルドに時間がかかっていた。
ng test は、ビルド後にテストが実行されるとなかなか中断できない。
When I did ng test at work, it took a long time to build on a large number of tests.
ng test can not be interrupted easily if the test is executed after build.

spec.tsのみビルドしたかったので、今回スクリプトを作成してみた。
I wanted to build only spec.ts, so I created a script this time

1. spec.ts用 tsconfig.jsonの用意 / Prepare for spec.ts tsconfig.json

angularのプロジェクトを作成する時にデフォルトで、 tsconfig.json が作成される。
それとは別に tsconfig.spec.json を作成する。

tsconfig.json is created by default when creating an angular project.
Create tsconfig.spec.json separately.

2. tsconfig.json の内容を継承する

tsconfig.spec.json
tsconfig.spec.json

3. package.jsonスクリプトを追加する / add a script to package.json

追加イメージ

add script
追加スクリプト

追加行 / add line

    "build:spec": "tsc --project tsconfig.spec.json",

3. スクリプトを実行してみる / Try to run the script

成功例 / success example

success
成功例

出力結果 / output result

output result
出力結果

失敗例 / fail example

miss code
ミスコード

failed result
失敗出力結果

4. サンプルコード / sample code

5. 参考文献 / references