typescript - laad een js-bestand met een component na bepaalde andere scripts in Angular 4

Ik wil mijn eigen js-bestand laden waarin ik wat aangepaste js heb geschreven die jQuery vereist. Ik wil mijn js-bestand laden na de jQuery, hoe kan ik dat doen. Ik wil dit scriptbestand niet in index.html plaatsen omdat het dan met elke component wordt geladen.

Dit is mijn js-bestand

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pro</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Material Design for Bootstrap fonts and icons -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Material Design for Bootstrap CSS -->
  <link rel="stylesheet" href="https://unpkg.com/[email /dist/css/bootstrap-material-design.min.css" integrity="sha384-k5bjxeyx3S5yJJNRD1eKUMdgxuvfisWKku5dwHQq9Q/Lz6H8CyL89KF52ICpX4cL" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/style.min.css">
</head>
<body>
    <app-root></app-root>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

De hoofdvraag is hoe je een scriptbestand kunt laden na bepaalde andere scripts en alleen kunt laden met een gerelateerd component. login.js moet alleen laden met de inlogpagina.

Antwoord #1

Een manier is om het op te nemen in de sectie "scripts" van je .angular-cli.json-bestand, als het een node-module is:

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

maak dan een injectietoken en injecteer het als een afhankelijkheid in je main.ts-module en 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';

Injecteer de afhankelijkheid in uw module:

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

dan kun je het aan je component toevoegen:

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

en dat zou je op gang moeten helpen.

Een andere nogal rommelige manier om het te doen is het script aan het hoofd-htmlbestand toe te voegen in je ts-bestand binnen de AfterViewInit-hook:

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

voor methode één, zorg er gewoon voor dat het het script na jquery is, voor methode twee, zal het de laatste zijn aangezien het de tag toevoegt nadat de DOM is weergegeven