Load JS script on component level (not at startup)

Question

I have lots of JS files in my project. I want to load them when particular module or component load not when the app start.

How to do this?

Currently, I am loading them in index.html. The other way is to add them in angular-cli.json. But both ways will load the JS files at the startup. However, I need them to to load when the particular page or module runs.

Assuming you're using lazy loading, just `import './myscript.js'` into lazy-loaded module file and it will be bundled into corresponding lazy loaded bundle and load only when this bundle is loaded. You'll probably need to disabled vendor chunk for this to work (set `--vendor-chunk false` flag for `ng build`). — Yaroslav Admin, Aug 28 '17 at 10:41

score 36 · Accepted Answer · answered Aug 28 '17 at 10:50

Just write a normal script loader :

   public loadScript() {
            let body = <HTMLDivElement> document.body;
            let script = document.createElement('script');
            script.innerHTML = '';
            script.src = 'url';
            script.async = true;
            script.defer = true;
            body.appendChild(script);
    }

and then call it where ever you want :

export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}

But if those files are Typescript files, you can lazy load them as well in a numerous ways:

1- Using the default module level lazy loading

2- Using webpack's require

3- Using SystemJs module loader

And How to remove a specific script at component level ?? – Saurabh Aug 22 '18 at 09:01 — Saurabh, Aug 22 '18 at 09:01

Sandip - Frontend Developer · Answer 2 · 2017-09-01T05:52:50.663

24

I have already given answer of this question but some how not able to mark as duplicate.

Please check this link : https://stackoverflow.com/a/44276683/6606630

where you can find how to load the external javascript at runtime at component level.

You have to create script element on the fly and then append it in DOM.

In that loadScript function i have just check existence of single js, if you have multiple js then you have to make some changes in logic.

Still if you have any query let me know, i will help you

edited Sep 01 '17 at 05:52

answered Sep 01 '17 at 05:45

Sandip - Frontend Developer

14,397
4
35
61

How to we use the function inside the js file which is loaded over the fly – Vipul Handa Jun 03 '21 at 17:35

score 4 · Answer 3 · answered Aug 29 '17 at 11:57

You can achieve this with the lazy loading feature of RouterModule.

Configure your app.module.ts like the following. The loadChildren-property must point to the destination of the module and after the hash must be the name of the module.

const routes: Routes = [
    {
        path: 'landing-page',
        loadChildren: './landing-page/landing-page.module#LandingPageModule'
    },
    {
        path: 'another-page',
        loadChildren: './another-page/another-page.module#AnotherPageModule'
    }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    ...
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Place the router-outlet inside of your html if not already done:

<router-outlet></router-outlet>

Then configure your page-modules like this:

const routes: Routes = [
  { path: '', component: LandingPageComponent },
  ...
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    ...
  ],
  declarations: [ ... ],
  providers: [ ... ]
})
export class LandingPageModule { }

This produces a chunk for each module. In my project, it looks like this:

And when I open my site, i only the requred chunks for the current page will be loaded:

how can we achieve **Load JS script on component level (not at startup)**? — Sanjay Nishad, Dec 19 '18 at 10:43

score 2 · Answer 4 · answered Sep 04 '17 at 09:59

Find a .angular-cli.json file and find a scripts array then add Your js scripts; Like this:

<root-directory> > .angular-cli.json > 
"scripts": [
  "../node_modules/tinymce/tinymce.js",
  "../node_modules/tinymce/themes/modern/theme.js",
]

OR you can use Lazy Loading...

Load JS script on component level (not at startup)

4 Answers4

Linked