らいふうっどの閑話休題

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

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

Angular & bazel's memo part create project

Angular & bazel's memo

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

Try Bazel’s opt-in preview in Angular CLI

このブログを参考にプロジェクトを作成。
I made a project referring to this blog.

下記のコマンドを実行したら、エラー発生。
An error occurs when executing the following command.

➜  ~ npm install -g @angular/bazel
/Users/lifewood/.nodebrew/node/v10.14.1/bin/ngc-wrapped -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ngc-wrapped/index.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/api-extractor -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/api-extractor/index.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/packager -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ng_package/packager.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/xi18n -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ngc-wrapped/extract_i18n.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/modify_tsconfig -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/modify_tsconfig.js
npm WARN @angular/bazel@8.0.2 requires a peer of @angular/compiler-cli@8.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/bazel@8.0.2 requires a peer of @bazel/typescript@0.* but none is installed. You must install peer dependencies yourself.
npm WARN @angular/bazel@8.0.2 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.

+ @angular/bazel@8.0.2
added 66 packages from 104 contributors in 9.781s
➜  ~ cd work
➜  work ng new ng-bazel-sample --collection=@angular/bazel
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
Schematic input does not validate against the Schema: {"name":"ng-bazel-sample --collection=@angular/bazel","version":"8.0.3","routing":true,"style":"scss"}
Errors:

  Data path ".name" should match format "html-selector".
➜  work ls -la

スタイルがサポート対象外ではないかとアドバイスを頂いた。
I was advised that the style is not supported.

だが、しかし!css, sass も同じエラーだった。
But!, css and sass have the same error.

issue を書いてみた。
I wrote an issue.

すぐに回答をして貰いました。
I answered immediately and asked.

github.com

もう一度、挑戦してみたら違うエラーが発生。
If you try again, a different error occurs.

npm ERR! Unexpected end of JSON input while parsing near '...pack/-/webpack-1.4.5.'

以下のコマンドを実行したら、成功した。キャッシュの問題だったようです。
If you execute the following command, it succeeded. It seems to be a cache issue.

➜  ~ npm uninstall -g @angular/cli
removed 228 packages in 4.534s
➜  ~ npm uninstall -g @angular/bazel
removed 66 packages in 1.988s
➜  ~ npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
➜  ~ npm cache
➜  ~ npm cache verify
Cache verified and compressed (~/.npm/_cacache):
Content verified: 0 (0 bytes)
Index entries: 0
Finished in 0.016s
➜  ~ npm install -g @angular/cli@8.0.4
/Users/lifewood/.nodebrew/node/v10.14.1/bin/ng -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@8.0.4 postinstall /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

+ @angular/cli@8.0.4
added 228 packages from 175 contributors in 17.624s
➜  ~ npm install -g @angular/bazel
/Users/lifewood/.nodebrew/node/v10.14.1/bin/ngc-wrapped -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ngc-wrapped/index.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/xi18n -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ngc-wrapped/extract_i18n.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/packager -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/ng_package/packager.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/modify_tsconfig -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/modify_tsconfig.js
/Users/lifewood/.nodebrew/node/v10.14.1/bin/api-extractor -> /Users/lifewood/.nodebrew/node/v10.14.1/lib/node_modules/@angular/bazel/src/api-extractor/index.js
npm WARN @angular/bazel@8.0.2 requires a peer of @angular/compiler-cli@8.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/bazel@8.0.2 requires a peer of @bazel/typescript@0.* but none is installed. You must install peer dependencies yourself.
npm WARN @angular/bazel@8.0.2 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.

