angular-with-rails

Angular with Rails

Angular doesn't fit Inertia's "props from server" model the way React and Vue do. Use classical API + SPA: Rails-API serves JSON, Angular lives in its own folder/repo as a true SPA.

The opinion

Classical API + SPA for Angular. Rails-API mode. Angular 17+ with standalone components. Signals or NgRx for state. JWT auth (short-lived + refresh). Deploy Angular and Rails separately. Inertia has an Angular adapter but the ecosystem is thin — don't pick it for new work.

Setup

backend/        Rails-API
frontend/       Angular SPA

# backend/Gemfile
gem "rails", "~> 8.0"
# (Use Rails-API mode: rails new backend --api)

# frontend/
ng new myapp-frontend --standalone --routing --style=scss

Core patterns

Pattern 1: API design for Angular

Standard REST + JSON. See rails-api-design. JSON:API serializers or alba.

# config/routes.rb
namespace :api do
  namespace :v1 do
    resources :posts, only: %i[index show create update destroy]
    resource :session, only: %i[create destroy]
  end
end

Pattern 2: JWT auth flow (Angular service)

// frontend/src/app/auth/auth.service.ts
import { Injectable } from "@angular/core"
import { HttpClient } from "@angular/common/http"
import { tap } from "rxjs"

@Injectable({ providedIn: "root" })
export class AuthService {
  constructor(private http: HttpClient) {}

  login(email: string, password: string) {
    return this.http.post<{ access_token: string, refresh_token: string }>(
      "/api/v1/session",
      { email, password }
    ).pipe(
      tap(res => {
        sessionStorage.setItem("access_token", res.access_token)
        // refresh_token: store httpOnly cookie if possible; otherwise sessionStorage
        sessionStorage.setItem("refresh_token", res.refresh_token)
      })
    )
  }

  refresh() {
    const refreshToken = sessionStorage.getItem("refresh_token")
    return this.http.post<{ access_token: string, refresh_token: string }>(
      "/api/v1/session/refresh", { refresh_token: refreshToken }
    ).pipe(tap(res => {
      sessionStorage.setItem("access_token", res.access_token)
      sessionStorage.setItem("refresh_token", res.refresh_token)
    }))
  }
}