Angular on Rails 6 with webpacker

Integration of Angular 8 with Rails 6 using webpacker

There are various articles on building Rails application with Angular, but still, I was stuck on a few points related to the customization in Angular pages while integrating and exploring webpacker with Rails 6. So this article is dedicated to customizing various stuff while dealing with the integration of Angular 8 with Rails 6 using webpacker.

Webpacker is a gem used for managing and building JavaScript code and can be used with Rails version 5.2+

The implemented project link is given below,

tadhao/angular_on_rails

So let’s divide the implementation into two simple steps as,

• Creating a Rails project and installing required Angular dependences
• Customization for HTML page for Angular 8

Creating a Rails project and installing required Angular dependences

So let’s start with creating new Rails project by simply running,

rails new angular_on_rails 
cd angular_on_rails

The frontend will be Angular so installing dependencies for webpacker:angular as,

rails webpacker:install:angular

Create new dashboard controller which can be given as,

rails g controller dashboard

After that add index action to dashboard_controller.rb so that we have at least one action along with one page to display with the path asviews/dashboard/index.html.erb. We will need to add the root path in routes.rb to load default page which can be given as

root to: ‘dashboard#index’

Under views folder, add a folder with the name asdashboard and underneath that folder add index.html.erb file so as to get the path as, views/dashboard/index.html.erb and add the following lines to index.html.erb

<hello-angular></hello-angular> 
<%= javascript_pack_tag “hello_angular” %>

Since everything is set at its proper places, let’s start the server by rails s and Cheers!

Customization for HTML page for Angular 8

Now to customize Angular application pages, we need html-loader for Angular which can be installed as given below,

yarn add html-loader

Now a few lines of code need to get added to environment.js to get these settings a kick-start which is given as below,

const { 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

Need to add few lines of code for allowing extensions like HTML extension into webpacker.yml located at /config/webpacker.yml which is given below,

extensions: 
 — .tsx 
 — .ts 
 — .mjs 
 — .js 
 — .sass 
 — .scss 
 — .css 
 — .module.sass 
 — .module.scss
 — .module.css
 — .png
 — .svg
 — .gif
 — .jpeg
 — .jpg
 — .html

Create html.d.ts file with the path given as app/javascript/hello_angular/html.d.ts and add the following line of code given as,

declare module "*.html" {    
  const content: string    
  export default content  
}

Now the environment is set, so let’s create app.component.html which can be located asapp/javascript/hello_angular/app/app.component.html and add the following line of code to display dynamic values to HTML pages from Angular which is given as below,

<h1>Hello {{name}}</h1>

Call it in the module of app.module.ts which can be given as,

import { Component } from ‘@angular/core’; 
import templateString from ‘./app.component.html’;
@Component({ 
  selector: ‘hello-angular’, 
  template: templateString 
}) 
export class AppComponent { 
name = ‘Tushar!’; 
}

Now Cheers! The customization has been done for a single page which can be extended for various new pages from Angular.