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