プログラミング」カテゴリーアーカイブ

Rails5.1 + Angular4で templateUrl, styleUrlsの代替

以前紹介したとおりRails5.1+rails webpackでtemplateUrlを使うことはできない。

Rails5.1.2でAngularを使うとtemplateUrlでエラーが出る – こんがりぃ

ちなみにドキュメントがReadmeからdocディレクトリに移ったみたい。

webpacker/typescript.md at master · rails/webpacker · GitHub

ではstyleUrlsの代替は

@Component({
selector: 'hogehoge',
styles: [require('./app.component.css').toString()]
})

これでOK。

TS2304: Cannot find name 'require'. というエラーが出た場合は

yarn add @types/node

でOK。

angular – Cannot find name 'require' after upgrading to Angular4 – Stack Overflow

BootstrapのModal内でSelect2をうまく表示する

BootstrapのModal内でSelect2を使うとレイアウトが崩れてしまう。

Modalの tabindex = -1 を取るといいというのもあるらしいが、それをしてもレイアウトが崩れて困っていたが以下のリンクの通りすればいけた。

github.com

$('.hoge').select2({
dropdownParent: $('.fuga')
})

Rails5.1.2でAngularを使うとtemplateUrlでエラーが出る

概要

エラーの出るソース

import { Component } from '@angular/core';
@Component({
selector: 'hello-angular',
templateUrl: './app.component.html'
})
export class AppComponent {
name = 'Angular!';
}

エラー内容

サーバ側

ActionController::RoutingError (No route matches [GET] "/app.component.html"):

クライアント側

http://192.168.33.99:3000/app.component.html [HTTP/1.1 404 Not Found 41ms]
Unhandled Promise rejection: Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html undefined

解決法

stackoverflow.com

rails/webpackのgithub上に書いてる Use HTML templates with Typescript and Angular の手順通りにする

github.com

templateUrlではなくtemplateに落とし込んで頑張ってレンダリングするっぽい。

Rails5.1.0 で React を導入するときに詰まったNode.jsエラー: Node.js not installed.

環境

  • Ubuntu16.04
  • Ruby2.4.1
  • Rails5.1.0

rails new したあとに rails webpacker:install:react すればよいと聞いていたのでやってみるがエラーが出た

$ bundle exec rails webpacker:install:react
Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/

Node.jsはapt-get install nodejs で入れていたつもり

$ nodejs -v
v4.2.6

もしかしたら node ではなく nodejs にコマンド名がなっているせいかと思い nodejs-legacy をインストール

$ sudo apt-get install nodejs-legacy
$ bundle exec rails webpacker:install:react
Webpacker requires Node.js >= v6.4 and you are using v4.2.6
Please upgrade Node.js https://nodejs.org/en/download/

エラーがversionエラーになった。

nodejsを最新版に上げてみる

$ sudo apt-get install npm
$ sudo npm install -g n
$ sudo n stable
$ sudo ln -sf /usr/local/n/versions/node/7.10.0/bin/node /usr/bin/node
$ node -v
v7.10.0
$ bundle exec rails webpacker:install:react
Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/

yarnがいるよと言われた。

$ sudo npm install -g yarnpkg
$ yarn -v
yarn install v0.15.1
$ bundle exec rails webpacker:install:react
Configuration config/webpack/paths.yml file not found.
Make sure webpacker:install is run successfully before running dependent tasks

rails webpacker:install が必要っぽい

$ bundle exec rails webpacker:install
Webpacker is installed �
sing /home/ubuntu/rails/config/webpack/paths.yml file for setting up webpack paths
Copying react preset to your .babelrc file
Copying react loader to /home/ubuntu/rails/config/webpack/loaders
create  config/webpack/loaders/react.js
Copying react example entry file to /home/ubuntu/rails/app/javascript/packs
create  app/javascript/packs/hello_react.jsx
Installing all react dependencies
run  ./bin/yarn add react react-dom babel-preset-react prop-types from "."
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install
Webpacker now supports react.js �

yarnがない?npmじゃなくてパッケージで入れてみる

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn
$ bundle exec rails webpacker:install:react
Done in 5.22s.

できたっぽい。

追記

yarnはパッケージじゃないとだめっぽいので以下を再実行したほうがよさそうです。

$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:react

Cordovaエラー No image found at the path referenced under key “CFBundleIconFile”: Icon.png

Cordovaのエラーではないけど、VisualStudio2015のCorodvaアプリをiOS releaseでビルドして審査に出そうとすると、タイトルのエラーが出て提出できない。

ipaファイルを展開してみると、たしかにrootにicon.pngがない。config.xmlとかいろいろicon.pngを置く場所とかいろいろ試してみたけど、どうしてもrootにicon.pngがコピーされない。

とりあえずの対処法として、ipaファイルを一度展開して、icon.pngをおいて、再度パッケージ化することにした。

## Mac上で
# VSからリモートビルドしたipaを用意、展開
unzip HOGE.ipa
# 署名削除
rm -rf Payload/HOGE.app/_CodeSignature
# icon.pngをrootに設置
cp icon.png ./Payload/HOGE.app/
# 署名
codesign -f -s "MySIGN" ./Payload/HOGE.app --entitlements ../entitlements.plist
# パッケージ化
zip -qr HOGE.ipa Payload

entitlements.plistは

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>application-identifier</key>
<string>PREFIX.ID</string>
<key>com.apple.developer.team-identifier</key>
<string>TEAMID</string>
<key>get-task-allow</key>
<false/>
<key>keychain-access-groups</key>
<array>
<string>PREFIX.ID</string>
</array>
</dict>
</plist>

参考サイト

[Appium] Ad-hoc用のipaファイルを開発者用の署名に差し替えてAppiumで使用できるようにする – Qiita

ipaファイルのProvisioningを差し替える – Qiita