angular 5: hvordan importere javascript spesifikt for denne komponenten. skal ikke være tilgjengelig på andre komponenter

For øyeblikket

i game.component.ts (rute: /play)

import '../../assets/js/game.js';

export class PlayComponent implements OnInit {
    constructor() { }

    ngOnInit() {
    }

}

game.js lastes fint og starter spillet på domain.com/play

Problemet

når jeg laster home.component.ts (rute: /) blir også spill-skriptet importert og lagt til. Hvordan kan jeg få spill-skriptet til å kun lastes på /play? Jeg vet at jeg kan legge skriptet i en funksjon og bare kalle det i spill-komponenten, men jeg vil virkelig unngå å laste for mye JS der det ikke trengs.

Svar #1

Jeg tror ikke det finnes en "Angular"-måte å oppnå det du vil på, annet enn å tulle med bootstrap/Webpack-prosessen.

Bare bruk ren JavaScript.

Last inn skriptet innenfor ngOnInit-hooken i din PlayComponent. Med den tilnærmingen vil skriptet kun bli lastet når komponenten opprettes. Du kan også fjerne skriptet i ngOnDestroy-hooken hvis du ønsker det:

@Component({})
export class PlayComponent implements OnInit, OnDestroy {
    constructor(private assetService: AssetService) {}

    ngOnInit() {
        assetService.loadScript('/assets/js/game.js').then(data => {
            console.log(data); // {loaded: true, status: 'Loaded'}
        });
    }

    ngOnDestroy() {
        assetService.removeScript('/assets/js/game.js');
    }
}

@Injectable()
export class AssetService {
    removeScript(path: string) {
        // TODO: Remove DOM element that has attribute `data-path="${path}"`
    }

    loadScript(path: string): Promise<any> {
        return new Promise(resolve => {
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = path;
            script.setAttribute('data-path', path);

            // IE
            if (script.readyState) {
                script.onreadystatechange = () => {
                    if (script.readyState === 'loaded' || script.readyState === 'complete') {
                        script.onreadystatechange = null;
                        resolve({ loaded: true, status: 'Loaded' });
                    }
                };
            } else {
                script.onload = () => {
                    resolve({ loaded: true, status: 'Loaded' });
                };
            }

            script.onerror = (error: any) => resolve({ loaded: false, status: 'Loaded' });
            document.getElementsByTagName('head')[0].appendChild(script);
        });
    }
}