如何在Angular 9的.component.html页面中引入js与jsp文件

• Angular 9 是纯前端单页应用框架，无法直接解析本地存放的.jsp动态文件，test.jsp、test_js.jsp本质是需要后端服务（如Tomcat、Spring Boot）运行输出最终HTML/JS内容的服务端页面，不能直接拷贝到Angular项目的assets目录当静态资源加载。

• 第一步：部署jsp文件到后端服务
  将test.jsp、test_js.jsp放置到你的后端服务可访问的路径下，启动后端服务后，先直接在浏览器打开两个jsp的地址，确认能正常返回内容，记录好两个文件的访问路径。
• 第二步：配置Angular9开发代理解决跨域
  因为Angular前端服务和后端jsp服务默认端口不同，直接请求会触发浏览器跨域拦截，需要做代理配置：
  1. 项目根目录新建proxy.conf.json，写入转发规则：

     {
       "/backend": {
         "target": "http://你的后端服务地址:端口",
         "secure": false,
         "changeOrigin": true,
         "pathRewrite": {"^/backend" : ""}
       }
     }
     

  2. 打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> serve -> options节点，新增一行配置"proxyConfig": "proxy.conf.json"，重启Angular开发服务后，所有以/backend开头的请求都会被转发到后端服务，无跨域问题。
• 第三步：在simulator.component.ts中拉取jsp内容
  1. 先在项目根模块（一般是app.module.ts）的imports数组中引入HttpClientModule，否则没法发http请求：

     // app.module.ts 引入片段
     import { HttpClientModule } from '@angular/common/http';
     @NgModule({
       imports: [
         // 其他原有模块
         HttpClientModule
       ]
     })
     

  2. 编辑simulator.component.ts，在组件初始化时拉取两个jsp的返回内容，存到组件属性上：

     import { Component, OnInit } from '@angular/core';
     import { HttpClient } from '@angular/common/http';
     
     @Component({
       selector: 'app-simulator',
       templateUrl: './simulator.component.html'
     })
     export class SimulatorComponent implements OnInit {
       // 定义属性存储两个jsp返回的内容
       testJspRawContent = '';
       testJsJspRawContent = '';
     
       // 注入http请求工具
       constructor(private http: HttpClient) {}
     
       ngOnInit(): void {
         // 通过代理路径拉取两个jsp的内容，指定返回类型为text
         this.http.get('/backend/test.jsp', { responseType: 'text' })
           .subscribe(content => this.testJspRawContent = content);
         this.http.get('/backend/test_js.jsp', { responseType: 'text' })
           .subscribe(content => this.testJsJspRawContent = content);
       }
     }
     

• 第四步：在simulator.component.html中绑定加载的内容
  直接用innerHTML绑定拉到的内容时，Angular默认的安全策略会拦截带HTML/脚本的内容，需要通过自定义安全管道做内容豁免，最终html文件的示例代码：

  <div class="simulator-jsp-wrapper">
    <div class="jsp-block">
      <h4>test.jsp 展示区</h4>
      <div [innerHTML]="testJspRawContent | safeHtml"></div>
    </div>
    <hr>
    <div class="jsp-block">
      <h4>test_js.jsp 展示区</h4>
      <div [innerHTML]="testJsJspRawContent | safeHtml"></div>
    </div>
  </div>
  

  注意：Angular默认不会执行通过innerHTML插入的script标签，如果test_js.jsp返回的内容包含需要运行的js逻辑，需要在拉取内容后手动解析script标签，动态插入到DOM中触发执行，不要直接依赖innerHTML的自动执行机制。
• 第五步：加载效果校验
  访问simulator组件对应的路由地址，打开浏览器开发者工具的Network面板，确认两个jsp的请求返回状态为200，内容完整；再检查Elements面板，确认两个jsp的渲染内容已经正常插入到页面DOM中，没有控制台报错。

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