+ @angular/bazel@8.0.2
added 66 packages from 104 contributors in 10.112s
➜  ~ cd work
➜  work ng new ng-bazel-sample --collection=@angular/bazel
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE ng-bazel-sample/README.md (1030 bytes)
CREATE ng-bazel-sample/.editorconfig (246 bytes)
CREATE ng-bazel-sample/.gitignore (629 bytes)
CREATE ng-bazel-sample/angular.json (2085 bytes)
CREATE ng-bazel-sample/package.json (1510 bytes)
CREATE ng-bazel-sample/tsconfig.json (491 bytes)
CREATE ng-bazel-sample/tslint.json (1985 bytes)
CREATE ng-bazel-sample/browserslist (429 bytes)
CREATE ng-bazel-sample/karma.conf.js (1027 bytes)
CREATE ng-bazel-sample/tsconfig.app.json (210 bytes)
CREATE ng-bazel-sample/tsconfig.spec.json (270 bytes)
CREATE ng-bazel-sample/src/favicon.ico (5430 bytes)
CREATE ng-bazel-sample/src/index.html (300 bytes)
CREATE ng-bazel-sample/src/main.ts (372 bytes)
CREATE ng-bazel-sample/src/polyfills.ts (2838 bytes)
CREATE ng-bazel-sample/src/styles.css (80 bytes)
CREATE ng-bazel-sample/src/test.ts (642 bytes)
CREATE ng-bazel-sample/src/assets/.gitkeep (0 bytes)
CREATE ng-bazel-sample/src/environments/environment.prod.ts (51 bytes)
CREATE ng-bazel-sample/src/environments/environment.ts (662 bytes)
CREATE ng-bazel-sample/src/app/app.module.ts (314 bytes)
CREATE ng-bazel-sample/src/app/app.component.css (0 bytes)
CREATE ng-bazel-sample/src/app/app.component.html (1120 bytes)
CREATE ng-bazel-sample/src/app/app.component.spec.ts (1005 bytes)
CREATE ng-bazel-sample/src/app/app.component.ts (219 bytes)
CREATE ng-bazel-sample/e2e/protractor.conf.js (810 bytes)
CREATE ng-bazel-sample/e2e/tsconfig.json (214 bytes)
CREATE ng-bazel-sample/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE ng-bazel-sample/e2e/src/app.po.ts (251 bytes)
CREATE ng-bazel-sample/angular-metadata.tsconfig.json (731 bytes)
CREATE ng-bazel-sample/e2e/protractor.on-prepare.js (1106 bytes)
CREATE ng-bazel-sample/src/initialize_testbed.ts (432 bytes)
CREATE ng-bazel-sample/src/main.dev.ts (185 bytes)
CREATE ng-bazel-sample/src/main.prod.ts (249 bytes)
CREATE ng-bazel-sample/src/rxjs_shims.js (1259 bytes)
CREATE ng-bazel-sample/angular.json.bak (3631 bytes)

> fsevents@1.2.9 install /Users/lifewood/work/ng-bazel-sample/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/lifewood/work/ng-bazel-sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> core-js@2.6.9 postinstall /Users/lifewood/work/ng-bazel-sample/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> core-js@2.6.9 postinstall /Users/lifewood/work/ng-bazel-sample/node_modules/karma/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> protobufjs@6.8.8 postinstall /Users/lifewood/work/ng-bazel-sample/node_modules/protobufjs
> node scripts/postinstall


> sauce-connect-launcher@1.2.7 postinstall /Users/lifewood/work/ng-bazel-sample/node_modules/sauce-connect-launcher
> node scripts/install.js || nodejs scripts/install.js


> @angular/cli@8.0.4 postinstall /Users/lifewood/work/ng-bazel-sample/node_modules/@angular/cli
> node ./bin/postinstall/script.js


