Rails 5.1 Angular templateUrl
Question
What do I need to do to get my Angular app to allow me to use the templateUrl
decorator property Component
? When you create a new Rails 5.1 app and use a flag --webpack=angular
, it gives you a proof of concept for Angular, but as soon as I started building more components, I began to realize that I didn't know how to go about the correct templating path. I'm not even sure if they are being listened to, to be honest.
What i tried
- Tried many different paths, from the whole filename, all the way to the root of the application, one folder at a time.
- Googling for someone else facing the same problem.
- include
CommonModule
in my import inapp.module.ts
.
Background
I am really used to using the Angular CLI and I don't remember ever having a problem using a property templateUrl
. What makes an Angular CLI project different from what you are given in a Rails 5.1 application in terms of configuration that affects templates? Will I be able to use Angular CLI in a Rails 5.1 application without having to modify much of the Rails application itself?
source to share
You can do it. But this requires a different webpack loader setup and a few small tweaks.
But first: shopping!
$ yarn add \
html-loader \
awesome-typescript-loader \
angular2-template-loader \
@types/node \
--dev
When installing all required packages, replace config/webpack/loaders/angular.js
as follows:
const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { useCache: !isProd }
},
'angular2-template-loader'
]
};
angular2-template-loader
scans your component decorators for the argument templateUrl
and replaces it with something like template: require('...')'
. The call require()
is , of course, the reason for the installation @types/node
.
awesome-typescript-loader
slightly more optimized than the default ts-loader
(which will probably work here too, but I haven't tested it).
So far so good. Then we need to tell webpack how to load the HTML files. Add config/webpack/loaders/html.js
with the following content:
module.exports = {
test: /\.html$/,
loader: 'html-loader',
};
Nothing is clear here. Moving on.
In your Javascript application, add type information for * .html files to app/javascript/hello_angular/html.d.ts
:
declare module "*.html" {
const content: string
export default content
}
This tells the TypeScript compiler what is require('template.html')
returning a string.
Last but not least, you added .html to the recognized extensions in config/webpacker.yml
:
default: &default
# ...
extensions:
# ...
- .html
# ...
You should be fine now:
import { Component } from '@angular/core';
@Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
Remember to restart bin/webpack-dev-server
.
In theory, you can do the same for styleUrls
. But this is more confusing with rails / webpacker and you will lose some of its functionality.
source to share