在 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
数组中。