以前紹介したとおり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

概要

エラーの出るソース

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に落とし込んで頑張ってレンダリングするっぽい。