load a js file with a component after certain other scripts in Angular 4

Question

I want to load my own js file in which I have written some custom js that requires jQuery. I want to load my js file after the jQuery, how I can do it. I dont want to put this script file in index.html because then it will load with every component.

This is my js file

Pro

The main question is how to load a script file after certain other scripts and laod only with a related component. login.js should load only with login page.

user_7385011 · Answer

One way is to include it in the "scripts" section of your .angular-cli.json file, if it is a node module:

 "scripts": [
              "../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
]

then, create an Injection token, and Inject it as a dependency to your main.ts module and component

// call this file 'mylib.lib.ts'
import { InjectionToken } from '@angular/core';
import * as myLib from '../../node_modules/myModule`;

export const libToken = new InjectionToken('libName');
export const libName = myLib
export * from 'libName';

Inject the dependency into your module:

...
import * as mylib from './mylib.lib';
..
providers: [
    { provide: myLib.libToken, useValue: myLib.libName}
]

then you can add it to your component:

import { libName, libToken} from './mylib.lib';
...
constructor(@Inject(cesiumToken) private myLib: any) {}

and that should get you going.

Another rather messy way to do it is append the script to the main html file in your ts file inside the AfterViewInit hook:

ngAfterViewInit() {   
    const script = document.createElement('script');
    script.src = '../../assets/js/myFile.js';
    document.body.appendChild(script);
}

for method one, just make sure it is the script after jquery, for method two, if will be last since it appends the tag after the DOM is rendered

load a js file with a component after certain other scripts in Angular 4

1 Answers