Angular 5与Angular CLI集成JSP失败问题咨询

Absolutely, you can use a JSP page as your Angular project's entry point—but the syntax error you're seeing comes from Angular CLI's default build pipeline not understanding JSP server-side scriptlets (<% %>). Let's walk through how to set this up correctly:

Why You're Getting the Syntax Error #

Angular CLI uses Webpack under the hood, which treats your entry file as a JavaScript/TypeScript resource. JSP scriptlets are server-side syntax that Webpack can't parse, hence the Invalid or unexpected token error. You can't directly set a JSP as the main entry in your angular.json—instead, you'll need to split the build and deployment process.

Step-by-Step Setup #

1. Keep Angular and JSP Separate in Your Workflow #

• Continue building your Angular project normally with the CLI, keeping your JSP file outside of the Angular src directory. The CLI should handle compiling your Angular code into static assets (JS/CSS files) in the dist folder.
• Place your JSP file in your backend server's web root (e.g., Tomcat's webapp directory) where it can be processed by your Java server.

2. Correctly Reference Angular Assets in Your JSP #

After building your Angular project (ng build), the dist folder will contain compiled assets like main.js, polyfills.js, and styles.css. You'll need to reference these in your JSP, making sure the file paths match where you deploy the dist folder.

Example JSP code:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Angular + JSP Entry</title>
    <!-- Reference Angular's compiled styles -->
    <link rel="stylesheet" href="/dist/styles.css">
</head>
<body>
    <!-- Angular's root component mount point -->
    <app-root></app-root>

    <!-- Load Angular's compiled scripts in order -->
    <script src="/dist/polyfills.js"></script>
    <script src="/dist/vendor.js"></script>
    <script src="/dist/main.js"></script>
</body>
</html>

Handling Hashed Filenames

By default, Angular CLI adds hash suffixes to filenames (e.g., main.abc123.js) for cache busting. If this causes issues with static references in your JSP, you can disable it in angular.json:

"architect": {
  "build": {
    "options": {
      "outputHashing": "none"
      // ... other options
    }
  }
}

Alternatively, you can write server-side code to dynamically read and reference the latest hashed files from the dist folder.

3. Configure Your Backend Server #

• Deploy the Angular dist folder to your server so the JSP can access the static assets. For Tomcat, you can copy the dist folder directly into the webapp directory, or configure a static resource mapping to point to your dist location.
• Ensure your server is set up to process JSP files (most Java servers like Tomcat, Jetty do this by default).

4. Pass Server-Side Data to Angular (Optional) #

If your JSP includes dynamic server data, you can expose it to Angular by attaching it to the window object before loading Angular's scripts:

<script>
    // Expose server data to the browser global scope
    window.serverContext = {
        currentUser: '<%= request.getRemoteUser() %>',
        apiBaseUrl: '<%= request.getContextPath() %>/api'
    };
</script>

Then access it in your Angular components:

const serverContext = (window as any).serverContext;
console.log('Current user:', serverContext.currentUser);

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