如何在JSP及C#项目中无iframe嵌入Angular 5应用？

Absolutely feasible! You can embed your Angular 5 app into both C# and JSP projects without relying on iframes—let’s walk through how to do this for each stack, plus key considerations to avoid common pitfalls.

First, you’ll need to package your Angular 5 app as static assets. Run this command in your Angular project directory:

ng build --prod --base-href "/angular-embed/"

The --base-href flag ensures all resource paths (CSS, JS, images) are relative to the subdirectory where you’ll host the Angular assets in your C# project.

For ASP.NET Core (MVC/Razor Pages) #

• Copy the entire dist folder generated by the build into your C# project’s wwwroot directory (rename it to something like angular-embed for clarity).
• In the Razor view where you want to embed the Angular app, add:
  1. Links to Angular’s CSS bundle:

     <link rel="stylesheet" href="~/angular-embed/styles.bundle.css">
     

  2. Script tags for Angular’s runtime, vendor, and main bundles (check the actual filenames in your dist folder—they might have hash suffixes):

     <script src="~/angular-embed/inline.bundle.js"></script>
     <script src="~/angular-embed/vendor.bundle.js"></script>
     <script src="~/angular-embed/main.bundle.js"></script>
     

  3. The DOM element where Angular will mount:

     <div id="angular-root"></div>
     

• Route Conflict Fix: If your Angular app uses client-side routing, configure Angular to use HashLocationStrategy to avoid clashing with ASP.NET routes. In your Angular AppModule:

  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  
  @NgModule({
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
    // ... other module config
  })
  export class AppModule { }
  

  Alternatively, set up a fallback route in ASP.NET Core to redirect Angular route requests to the Angular index file:

  app.MapFallbackToFile("angular-embed/index.html");
  

For ASP.NET Web Forms #

• Copy the dist folder into your Web Forms project’s root directory (e.g., angular-embed).
• In your .aspx page (or master page, if embedding site-wide), add the CSS/script references and mount element just like in the Razor example—adjust paths to match your folder structure (e.g., ./angular-embed/styles.bundle.css).
• Handle routing the same way: use HashLocationStrategy in Angular, or configure your Web Forms routing to forward Angular-related paths to the Angular index.html.

The process is similar to C#—start by building your Angular app with the correct base href:

ng build --prod --base-href "/jsp-app/angular-embed/"

Step-by-Step Implementation #

• Copy the dist folder into your JSP project’s webapp directory (rename to angular-embed).
• In the JSP page where you want to embed the Angular app, add:
  1. CSS link:

     <link rel="stylesheet" href="${pageContext.request.contextPath}/angular-embed/styles.bundle.css">
     

  2. Angular script bundles:

     <script src="${pageContext.request.contextPath}/angular-embed/inline.bundle.js"></script>
     <script src="${pageContext.request.contextPath}/angular-embed/vendor.bundle.js"></script>
     <script src="${pageContext.request.contextPath}/angular-embed/main.bundle.js"></script>
     

  3. Angular mount element:

     <div id="angular-root"></div>
     

• Route Conflict Fix: Use HashLocationStrategy in Angular to avoid conflicts with JSP/Servlet routes. If you prefer clean URLs, configure your Servlet container (e.g., Tomcat) to forward all Angular route requests to the Angular index.html—you can do this via a web.xml entry or a custom filter.

• Asset Caching: Ensure your Angular bundle filenames include hashes (which Angular does by default in production mode) so browsers load the latest version after updates.
• State Sharing: If you need to pass data (like user auth info) from the C#/JSP app to Angular, define a global variable in the host page:

  <script>
    window.appContext = {
      userId: '<%= currentUser.getId() %>',
      userName: '<%= currentUser.getName() %>'
    };
  </script>
  

  Then access this in Angular via window.appContext (or wrap it in a service for better practice).
• Performance: Minify and bundle your Angular assets (the --prod flag handles this) to keep load times low, especially if embedding in multiple pages.

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