在 Angular 9 中,可以使用 APP_INITIALIZER 提供者来在加载外部脚本 js 之前加载 SPA。下面是一个示例解决方案:
app.module.ts 文件中导入 APP_INITIALIZER 和 InjectionToken:import { APP_INITIALIZER, InjectionToken } from '@angular/core';
document.createElement('script') 方法动态创建一个 标签,然后将外部脚本的 URL 设置为该标签的 src 属性。export function loadExternalScripts(): () => Promise {
return () => new Promise((resolve, reject) => {
const scriptElement = document.createElement('script');
scriptElement.src = 'path/to/external/js/script.js';
scriptElement.onload = resolve;
document.body.appendChild(scriptElement);
});
}
请确保将 'path/to/external/js/script.js' 替换为实际外部脚本的 URL。
APP_INITIALIZER 的注入令牌:export const EXTERNAL_SCRIPTS = new InjectionToken('EXTERNAL_SCRIPTS');
providers 数组中添加 APP_INITIALIZER 和 EXTERNAL_SCRIPTS:providers: [
{
provide: APP_INITIALIZER,
useFactory: loadExternalScripts,
multi: true,
deps: [EXTERNAL_SCRIPTS]
},
{
provide: EXTERNAL_SCRIPTS,
useValue: true
}
]
EXTERNAL_SCRIPTS 注入令牌来确保外部脚本在加载之前已经初始化:constructor(@Inject(EXTERNAL_SCRIPTS) private externalScriptsLoaded: boolean) {
if (externalScriptsLoaded) {
// 外部脚本已加载
} else {
// 外部脚本未加载
}
}
这样,SPA 在加载外部脚本 js 之前就已经初始化完毕。
请注意,APP_INITIALIZER 是一个多个提供者的数组,可以在其中添加多个初始化函数。如果需要在加载多个外部脚本之前进行初始化,可以创建多个函数并将它们添加到 providers 数组中。