Angular 4 templateUrl file not found - ruby-on-rails

Question

I am using Angular 4.1.3 with Rails 5.1
I am trying to implement the app component and if I use template and write my html, everything works, but I want to use templateUrl.
Here is my component.
import { Component } from '#angular/core';
#Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {}
And this is my file structure
├── app
| ├── app.component.html
| └── app.component.ts
| └── app.module.ts
I understand that in the #Component you can add moduleId: module.id but I thought this is no longer needed in angular 4.1.3.
If I do add it, it tells me:
moduleId should be a string in "AppComponent"
I also thought that if you do not include the moduleId angular just grabs from root directory, but if I do an absolute path, it should work right?
If you guys could help, that would be awesome.

Answer 1

I am assuming you're using the new webpacker-gem in your rails project!
There is a description of how to use templateUrl with it here in the documentation: Use HTML templates with Typescript and Angular

Answer 2

If you would like to keep templateUrl you could use angular2-template-loader webpack plugin:
# add plugins to project
yarn add angular2-template-loader raw-loader
and configure it:
# edit config/webpack/loaders/angular.js with
module.exports = {
test: /.ts$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
}
# create a new loader for htmls config/webpack/loaders/html.js
module.exports = {
test: /\.(html)$/,
loader: 'raw-loader',
exclude: /\.async\.(html)$/
}