Angular清理Script src URL后取值异常，动态加载脚本失败

问题原因 #

你通过Renderer2.setProperty给动态创建的script元素设置src属性时，传入了Angular的SafeResourceUrl对象。由于Renderer2操作的是原生DOM，无法识别Angular的安全值包装类型，会将该对象的toString()结果（即提示文本）作为src值，从而生成错误的script标签。

解决方案 #

方案1：直接使用原始URL + setAttribute

动态创建的script元素不属于Angular模板绑定上下文，无需通过SafeResourceUrl处理，直接用原始URL结合Renderer2.setAttribute即可：

public loadScript(): void {
    const scriptele = this.renderer.createElement('script');
    this.renderer.setAttribute(scriptele, 'src', env.externalUrl);
    this.renderer.appendChild(document.head, scriptele);
}

方案2：提取SafeResourceUrl中的原始URL（不推荐但可行）

如果必须保留安全校验逻辑，可以提取SafeResourceUrl内部的原始URL字符串（注意：该属性为Angular内部标识，官方不推荐直接依赖，但在动态DOM操作场景下可临时使用）：

private getUrl(): string {
    const safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(env.externalUrl);
    return (safeUrl as any).changingThisBreaksApplicationSecurity;
} 

public loadScript(): void {
    const scriptele = this.renderer.createElement('script');
    this.renderer.setProperty(scriptele, 'src', this.getUrl());
    this.renderer.appendChild(document.head, scriptele);
}

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