Clever Geek Handbook

Angular 4 templateUrl file not found

I am using Angular 4.1.3 with Rails 5.1

I am trying to implement an application component and if I use a 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 @Component you can add moduleId: module.id, but I thought it was no longer needed in Angular 4.1.3.

If I add it, it tells me: moduleId should be a string in "AppComponent"

I also thought that if you don't include the Angular moduleId, just grabs from the root directory, but if I do an absolute path, should it work correctly?

If you guys could help, that would be awesome.

+1


source to share


2 answers


I am assuming you are using the new webpacker-gem in your rails project!



Below is how to use templateUrl with it in the documentation: use HTML templates with Typescript and Angular.

+2


source


If you want to keep the templateUrl, you can use the 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)$/
}
+1


source






More articles:


All Articles