eckig 4, global importieren externe Javascript

Question

Ich weiß, diese Frage wurde zuvor gestellt, aber nach der Suche und versuchen Tonnen von Dingen, die ich fragen muss.

Ich bin mit dem Angular Starter Paket und versuchen, eine external javascript library

ich es habe kein Problem zu importieren direkt in meine Komponente importieren wie so

import * as loadImage from 'blueimp-load-image/js/index.js'; 

Aber soweit ich weiß, ich sollte extern importieren Skripts (mit asynchronen Vorgängen) vor zone.js, da andernfalls Probleme bei der Änderungserkennung auftreten können. Genau das ist genau das Problem, das ich bei Safari in iOS habe. Zur Zeit muss ich die Änderungserkennung manuell aufrufen.

In Winkel Starter-Paket ist zone.js in einer Datei namens polyfills.ts erforderlich, die als eine Brocken/Js-Datei von Webpack hinzugefügt wird.

import 'blueimp-javascript-to-blob-for-angular'; 
//how to import so it's useable in any component? 
import 'blueimp-load-image/js/index'; 
import 'core-js/es6'; 
import 'core-js/es6/set'; 
import 'core-js/es7/reflect'; 

require('zone.js/dist/zone'); 

if ('production' !== ENV) { 
    Error['stackTraceLimit'] = Infinity; 
    require('zone.js/dist/long-stack-trace-zone'); 
} 

Wie und wo kann ich importieren meine externe Javascript-Datei (Inhalt unten), bevor zone.js so kann ich in meiner Komponente verwenden Sie es noch?

Bisher war mein Problem, dass ich die externen Bibliotheken Funktionen nicht zugreifen kann, weil sie immer waren. Sie wurden jedoch zu den generierten Javascript-Dateien hinzugefügt.

der gesamte Prozess des Importierens von externem Javascript in ein eckiges 4-Projekt scheint mir sehr kompliziert.

Inhalt der Javascript-Datei:

module.exports = require('./load-image') 

require('./load-image-scale') 
require('./load-image-meta') 
require('./load-image-fetch') 
require('./load-image-exif') 
require('./load-image-exif-map') 
require('./load-image-orientation') 

Answer 1

Wenn Sie AddAssetHtmlPlugin wie gezeigt verwenden here

/** 
    * Plugin: AddAssetHtmlPlugin 
    * Description: Adds the given JS or CSS file to the files 
    * Webpack knows about, and put it into the list of assets 
    * html-webpack-plugin injects into the generated html. 
    * 
    * See: https://github.com/SimenB/add-asset-html-webpack-plugin 
    */ 
    // new AddAssetHtmlPlugin([ 
    // { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) }, 
    // { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) } 
    // ]), 

Sie müssen eine weitere entry Punkt here erstellen, die externe js-Datei benötigen und laden mit dem AddAssetHtmlPlugin Plugin vor anderen Bündeln.

Answer 2

Import externe Javascript-Dateien in Ihrer Kopf Bereich von Datei index.html, die der Einstiegspunkt für Ihre Anwendung ist, normale HTML-Script-Tag Beispiel mit:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>