angular.json的scripts数组加载外部HTTPS脚本失效问题咨询

核心原因 #

• Angular CLI 对 angular.json 中 projects -> architect -> build -> options -> scripts 数组的处理规则是仅处理本地相对路径的脚本：会将这些脚本按配置顺序合并、打包，最后注入到页面同步执行。远程 HTTPS 链接会被直接忽略，不会执行加载、注入逻辑，这是你配置远程脚本失效的根本原因。
• 直接在 index.html 插入 <script> 标签报错的原因：普通 script 标签如果不加特殊属性，是并行加载的，加载完成的顺序和你写的顺序没有必然联系，而你用到的 polyfill 类脚本强依赖严格的执行顺序，顺序错乱就会出现变量未定义、依赖缺失等错误。本地脚本配置到 scripts 数组时 Angular 会严格控制执行顺序，所以不会出错。

适配需求的解决方案 #

你的需求是不存本地脚本、生产环境运行时从远程加载、且要保证脚本执行顺序，用 Angular 内置的 APP_INITIALIZER 实现串行预加载即可，效果和本地配置 scripts 完全一致：

步骤1：新增脚本加载工具函数 #

创建 src/utils/load-script.ts：

export function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`脚本加载失败: ${src}`));
    document.body.appendChild(script);
  });
}

步骤2：配置启动前预加载逻辑 #

修改 app.module.ts：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { loadScript } from './utils/load-script';

// 按你需要的执行顺序填写远程脚本地址
const REMOTE_SCRIPTS = [
  'https://my-server.com/polyfills.js',
  'https://my-server.com/polyfill-webcomp-es5.js',
  'https://my-server.com/polyfill-webcomp.js',
  'https://my-server.com/scripts.js',
  'https://my-server.com/main.js'
];

// 串行加载脚本，保证执行顺序
export function preloadRemoteScripts() {
  return async () => {
    for (const src of REMOTE_SCRIPTS) {
      await loadScript(src);
    }
  };
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: preloadRemoteScripts,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：精简 angular.json 配置 #

保留原有本地脚本即可，不需要再填远程脚本地址：

"scripts": [
  "node_modules/@webcomponents/custom-elements/src/native-shim.js"
]

验证说明 #

该方案所有远程脚本都会按配置顺序加载执行，全部加载完成后才会启动 Angular 应用，完全匹配你本地 scripts 配置的运行效果，同时不需要将远程脚本存储到本地，符合生产环境加载要求。

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