Ich habe dieses Modul, das die externe Bibliothek zusammen mit zusätzlicher Logik zusammenbaut, ohne den <script>
-Tag direkt in die index.html einzufügen:
import 'http://external.com/path/file.js'
//import '../js/file.js'
@Component({
selector: 'my-app',
template: `
<script src="http://iknow.com/this/does/not/work/either/file.js"></script>
<div>Template</div>`
})
export class MyAppComponent {...}
Ich stelle fest, dass die import
von ES6-Spezifikation statisch ist und während der TypScript-Transpiling nicht zur Laufzeit aufgelöst wird.
Um es dennoch konfigurierbar zu machen, wird die Datei "file.js" entweder vom CDN-Ordner oder vom lokalen Ordner geladen.
Wenn Sie system.js verwenden, können Sie System.import()
zur Laufzeit verwenden:
export class MyAppComponent {
constructor(){
System.import('path/to/your/module').then(refToLoadedModule => {
refToLoadedModule.someFunction();
}
);
}
Wenn Sie Webpack verwenden, können Sie die robuste Unterstützung für die Codeaufteilung mit require.ensure
nutzen:
export class MyAppComponent {
constructor() {
require.ensure(['path/to/your/module'], require => {
let yourModule = require('path/to/your/module');
yourModule.someFunction();
});
}
}
Sie können die folgende Technik verwenden, um JS-Skripts und -Bibliotheken bei Bedarf dynamisch in Ihr Angular-Projekt zu laden.
script.store.ts enthält den Pfad des Scripts entweder lokal oder auf einem Remote-Server und einen Name , der zum dynamischen Laden des Scripts verwendet wird
interface Scripts {
name: string;
src: string;
}
export const ScriptStore: Scripts[] = [
{name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
{name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];
script.service.ts ist ein injizierbarer Dienst, der das Laden des Skripts übernimmt, kopieren Sie script.service.ts
, wie es ist
import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";
declare var document: any;
@Injectable()
export class ScriptService {
private scripts: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
}
load(...scripts: string[]) {
var promises: any[] = [];
scripts.forEach((script) => promises.Push(this.loadScript(script)));
return Promise.all(promises);
}
loadScript(name: string) {
return new Promise((resolve, reject) => {
//resolve if already loaded
if (this.scripts[name].loaded) {
resolve({script: name, loaded: true, status: 'Already Loaded'});
}
else {
//load script
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
if (script.readyState) { //IE
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
}
};
} else { //Others
script.onload = () => {
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
};
}
script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
document.getElementsByTagName('head')[0].appendChild(script);
}
});
}
}
Injizieren Sie diesen ScriptService
wo immer Sie ihn benötigen und laden Sie js libs so
this.script.load('filepicker', 'rangeSlider').then(data => {
console.log('script loaded ', data);
}).catch(error => console.log(error));
Das könnte funktionieren. Dieser Code hängt das <script>
-Tag dynamisch an die head
der HTML-Datei an, auf die Sie klicken.
const url = 'http://iknow.com/this/does/not/work/either/file.js';
export class MyAppComponent {
loadAPI: Promise<any>;
public buttonClicked() {
this.loadAPI = new Promise((resolve) => {
console.log('resolving promise...');
this.loadScript();
});
}
public loadScript() {
console.log('preparing to load...')
let node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
Ich habe @rahul kumars answer geändert, so dass stattdessen Observables verwendet wird:
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { Observer } from "rxjs/Observer";
@Injectable()
export class ScriptLoaderService {
private scripts: ScriptModel[] = [];
public load(script: ScriptModel): Observable<ScriptModel> {
return new Observable<ScriptModel>((observer: Observer<ScriptModel>) => {
var existingScript = this.scripts.find(s => s.name == script.name);
// Complete if already loaded
if (existingScript && existingScript.loaded) {
observer.next(existingScript);
observer.complete();
}
else {
// Add the script
this.scripts = [...this.scripts, script];
// Load the script
let scriptElement = document.createElement("script");
scriptElement.type = "text/javascript";
scriptElement.src = script.src;
scriptElement.onload = () => {
script.loaded = true;
observer.next(script);
observer.complete();
};
scriptElement.onerror = (error: any) => {
observer.error("Couldn't load script " + script.src);
};
document.getElementsByTagName('body')[0].appendChild(scriptElement);
}
});
}
}
export interface ScriptModel {
name: string,
src: string,
loaded: boolean
}
Sie können mehrere Skripte dynamisch laden wie folgt in Ihre component.ts
-Datei:
loadScripts() {
const dynamicScripts = [
'https://platform.Twitter.com/widgets.js',
'../../../assets/js/dummyjs.min.js'
];
for (let i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement('script');
node.src = dynamicScripts[i];
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
und rufen Sie diese Methode im Konstruktor auf,
constructor() {
this.loadScripts();
}
Hinweis: Wenn Sie weitere Skripte dynamisch laden möchten, fügen Sie sie dem dynamicScripts
-Array hinzu.
Eine weitere Option wäre die Verwendung von scriptjs
package
ermöglicht das Laden von Skriptressourcen bei Bedarf von einer beliebigen URL
Beispiel
Installieren Sie das Paket:
npm i scriptjs
und Typdefinitionen für scriptjs
:
npm install --save @types/scriptjs
Dann importiere die $script.get()
Methode:
import { get } from 'scriptjs';
und laden Sie schließlich die Skriptressource, in unserem Fall die Google Maps-Bibliothek:
export class AppComponent implements OnInit {
ngOnInit() {
get("https://maps.googleapis.com/maps/api/js?key=", () => {
//Google Maps library has been loaded...
});
}
}
Ich habe dieses Code-Snippet mit dem neuen Renderer-API gemacht
constructor(private renderer: Renderer2){}
addJsToElement(src: string): HTMLScriptElement {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.renderer.appendChild(document.body, script);
return script;
}
Und dann nenne es so
this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
console.log('SkyScanner Tag loaded');
}
In meinem Fall habe ich sowohl die js
- als auch die css
visjs
-Datei mit der obigen Technik geladen - was hervorragend funktioniert. Ich rufe die neue Funktion von ngOnInit()
auf
Hinweis:Ich könnte nicht laden, indem Sie einfach einen <script>
- und <link>
-Tag zur HTML-Vorlagendatei hinzufügen.
loadVisJsScript() {
console.log('Loading visjs js/css files...');
let script = document.createElement('script');
script.src = "../../assets/vis/vis.min.js";
script.type = 'text/javascript';
script.async = true;
script.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(script);
let link = document.createElement("link");
link.type = "stylesheet";
link.href = "../../assets/vis/vis.min.css";
document.getElementsByTagName('head')[0].appendChild(link);
}
Die Lösung von @ rahul-kumar funktioniert gut für mich, aber ich wollte meine Javascript-Funktion in meinem TypeScript aufrufen
foo.myFunctions() // works in browser console, but foo can't be used in TypeScript file
Ich habe es behoben, indem ich es in meinem TypeScript deklarierte:
import { Component } from '@angular/core';
import { ScriptService } from './script.service';
declare var foo;
Und jetzt kann ich foo überall in meiner Typecript-Datei aufrufen
Ich habe eine gute Möglichkeit, Skripte dynamisch zu laden! __. Jetzt verwende ich in meinem Projekt ng6, echarts4 (> 700Kb), ngx-echarts3. Wenn ich sie von den Dokumenten von ngx-echarts verwende, benötige ich Importecharts in angle.json: "scripts": ["./ node_modules/echarts/dist/echarts.min.js"] also im Anmeldemodul Seite beim Laden von scripts.js, das ist eine große Datei! Ich will es nicht.
Ich denke also, dass jedes Modul als Datei in eckiger Form geladen wird. Ich kann einen Router-Resolver einfügen, um js vorab zu laden, und dann mit dem Laden des Moduls beginnen!
// PreloadScriptResolver.service.js
/**动态加载js的服务 */
@Injectable({
providedIn: 'root'
})
export class PreloadScriptResolver implements Resolve<IPreloadScriptResult[]> {
// Here import all dynamically js file
private scripts: any = {
echarts: { loaded: false, src: "assets/lib/echarts.min.js" }
};
constructor() { }
load(...scripts: string[]) {
const promises = scripts.map(script => this.loadScript(script));
return Promise.all(promises);
}
loadScript(name: string): Promise<IPreloadScriptResult> {
return new Promise((resolve, reject) => {
if (this.scripts[name].loaded) {
resolve({ script: name, loaded: true, status: 'Already Loaded' });
} else {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
script.onload = () => {
this.scripts[name].loaded = true;
resolve({ script: name, loaded: true, status: 'Loaded' });
};
script.onerror = (error: any) => reject({ script: name, loaded: false, status: 'Loaded Error:' + error.toString() });
document.head.appendChild(script);
}
});
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<IPreloadScriptResult[]> {
return this.load(...route.routeConfig.data.preloadScripts);
}
}
Dann importiere in der submodule-routing.module.ts diesen PreloadScriptResolver:
const routes: Routes = [
{
path: "",
component: DashboardComponent,
canActivate: [AuthGuardService],
canActivateChild: [AuthGuardService],
resolve: {
preloadScripts: PreloadScriptResolver
},
data: {
preloadScripts: ["echarts"] // important!
},
children: [.....]
}
Dieser Code funktioniert gut und verspricht: Nach dem Laden der js-Datei beginnt das Modul zu laden! Dieser Resolver kann in vielen Routern verwendet werden
hinweis: Ich muss warten, bis ein bestimmtes Element auf der Seite angezeigt wird, bevor ich ein Skript zum Abspielen eines Videos lade.
{Inject, Injectable, PLATFORM_ID} aus '@ angle/core' importieren; import {isPlatformBrowser} from "@ angular/common";
@Injectable({
providedIn: 'root'
})
export class ScriptLoaderService {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
) {
}
load(scriptUrl: string) {
if (isPlatformBrowser(this.platformId)) {
let node: any = document.createElement('script');
node.src = scriptUrl;
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
}
import { Injectable } from '@angular/core';
import * as $ from 'jquery';
interface Script {
src: string;
loaded: boolean;
}
@Injectable()
export class ScriptLoaderService {
public _scripts: Script[] = [];
/**
* @deprecated
* @param tag
* @param {string} scripts
* @returns {Promise<any[]>}
*/
load(tag, ...scripts: string[]) {
scripts.forEach((src: string) => {
if (!this._scripts[src]) {
this._scripts[src] = { src: src, loaded: false };
}
});
const promises: any[] = [];
scripts.forEach(src => promises.Push(this.loadScript(tag, src)));
return Promise.all(promises);
}
/**
* Lazy load list of scripts
* @param tag
* @param scripts
* @param loadOnce
* @returns {Promise<any[]>}
*/
loadScripts(tag, scripts, loadOnce?: boolean) {
debugger;
loadOnce = loadOnce || false;
scripts.forEach((script: string) => {
if (!this._scripts[script]) {
this._scripts[script] = { src: script, loaded: false };
}
});
const promises: any[] = [];
scripts.forEach(script => promises.Push(this.loadScript(tag, script, loadOnce)));
return Promise.all(promises);
}
/**
* Lazy load a single script
* @param tag
* @param {string} src
* @param loadOnce
* @returns {Promise<any>}
*/
loadScript(tag, src: string, loadOnce?: boolean) {
debugger;
loadOnce = loadOnce || false;
if (!this._scripts[src]) {
this._scripts[src] = { src: src, loaded: false };
}
return new Promise((resolve, _reject) => {
// resolve if already loaded
if (this._scripts[src].loaded && loadOnce) {
resolve({ src: src, loaded: true });
} else {
// load script tag
const scriptTag = $('<script/>')
.attr('type', 'text/javascript')
.attr('src', this._scripts[src].src);
$(tag).append(scriptTag);
this._scripts[src] = { src: src, loaded: true };
resolve({ src: src, loaded: true });
}
});
}
reloadOnSessionChange() {
window.addEventListener('storage', function(data) {
if (data['key'] === 'token' && data['oldValue'] == null && data['newValue']) {
document.location.reload();
}
});
}
}
@ d123546 Ich war mit dem gleichen Problem konfrontiert und habe es jetzt mit ngAfterContentInit (Lifecycle Hook) in der Komponente so funktionieren lassen:
import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
import { ScriptService } from '../../script.service';
@Component({
selector: 'app-players-list',
templateUrl: './players-list.component.html',
styleUrls: ['./players-list.component.css'],
providers: [ ScriptService ]
})
export class PlayersListComponent implements OnInit, AfterContentInit {
constructor(private router: Router, private script: ScriptService) {
}
ngOnInit() {
}
ngAfterContentInit() {
this.script.load('filepicker', 'rangeSlider').then(data => {
console.log('script loaded ', data);
}).catch(error => console.log(error));
}
eine probe kann sein
die Datei script-loader.service.ts
import {Injectable} from '@angular/core';
import * as $ from 'jquery';
declare let document: any;
interface Script {
src: string;
loaded: boolean;
}
@Injectable()
export class ScriptLoaderService {
public _scripts: Script[] = [];
/**
* @deprecated
* @param tag
* @param {string} scripts
* @returns {Promise<any[]>}
*/
load(tag, ...scripts: string[]) {
scripts.forEach((src: string) => {
if (!this._scripts[src]) {
this._scripts[src] = {src: src, loaded: false};
}
});
let promises: any[] = [];
scripts.forEach((src) => promises.Push(this.loadScript(tag, src)));
return Promise.all(promises);
}
/**
* Lazy load list of scripts
* @param tag
* @param scripts
* @param loadOnce
* @returns {Promise<any[]>}
*/
loadScripts(tag, scripts, loadOnce?: boolean) {
loadOnce = loadOnce || false;
scripts.forEach((script: string) => {
if (!this._scripts[script]) {
this._scripts[script] = {src: script, loaded: false};
}
});
let promises: any[] = [];
scripts.forEach(
(script) => promises.Push(this.loadScript(tag, script, loadOnce)));
return Promise.all(promises);
}
/**
* Lazy load a single script
* @param tag
* @param {string} src
* @param loadOnce
* @returns {Promise<any>}
*/
loadScript(tag, src: string, loadOnce?: boolean) {
loadOnce = loadOnce || false;
if (!this._scripts[src]) {
this._scripts[src] = {src: src, loaded: false};
}
return new Promise((resolve, reject) => {
// resolve if already loaded
if (this._scripts[src].loaded && loadOnce) {
resolve({src: src, loaded: true});
}
else {
// load script tag
let scriptTag = $('<script/>').
attr('type', 'text/javascript').
attr('src', this._scripts[src].src);
$(tag).append(scriptTag);
this._scripts[src] = {src: src, loaded: true};
resolve({src: src, loaded: true});
}
});
}
}
und Verwendung
erste spritzen
constructor(
private _script: ScriptLoaderService) {
}
dann
ngAfterViewInit() {
this._script.loadScripts('app-wizard-wizard-3',
['assets/demo/default/custom/crud/wizard/wizard.js']);
}
oder
this._script.loadScripts('body', [
'assets/vendors/base/vendors.bundle.js',
'assets/demo/default/base/scripts.bundle.js'], true).then(() => {
Helpers.setLoading(false);
this.handleFormSwitch();
this.handleSignInFormSubmit();
this.handleSignUpFormSubmit();
this.handleForgetPasswordFormSubmit();
});