Angular中同服务器本地HTML页面无法通过iframe加载的问题

问题原因 #

你猜的没错，核心原因就是Angular的路由机制导致的。Angular默认使用HTML5模式路由，服务器会被配置为：所有未匹配到静态文件的请求，都返回index.html，以此保证前端路由能正常工作。你直接写src="widget.html"时，浏览器会向根路径请求这个文件，但根目录下并没有widget.html（它实际在assets/目录下），服务器找不到对应的静态文件，就返回了index.html，所以iframe里显示的是整个应用。

而favicon.ico在根目录下存在，服务器能直接找到这个静态文件，所以可以正常加载；外部链接是直接请求第三方服务器，不受本地Angular路由规则影响，因此也能正常工作。

解决方法 #

1. 修正iframe的src路径 #

因为widget.html在dist/assets目录下，正确的路径应该是assets/widget.html，修改后的代码如下：

<p>widget showing</p>
<iframe src="assets/widget.html"></iframe>

你可以先在浏览器地址栏直接访问http://你的应用域名/assets/widget.html，确认能正常打开这个文件，再放到iframe里使用。

2. 确认Angular的assets配置 #

确保angular.json文件中，assets数组包含了widget.html所在的目录，这样打包时文件才会被正确复制到dist目录：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      // 其他配置...
    }
  }
}

如果widget.html是单独放在src目录下，也可以单独添加到assets数组里，比如"src/widget.html"。

3. 服务器配置验证（可选） #

如果修改路径后还是有问题，检查服务器的静态文件托管配置，确保assets目录下的文件能被正常访问，没有被路由规则拦截。比如使用Nginx的话，要确保配置中允许访问静态文件，并且只有未匹配到静态文件的请求才转发到index.html。

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