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é.