Я не думаю, что это хорошая практика - динамически изменять содержимое файла index.html. Из того, что я вижу, вам нужно загружать только несколько файлов css и js, когда выполняются определенные условия.
Вместо того, чтобы касаться содержимого индексного файла, как насчет обработки того, какие ресурсы необходимо загрузить (и загрузить их) внутри отдельной службы во время инициализации вашего приложения?
Это может выглядеть немного странно, ноэто сработало для меня, по крайней мере, для загрузки некоторых дополнительных CSS.
app.module.ts
export function ResourceProviderFactory( provider: ResourcesService ) {
return () => provider.loadResources();
}
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
ResourcesService,
{
provide: APP_INITIALIZER,
useFactory: ResourceProviderFactory,
deps: [ ResourcesService ],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
resources.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ResourcesService {
private _resources = {
typeA: [
'assets/reveal.js-3.6.0/css/reveal.css'
'assets/reveal.js-3.6.0/lib/js/classList.js'
]
}
constructor( private _http: HttpClient ) {
}
public loadResources(): Promise<boolean> {
let res;
if( condition_met ) {
for( let r of this._resources.typeA ) {
res = this._resources.typeA[r];
if( res.indexOf('css') >= 0 ) {
loadCSS( res );
}else if ( res.indexOf('js') >= 0 ) {
loadJS( res );
}
}
}
}
public loadCSS( resourcePath: string ) {
const link = document.createElement( 'link' );
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'resourcePath;
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
public loadJS( resourcePath: string ) {
const link = document.createElement( 'link' );
link.type = 'application/javascript';
link.href = resourcePath;
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
}