Angular 7 ngBuild : require(filename) cannot be passed in a forRoot() method

Question

I'm trying to pass a cache-busted filename of an asset as a parameter of a module component I have :

• ../assets/svg/generated/sprint.svg // file exists
• then I want to require('../assets/svg/generated/sprint.svg') to generate a cache busted file 'sprite-345234dfg54gh6422111111.svg'
• and use this filename in my components

AppModule :

const SPRITE_SRC = {
    raw: '../assets/generated/svg/sprite.svg',
    required: require('../assets/generated/svg/sprite.svg')
};

console.log(SPRITE_SRC)
// output OK : {
//    raw : '../assets/generated/svg/sprite.svg',
//    required: 'sprite-345234dfg54gh6422111111.svg'
// }

@NgModule({
    entryComponents: [...],
    declarations: [...],
    imports: [
        SvgSpriteModule.forRoot(SPRITE_SRC),
    ]
})
export class AppModule {}

SvgSpriteModule (everything is normal here) :

export interface SvgSpriteConfig {
    raw: string;
    required: string;
}

export const PaCommonSvgSpriteConfig = new InjectionToken<SvgSpriteConfig>('SvgSpriteConfig');

export class SvgSpriteModule {
    static forRoot(config?: SvgSpriteConfig): ModuleWithProviders {
        return {
            ngModule: SvgSpriteModule,
            providers: [{ provide: PaCommonSvgSpriteConfig, useValue: config }]
        };
    }
}

But When I try to load this config in a component of thsi SvgSpriteModule, the required property disappears ... :

export class SvgSpriteComponent {
    constructor(@Inject(PaCommonSvgSpriteConfig) private config: SvgSpriteConfig) {
        console.log('SvgSpriteComponent', config);
        // output KO : {
        //    raw : '../assets/generated/svg/sprite.svg'
        // }
    }
}

I tried all I could for 3 hours without understanding ... require function seems synchronous but maybe it's async ? How can I fix this ?

Thanks

Answer 1

In the end it wasn't possible ...

I ended by creating a sprite with a cache busted filename directly. Then, just after that, I have a shell script that will find the filename of the newly created sprite (which id dynamic because of the hash) ... and then I create a typescript file containing only that ... like :

export const SvgSpritePath = 'assets/svg/sprite-4c6d366c.svg';

This way, this file can be easily imported without pain, and passed as parameter in a forRoot() method (to init a custom component inside my internal angular common lib)