Angular 4中iframe本地路径设置求助：本地HTML嵌入失效

嗨，我来帮你搞定这个iframe加载本地HTML的问题！你说在线URL能正常加载，但本地的不行，核心问题其实出在Angular的资源打包规则和路径配置上，咱们一步步来解决：

为啥本地HTML加载失败？ #

首先，Angular只会默认打包assets目录下的文件，你的templates文件夹放在src根目录下，没在assets里，所以项目构建后这个目录根本不会被放到输出文件夹里，浏览器自然找不到这个HTML文件。你用了DomSanitizer处理安全问题，这部分是对的，所以主要问题还是资源没被正确打包。

两种解决方案任你选 #

方案1：把模板移到assets目录（最省心） #

直接把templates文件夹挪到assets下面，目录结构变成这样：

src
|-app
| |-components
| |-template
| |-template.component.html
| |-template.component.ts
|-assets
| |-templates
| | |-template1
| | | |-index.html

然后修改getIframe()里的路径，从assets开始写（Angular编译后assets是根路径下的资源文件夹）：

getIframe(){
  console.log('iframe');
  return this.sanitizer.bypassSecurityTrustResourceUrl('assets/templates/template1/index.html');
}

方案2：不改目录，修改angular.json配置 #

如果不想移动文件夹，那就告诉Angular要把templates也当作资源打包：
打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> assets，把templates目录加进去：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/templates"  // 新增这一行，让Angular打包这个目录
]

然后路径就可以直接写templates/template1/index.html：

return this.sanitizer.bypassSecurityTrustResourceUrl('templates/template1/index.html');

最后验证一下 #

改完之后重启ng serve，打开浏览器控制台看看iframe的src是不是正确，再检查网络请求里有没有成功加载到那个index.html。另外还要注意本地HTML里的CSS、JS路径，别用错相对路径导致页面显示不全哦！

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