らいふうっどの閑話休題

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

Angular & bazel's memo part create project

Angular Npm Bazel

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