ほぼこれの通りにやるだけなんだけど一応メモ https://github.com/rails/webpacker/blob/master/docs/typescript.md#html-templates-with-typescript-and-angular
デフォルトだとどうなるか?
環境は rails new で webpack=angular にしただけ。
import { Component } from '@angular/core';
@Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
これでやるとデベロッパーツールの console に http://localhost:5000/app.component.html 404 (Not Found)
が出る。
解決方法
- webpack に html も取り扱ってもらえるようにする
$ yarn add html-loader
- config/webpack/loaders/html.js というファイルを作成して以下のように記述
module.exports = { test: /\.html$/, use: [{ loader: 'html-loader', options: { minimize: true, removeAttributeQuotes: false, caseSensitive: true, customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ], customAttrAssign: [ /\)?\]?=/ ] } }] }
- config/webpack/environment.js に追記
const { environment } = require('@rails/webpacker') const typescript = require('./loaders/typescript') const html = require('./loaders/html') // 👈 追加 environment.loaders .append('typescript', typescript) .append('html', html) // 👈 追加 module.exports = environment
- config/webpacker.yml の extensions に
.html
を追加する -
index.ts のあるディレクトリに html.d.ts ファイルを作成する
declare module "*.html" { const content: string export default content }
*.d.ts
ファイルは TypeScript の型定義をなんやするらしい。まだよくわかっていない。
結果
import { Component } from '@angular/core'
import templateString from './template.html'
@Component({
selector: 'hello-angular',
template: templateString
})
export class AppComponent {
name = 'Angular!'
}
templateUrl でファイルを見に行くのではなく import したものを template に埋め込むことで実現できる
注意点として、
import templateString from './template.html'
を
import templateString from 'template.html'
にしてしまうと
Uncaught Error: Cannot find module "appTemplate.html"
でエラーになる