- Create new project by running,
rails new angular_on_rails cd angular_on_rails - The frontend will be Angular so installing dependencies of webpacker:angular as,
rails webpacker:install:angular
- Create new controller as,
rails g controller dashboard
- Add Index method to
dashboard_controller.rb - Add root page to
routes.rbasroot to: 'dashboard#index' - Under views folder, add folder with name
dashboardand underneath that folder addindex.html.erbfile - Add following lines to
index.html.erb<hello-angular></hello-angular> <%= javascript_pack_tag "hello_angular" %>
- Start the server by running
rails s - Cheers!
- First we need
.htmlloader for Angularyarn add html-loader
- Add following line of code to
enviroment.jsconst { environment } = require('@rails/webpacker') const typescript = require('./loaders/typescript') environment.loaders.append('html', { test: /\.html$/, use: [{ loader: 'html-loader', options: { minimize: true, removeAttributeQuotes: false, caseSensitive: true, customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ], customAttrAssign: [/\)?\]?=/] } }] }) environment.loaders.prepend('typescript', typescript) module.exports = environment - Add html extension to
webpacker.ymlas/config/webpacker.ymlextensions: - .tsx - .ts - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg - .html
- Create
html.d.tsfile asapp/javascript/hello_angular/html.d.tsand add following line of codedeclare module "*.html" { const content: string export default content }
- Now enviroment is set, so let's create
app.component.htmlasapp/javascript/hello_angular/app/app.component.htmland add code in it as below<h1>Hello {{name}}</h1>
- Call it in the module of
app.module.tsas,import { Component } from '@angular/core'; import templateString from './app.component.html' @Component({ selector: 'hello-angular', template: templateString }) export class AppComponent { name = 'Tushar!'; } - Cheers!
- Simple tuitorial to follow is given in the webpacker git repo (https://github.com/rails/webpacker/blob/master/docs/typescript.md#html-templates-with-typescript-and-angular)