Charger le script JS au niveau du composant (pas au démarrage)

Question

J'ai beaucoup de fichiers JS dans mon projet. Je veux les charger lorsque des modules ou des composants particuliers ne se chargent pas au démarrage de l'application.

Comment faire ça?

Actuellement, je les charge en index.html . L’autre méthode consiste à les ajouter en angular-cli.json . Mais les deux manières chargeront les fichiers JS au démarrage. Cependant, je dois les charger lors de l’exécution de la page ou du module concerné.

Answer 1

Il suffit d'écrire un chargeur 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);
    }
 

puis appelez-le où vous le souhaitez:

 export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}
 

Mais si ces fichiers sont des fichiers Typescript, vous pouvez également les charger de différentes manières:

1- Utilisation du chargement paresseux au niveau du module par défaut

2- Utiliser les require webpack du webpack

3- Utilisation du chargeur de module SystemJs

Answer 2

J'ai déjà donné la réponse à cette question, mais d'une façon pas capable de marquer les doublons.

Veuillez consulter ce lien : https://stackoverflow.com/a/44276683/6606630

où vous pouvez trouver comment charger le javascript externe au moment de l'exécution au niveau du composant.

Vous devez créer script element à la volée, puis les ajouter dans les DOM.

Dans cette loadScript fonction je viens check existence de simple js, si vous avez plusieurs js, alors vous devez faire quelques changements dans la logique.

Encore si vous avez des questions laissez-moi savoir, je vais vous aider

Answer 3

Vous pouvez réaliser cela avec la fonctionnalité de chargement différé de RouterModule.

Configurer votre application.le module.ts comme suit. L' loadChildren-propriété doit pointer vers la destination du module et après le hachage doit être le nom du 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 { }

Placez le routeur-prise de courant à l'intérieur de votre code html si ce n'est déjà fait:

<router-outlet></router-outlet>

Puis configurer votre page-modules suivants:

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

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

Cela produit un morceau pour chaque module. Dans mon projet, il ressemble à ceci:

Et quand j'ai ouvert mon site, je ne le requred morceaux pour la page en cours sera chargé:

Answer 4

Recherchez un fichier .angular-cli.json et recherchez un tableau de scripts, puis ajoutez vos scripts js. Comme ça:

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

OU vous pouvez utiliser Lazy Loading ...