Angular 4/5/6组件能否使用绝对/外部URL及外部HTML模板？

嘿，这个问题问得很实际！在Angular 4/5/6里，默认情况下是不支持直接用外部URL作为templateUrl的，就连指向外部资源的绝对URL也不行，下面给你详细拆解：

为什么你的示例代码无法工作？ #

先看你给出的这段代码：

@Component({
  selector: 'app-metatags',
  templateUrl: 'https://example.com/index.html',
  styleUrls: ['./metatags.component.css']
})

这段代码在编译或者运行时一定会报错，核心原因有两个：

1. Angular构建机制限制：Angular 4+的CLI基于Webpack打包，编译阶段会把组件的模板、样式打包进应用的bundle文件里。外部URL的模板不在本地构建资源范围内，Webpack无法解析和处理它。
2. 跨域与运行时限制：就算构建能通过，浏览器的同源策略也会阻止你的应用加载外部域名的HTML资源（除非外部服务器配置了CORS允许你的域名访问，但这也解决不了Angular编译器不识别外部模板的问题）。

那有没有办法加载外部内容？ #

如果确实需要引入外部HTML内容，有两种替代方案，但都有各自的限制：

• 动态加载+innerHTML绑定：在组件的ngOnInit钩子中，用HttpClient请求外部HTML，然后通过[innerHTML]把内容插入到组件的DOM元素里。比如：

  import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  @Component({
    selector: 'app-metatags',
    template: '<div [innerHTML]="safeExternalContent"></div>',
    styleUrls: ['./metatags.component.css']
  })
  export class MetatagsComponent implements OnInit {
    safeExternalContent: SafeHtml | undefined;
  
    constructor(
      private http: HttpClient,
      private sanitizer: DomSanitizer
    ) { }
  
    ngOnInit(): void {
      this.http.get('https://example.com/index.html', { responseType: 'text' })
        .subscribe(content => {
          // 处理XSS风险，标记内容为安全
          this.safeExternalContent = this.sanitizer.bypassSecurityTrustHtml(content);
        });
    }
  }
  

  注意：这种方式下，外部HTML里的Angular指令、组件不会被编译——Angular只会把它当作纯静态HTML渲染，无法识别其中的Angular语法。
• 同域名绝对URL：如果是指向同域名下的资源（比如/assets/templates/metatags.html），这种绝对URL是可以正常使用的，只要文件存在于你的应用构建输出目录中，Angular能正确找到它。

额外提醒 #

• 从安全角度来说，加载外部HTML存在XSS攻击风险，一定要确保来源可信，必要时用Angular的DomSanitizer做安全处理。
• 从性能角度，外部模板会增加额外的HTTP请求，拖慢应用加载速度，非必要不建议使用。

内容的提问来源于stack exchange，提问作者mohit.gupta