> ng-bazel-sample@0.0.0 postinstall /Users/lifewood/work/ng-bazel-sample
> ngc -p ./angular-metadata.tsconfig.json

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @bazel/bazel-win32_x64@0.26.1 (node_modules/@bazel/bazel/node_modules/@bazel/bazel-win32_x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @bazel/bazel-win32_x64@0.26.1: wanted {"os":"win32","arch":"any"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @bazel/bazel-linux_x64@0.26.1 (node_modules/@bazel/bazel/node_modules/@bazel/bazel-linux_x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @bazel/bazel-linux_x64@0.26.1: wanted {"os":"linux","arch":"any"} (current: {"os":"darwin","arch":"x64"})

added 1140 packages from 1159 contributors and audited 22029 packages in 55.826s
found 0 vulnerabilities

            Successfully initialized git.

まとめ / Summary

bazel に限らず、npm インストールが上手く行かない時は、キャッシュをクリアしましょう。
Not only for bazel, but if npm installation does not go well, please clear the cache.

参考 / reference

Typedoc starting with Angular project

ANGULAR x TYPEDOC

Typedoc starting with Angular project
Angular プロジェクトで始めるtypedoc


きっかけ / Trigger

日常の業務で、プログラム仕様書を作成する時間を効率良く確保するために typedocの導入を決めました

導入 / Introduction
事前準備環境

今回のバージョンは、下記の通りです。

  • node v10.14.1
  • npm v6.5.0
  • Angular CLI v6.0.0
  • typescript ~v2.7.2
  • typedoc ~v0.12.0



angular プロジェクトの作成 / create angular project

下記コマンドでプロジェクトを作成します / Create a project with the following command

    
      ➜  $ ng new typedoc-sample --style=scss // スタイルシートは、scss
    
  


typedoc のインストール / typedoc installation

下記コマンドでtypedocをインストールします / Install typedoc with the following command

    
      ➜  $ npm install –save-dev typedoc
    
  


typedoc.json 実装 / typedoc.json implementation

typedoc.jsonを下記内容で作成します / Create typedoc.json with the following contents

    
      {
        "mode": "modules",
        "out": "docs",  <== ドキュメント出力フォルダ
        "theme": "default",
        "ignoreCompilerErrors": "true",
        "experimentalDecorators": "true",
        "emitDecoratorMetadata": "true",
        "target": "ES5",
        "moduleResolution": "node",
        "preserveConstEnums": "true",
        "stripInternal": "true",
        "suppressExcessPropertyErrors": "true",
        "suppressImplicitAnyIndexErrors": "true",
        "module": "commonjs"
      }
    
  


typedoc スクリプト実装 / typedoc script implementation

package.jsonに下記内容のスクリプトに追記します / Add the script below to package.json 参考: https://typedoc.org/api/

    
      "docs": "npm run typedoc -- --options typedoc.json --mode file --exclude '**/*.spec.ts' ./src/",
      "typedoc": "typedoc",
    
  


typedoc コメント実装 / typedoc comment implementation

typedocフォーマットを関数に記載します / Describe typedoc format in function
参考: https://typedoc.org/api/

    
      /**
      * 関数の説明
      * @param path ダミー引数
      * @return ダミー戻り値
      */
      sampleMethod(path: string): string {
        return path;
      }
    
  


typedoc 生成 / typedoc generate

typedoc を生成します / generate typedoc

    
      $ npm run docs
      > typedoc-sample@0.0.0 docs
      > npm run typedoc -- --options typedoc.json --mode file --exclude '**/*.spec.ts' ./src/

      > typedoc-sample@0.0.0 typedoc /work/typedoc-sample
      > typedoc "--options" "typedoc.json" "--mode" "file" "--exclude" "**/*.spec.ts" "./src/"

      Using TypeScript 3.0.1 from /typedoc-sample/node_modules/typedoc/node_modules/typescript/lib
      Rendering [========================================] 100% Documentation

      generated at /typedoc-sample/docs
    
  


Github へ push / push to Github

Github へ pushします / push to Github

    
      ➜  $ git push origin master
    
  


Github Page の設定 / Github Page Settings

リポジトリ => Settings => GitHub Pages
repository => Settings => GitHub Pages

 setting


公開結果 / Public results

公開ページ / Public Page


github pages

生成ドキュメント / Generated document


Generated document

サンプルコード / sample code


sample code

サンプルページ / sample page


sample page

For your reference / 参考文献

Protractor Setting for Internet Explorer 11

Overview / 概要

this blog explain to Protractor setting for Internet Explorer 11. この記事は、Internet Explorer 11 用の Protractor の設定を説明します。

JDK setting / JDK 設定
  1. JDK Download / JDK ダウンロード f:id:ic_lifewood:20190501030756p:plain
  2. JDK install
  3. setting for Windows Environment Variable. Windows 環境変数の設定
    1. control panel open. コントロールパネルを開きます
      f:id:ic_lifewood:20190501034336p:plain
    2. System and Security click. システムとセキュリティをクリックします
      f:id:ic_lifewood:20190501031525p:plain
    3. System click. システムをクリックします
      f:id:ic_lifewood:20190501033320p:plain
    4. Advanced system setting click. システムの詳細設定をクリックします
      f:id:ic_lifewood:20190501033415p:plain
    5. Environment variable click. 環境変数をクリックします
      f:id:ic_lifewood:20190501033437p:plain
    6. setting to System variables frame システムの環境変数枠の設定
      f:id:ic_lifewood:20190501033503p:plain
      click New button. 新規ボタンをクリックします
      f:id:ic_lifewood:20190501033523p:plain
      1. type to Variable name: JAVA_HOME
      2. type to Variable value: C:\Program Files\Java\jdk1.8.0_161
      3. click OK button. OK ボタンをクリックします
    7. editing to System variables frame システムの環境変数枠の編集
      f:id:ic_lifewood:20190501033543p:plain
      path click.path 行をクリックします
      1. click Edit button. 編集ボタンをクリックします
      2. click New button. 新規ボタンをクリックします
      3. input to cursor prompt. C:\Program Files\Java\jdk1.8.0_161\bin
      4. click OK button. OK ボタンをクリックします
    8. click OK button. OK ボタンをクリックします
    9. Environment variable Window close. 環境変数ウィンドウを閉じます
  4. For your reference / 参考文献
    JDK Installation for Microsoft Windows
Windows Registory setting / Windows レジストリ設定
  1. Start regedit.exe . regedit.exe 起動します
    f:id:ic_lifewood:20190501033611p:plain
  2. Registory key search to following this. 以下のレジストリのキーを検索します
    f:id:ic_lifewood:20190501033633p:plain
    1. For 32-bit Windows / Windwos 32 bit 版
      HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE
    2. For 64-bit Windows / Windwos 64 bit 版
      HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE
  3. add Registory key. レジストリのキーを追加します
    f:id:ic_lifewood:20190501033713p:plain
    Value name: iexplorer.exe
    Value data: 0
  4. End regedit.exe .
    regedit.exe 終了します
  5. For your reference / 参考文献
    1. InternetExplorerDriver
    2. Protractor test in IE
Internet Explorer 11 Browser setting / Internet Explorer 11 ブラウザ設定
  1. Start Internet Explorer 11. Internet Explorer 11 を起動します
  2. tools click. ツール をクリックします
  3. Zoom rate changed to 100% 拡大率100% に変更します
    f:id:ic_lifewood:20190501033800p:plain
  4. tools click. ツール をクリックします
  5. internet options click. インターネットオプション をクリックします
    f:id:ic_lifewood:20190501033821p:plain
  6. In General tab 全般 タブ
    f:id:ic_lifewood:20190501033842p:plain
    1. checkbox turn on チェックボックスon にします
      1. Delete browsing history on exit 終了時に閲覧履歴を削除する
  7. In Security tab セキュリティ タブ
    1. Disable protected mode for all zones 全てのゾーンで保護無効にします。
      1. Internet / インターネット
        f:id:ic_lifewood:20190501033907p:plain
      2. Local internet / ローカルイントラネット
        f:id:ic_lifewood:20190501033928p:plain
      3. Trust sites / 信頼済みのサイト
        f:id:ic_lifewood:20190501033947p:plain
      4. Restricted sites / 制限付きサイト
        f:id:ic_lifewood:20190501034010p:plain
  8. In Privacy tab プライバシー タブ
    f:id:ic_lifewood:20190501034027p:plain
    1. checkbox turn off PopUp Blocker
      ポップアップブロックのチェックボックスoff にします
  9. In Advanced tab
    詳細設定 タブ
    1. checkbox turn off
      チェックボックスoff にします
      f:id:ic_lifewood:20190501034051p:plain
      f:id:ic_lifewood:20190501034114p:plain
      1. Check for publiser's certificate revoctation
        発行元の証明書失効を確認する
      2. Check for Server certificate revoctation*
        サーバーの証明書失効を確認する*
      3. Check for Signature on downloaded programs
        ダウンロードしたプログラムの署名を確認する
      4. Warn about certificate address mismatch*
        証明書のアドレスの不一致について警告する*
      5. Warn if POST submittal is redirected to a zone that does not permit posts
        POST送信がPOSTを許可しないゾーンにリダイレクトされた場合に警告する
    2. checkbox turn on
      チェックボックスon にします
      1. Empty Temporary Internet files folder when browser is closed.
        ブラウザが閉じたとき、[Temporary Internet Files] フォルダを空にする
  10. For your reference / 参考文献
    1. Protractor test in IE
Internet Explorer Web Driver setting / Internet Explorer Web ドライバ設定
  1. Precondition / 前提 repository already cloned to `C:\work` リポジトリC:\work 配下にクローン済み
  2. move dirctory / ディレクトリ移動
            
              $ cd C:\work\\node_modules/protractor/bin/
            
          
  3. command excute. (IEDriver update) / コマンド実行 (IEDriver アップデート)
            
              $ ./webdriver-manager update --ie
            
          
  4. For your reference / 参考文献
    1. with protractor how to setup internet explorer configuration?
Protractor setting / Protractor 設定
  1. script add to package.json / package.json に script を追加
            
                example / 実装例
                "scenario": "ng e2e -c protractor.conf.js",
                "scenario:ie": "ng e2e -c protractor.ie.conf.js" <== for internet explorer
            
          
  2. create protractor.ie.conf.js. /protractor.ie.conf.js を作成 IEDriver just used an IEDriverServer3.9.0.exe. IEDriver は、 IEDriverServer3.9.0.exe を使用
            
              example / 実装例
              directConnect: false,
              capabilities: {
                'browserName': 'internet explorer',
                'platform': 'ANY',
                'version': '11'
              },
              localSeleniumStandaloneOpts: {
                jvmArgs: [
                  '-Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer3.9.0.exe'
                ]
              },
            
          
  3. For your reference / 参考文献
    1. Setting Up the Selenium Server
    2. Karma IE Testing of Polymer Elements with WebDriver
Internet Explorer 11 Click test trouble shooting / Internet Explorer 11 クリックテスト トラブル対応
If you encounter a problem of Internet Explorer 11 click test trouble, Please try the following
Internet Explorer 11 クリックテストトラブルに遭遇したら、以下のことを試して下さい。
  1. edit protractor.ie.conf.js. /protractor.ie.conf.js を編集
            
                example / 実装例
                directConnect: false,
                capabilities: {
                  'browserName': 'internet explorer',
                  'platform': 'ANY',
                  'version': '11',
                  'nativeEvents': false,     <== add parameter
                  'unexpectedAlertBehaviour': 'accept', <== add parameter
                  'ignoreProtectedModeSettings': true, <== add parameter
                  'disable-popup-blocking': true, <== add parameter
                  'enablePersistentHover': true <== add parameter
                },
                localSeleniumStandaloneOpts: {
                    jvmArgs: [
                      '-Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer3.9.0.exe'
                    ]
                },
            
          
  2. sample code / サンプルコード
          
            example / 実装例
            import { browser } from 'protractor';
            
            // branch proccessing for each browser
            export class PageOperationHelper {
              private browserNmae: string = null;       
              private BROWSER_NAME_IE = 'internet explorer';
            
              constructor() {
                // when instance created, get browserName.         
                browser.getCapabilities().then((cap) => {
                  this.browserNmae = cap.get('browserName');
                });
              }
              // for click events
              async click(targetSelector) {
                await browser.waitForAngular();         
                if (this.browserNmae === this.BROWSER_NAME_IE) {
                  // for internet explorer 11 code
                  await browser.executeScript('arguments[0].click();', targetSelector.getWebElement());
                } else {
                  // for chrome code
                  await targetSelector.click();
                }
              }
            }
          
        
  3. For your reference / 参考文献
    1. IE11 click trouble #3

Angular Document Transration Begining

Angular ドキュメント翻訳の事始め

この記事は、Angular Advent Calendar 2017の23日目の記事です。
this report is Angular Advent Calendar 2017, day 23.

Angular ドキュメントの翻訳について紹介します。
I will introduce translation of Angular documents.  


まず最初に見る所 / First place to see

angular/angular-ja の README.md を読みましょう。
Let's read README.md of angular / angular-ja.

基本的な事は、全てここに記載されています。
All the basic things are listed here.


実施環境 / Implementation environment

npm, node, yarn, Tyepscript, Angular cli のバージョンは、下記の通りです。
npm, node, yarn, Tyepscript, Angular cli version is following.




セットアップ / Set Up

  1. リポジトリのクローン / clone of repository
        
          ➜  git clone git@github.com:angular/angular-ja.git  # From angular/angular-ja
          or 
          ➜  git clone https://github.com/UserName/angular-ja.git # From Fork repository
        
      
    ※自分は、先にフォークしてからクローンしました。
    ※I first forked and cloned it.
  2. angular/angularリポジトリのダウンロード download of angular/angular repository
  3. npm インストール / npm install
        
          ➜  angular-ja git:(master) ✗ npm i  # npm install
        
      

README.md の手順通りです。
※npm インストールを追記しています。 / add steps npm install.


ローカルでのビルド / Local Building

  
    ➜  angular-ja git:(master) ./build.sh
  
 

README.md の手順通りです。
※npm インストールを追記しています。 / add steps npm install.


ローカルでのビルドで躓いた事 / point of failed for Local Building

  • node のバージョン / node's version 当初 v8.4.0 でしたが、ビルドする際に、エラーが発生する為、バージョンを v6.9.5 にしました。
    at first v8.4.0, version down to v6.9.5. beacause build error had occured.
  • yarn のバージョン / yarn's version
    yarn のバージョンをv1.3.2にしました。
    yarn のバージョン v1.0.0以下だと、ビルドエラーが発生する為です。
    Because yarn version v1.0.0 or less, a build error had occured.
  • Tyepscript のバージョン / Tyepscript's version
    Tyepscript のバージョンをv2.4.2にしました。 下記警告が、出力されますが問題ありません。
    The following warning is output, but there is no problem.
  • SSHキーに誤りがありました。 / wrong SSH key
    githubSSHキーをさくらVSPサーバーのSSHキーに上書きしていた為、
    下記エラーが発生しました。
    Follwong Error had occured.
    Beacuse SSH key of github had overwite by SSH key of SAKURA VPS Server
          
            ➜  angular-ja git:(master) git submodule update --init
            Submodule 'origin' (git@github.com:angular/angular.git) registered for path 'origin'
            Cloning into '/Users/UserName/work/angular-ja/origin'...
            git@github.com: Permission denied (publickey).
            fatal: Could not read from remote repository.
          
        

    Please make sure you have the correct access rights and the repository exists.
    fatal: clone of 'git@github.com:angular/angular.git' into submodule path '/Users/UserName/work/angular-ja/origin' failed


翻訳作業 / Translation Work

  1. 翻訳宣言のイシューを作成する / Creating New Issue
  2. 翻訳で置き換えたいファイルを aio-ja ディレクトリにコピーする Copy the file you want to replace with the translation into the aio-ja directory

    今回の場合は、既に guide/testing.md が aio-ja ディレクトリにありました。
    In this case, you already have guide / testing.md in the aio-ja directory.

  3. 翻訳します / Translate
  4. プルリクエストを作成します / Create Pull Request ※この記事では、プルリクエストを作成していません。
    ※事前にフォークしたリポジトリからプルリクエストしても同じです。



ローカルでの確認 / Local Confirm

  
  ➜  angular-ja git:(master) ✗ cd .tmp/aio
  ➜  aio git:(6e8e3bd) yarn serve-and-sync
  



まとめ / Summary
  今回は主に翻訳に着手するまでの過程で、自分が躓いた点をまとめました。
This time I mainly compiled the points I gained in the process until I started translating.
記事作成中に ng-japan の Slack の #traslation で、こんなポストがありました。
というわけで、慌てずに年末年始で翻訳する準備をしてみては如何でしょうか?
so, What do not you try getting ready to translate?
明日は、 @albatrosary さんです!
Tomorrow is @albatrosary !


追記 / Additional notes
  後日(12/26)に更新のポストが有りました。 There was an update post at (12/26) at a later date. 翻訳環境を更新しました。 I updated the translation environment.  
npm, node, yarn, Tyepscript, Angular cli のバージョンは、下記の通りです。 npm, node, yarn, Tyepscript, Angular cli version is following.

リポジトリの更新は、下記状態になります。 Updating the repository is as follows.


yarn's memo

            yarn のバージョンアップで気付いたので、メモ

As I noticed in version up of yarn


きっかけ / Trigger

yarn の最新バージョンを知ったので、バージョンアップしてみたら、更新されなかった。 Since I knew the latest version of yarn, I did not update it as I upgraded it.

➜ ~ yarn -v

yarn v1.2.1 ==> v1.3.2 になるはずだった It was supposed to be yarn v1.2.1 ==> v1.3.2


試行錯誤 / Trial And Error

➜ ~ npm install yarn -g /Users/Account/.nodebrew/node/v8.4.0/bin/yarnpkg -> /Users/Account/.nodebrew/node/v8.4.0/lib/node_modules/yarn/bin/yarn.js /Users/Account/.nodebrew/node/v8.4.0/bin/yarn -> /Users/Account/.nodebrew/node/v8.4.0/lib/node_modules/yarn/bin/yarn.js + yarn@1.3.2 added 1 package in 1.842s ➜ ~ yarn -v 1.2.1 ➜ ~
バージョンアップされない。 / Not upgraded.
➜ ~ brew uninstall yarn Uninstalling /usr/local/Cellar/yarn/1.3.2... (14 files, 3.9MB) ➜ ~ brew install yarn Updating Homebrew... ==> Downloading https://yarnpkg.com/downloads/1.3.2/yarn-v1.3.2.tar.gz 🍺 /usr/local/Cellar/yarn/1.3.2: 14 files, 3.9MB, built in 1 second ➜ ~
バージョンアップされない。 / Not upgraded.


原因 / Cause

.yarn, .yarnrc が古いバージョンを示していた模様。 It seems that .yarn, .yarnrc indicated the old version.



対策 / CounterPlan

➜ ~ mv .yarn back.yarn ➜ ~ mv .yarnrc back.yarnrc

上記コマンド実行後、確認したら直った。 After execution of the above command, I fixed it after confirming it.