component - load external js script dynamically in angular 2

Cargar script JS en el nivel de componente(no al inicio)

Question

Tengo muchos archivos JS en mi proyecto. Quiero cargarlos cuando un determinado módulo o componente no se carga cuando se inicia la aplicación.

¿Como hacer esto?

Actualmente, los estoy cargando en index.html . La otra forma es agregarlos en angular-cli.json . Pero ambas formas cargarán los archivos JS en el inicio. Sin embargo, necesito que se carguen cuando se ejecute la página o el módulo en particular.

Answer 1

Encuentre un archivo .angular-cli.json y encuentre una matriz de scripts y luego agregue los scripts js; Me gusta esto:

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

O puedes usar Lazy Loading ...

Answer 2

Puede lograr esto con la función de carga lenta de RouterModule.

Configure su app.module.ts como lo siguiente. La loadChildren loadChildren debe apuntar al destino del módulo y después del hash debe ser el nombre del módulo.

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 { }

Coloque la salida del enrutador dentro de su html si aún no lo ha hecho:

<router-outlet></router-outlet>

Luego configura tus módulos de página de esta manera:

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

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

Esto produce un trozo para cada módulo. En mi proyecto, se ve así:

Y cuando abro mi sitio, solo se cargarán los fragmentos necesarios para la página actual:

Answer 3

Solo escribe un cargador de script normal:

   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);
    }

y luego llámalo donde quieras:

export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}

Pero si esos archivos son archivos Typescript, puede cargarlos también de muchas formas:

1- Usando el nivel predeterminado del módulo de carga perezosa

2- Uso de webpack require

3- Usando el cargador de módulos SystemJs

Answer 4

Ya he dado respuesta a esta pregunta, pero de alguna manera no puedo marcar como duplicado.

Por favor revise este enlace: https://.com/a/44276683/6606630

donde puede encontrar cómo cargar el javascript externo en tiempo de ejecución a nivel de componente.

Tienes que crear un script element sobre la marcha y luego agregarlo en DOM.

En esa función de loadScript , acabo de check existence de js individuales, si tienes múltiples js, entonces debes hacer algunos cambios en la lógica.

Aún así, si tienes alguna consulta, avísame, te ayudaré.