如何在Rails 5项目中使用Angular视图？

Yes, this is absolutely feasible! However, the approach you tried directly rendering Angular's raw .component.html files won't work because those templates rely on Angular's compiler and runtime environment—Rails' template renderer can't parse or execute Angular-specific syntax like *ngFor or {{ interpolations }}. Let's break down two practical solutions based on whether you're working in development or production:

Solution 1: Embed Built Angular Assets into Rails Views (Production/Staging) #

This is the standard approach for production deployments, where you build your Angular app and serve its compiled assets through Rails:

1. Configure Angular's build output path
   In your Angular project's angular.json, update the outputPath to point to a directory inside your Rails app's public folder. For example, if your Angular project lives at Rails.root/frontend, set:

   "outputPath": "../public/angular"
   

2. Build your Angular app
   Run the build command (use --prod for optimized production builds):

   ng build --prod
   

   This will compile your Angular components into static JS/CSS files and output them to Rails.root/public/angular.

3. Create a Rails view to load the Angular component
   Instead of trying to bypass Rails' view system, create app/views/products/index.html.erb that loads Angular's runtime and mounts your ProductList component:

   <!-- Load Angular's compiled assets -->
   <%= stylesheet_link_tag 'angular/styles.css' %>
   <%= javascript_include_tag 'angular/polyfills.js' %>
   <%= javascript_include_tag 'angular/main.js' %>
   
   <!-- Mount your Angular component -->
   <app-product-list></app-product-list>
   

   Make sure your Angular app's routing is configured to display the ProductListComponent when the app loads (since the Rails route /products will serve this view, which boots Angular).

4. Update your Rails controller
   You can simplify your products_controller.rb to just render the default view:

   class ProductsController < ApplicationController
     def index
       # If you need to pass data from Rails to Angular, you can embed it in the view:
       # @products = Product.all
       # <%= javascript_tag "window.railsProducts = #{@products.to_json};" %> in the ERB view
     end
   end
   

Solution 2: Proxy Angular Dev Server from Rails (Development Only) #

For development, you can avoid rebuilding Angular every time by proxying requests from Rails to your Angular dev server (running on port 4200):

1. Add the rack-proxy gem
   Add this to your Gemfile and run bundle install:

   gem 'rack-proxy'
   

2. Create a proxy middleware
   Create config/initializers/angular_proxy.rb with:

   require 'rack/proxy'
   
   class AngularDevProxy < Rack::Proxy
     def perform_request(env)
       # Proxy requests to /products to your Angular dev server's route
       if env['PATH_INFO'].start_with?('/products')
         env['HTTP_HOST'] = 'localhost:4200'
         # Map Rails' /products path to Angular's route (adjust as needed)
         env['PATH_INFO'] = '/product-list'
         super(env)
       else
         # Pass all other requests to Rails
         @app.call(env)
       end
     end
   end
   
   Rails.application.config.middleware.use AngularDevProxy
   

3. Run both servers
   Start your Angular dev server (ng serve) and Rails server (rails s). Now when you visit http://localhost:3000/products, Rails will proxy the request to http://localhost:4200/product-list.

Why Your Original Approach Failed #

The error you saw happens because:

• Angular's .component.html files are uncompiled templates, not static HTML. They require Angular's compiler to process directives, bindings, and component logic.
• Rails' template renderer looks for files that can be handled by its registered handlers (like ERB, Haml), and doesn't recognize Angular's template syntax.

Bonus: Sharing Layout Elements #

If you want to keep Rails-managed elements like navigation bars or footers, use Rails' content_for to embed Angular in a specific section of your layout:

<!-- app/views/layouts/application.html.erb -->
<body>
  <%= render 'shared/navbar' %>
  <%= yield %> <!-- This will load the Angular component from the products/index view -->
  <%= render 'shared/footer' %>
</body>

内容的提问来源于stack exchange，提问作者Ramona