我有这个模块，它将外部库与额外的逻辑组件化，而不直接将<script>标记添加到index.html中:
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 {...}
我注意到ES6规范的导入是静态的，并且是在TypeScript编译期间解析的，而不是在运行时。
总之，让它变得可配置，这样file。js就会从CDN或本地文件夹加载? 如何告诉Angular 2动态加载脚本?
当前回答
对于那些也想动态加载样式的人。 (基于@Rahul Kumar的精彩回答)
script.store.ts
interface Scripts {
name: string;
src: string;
}
export const StyleStore: Scripts[] = [
{ name: 'fancybox-css', src: 'https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' }
];
export const ScriptStore: Scripts[] = [
{ name: 'jquery', src: 'https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js' },
{ name: 'other', src: '[other script source]'}
];
script-loader.service.ts
import { Injectable } from '@angular/core';
import { ScriptStore, StyleStore } from '../../stores/script.store';
@Injectable({
providedIn: 'root'
})
export class ScriptLoaderService {
private scripts: any = {};
private styles: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
StyleStore.forEach((script: any) => {
this.styles[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);
}
loadStyles(...scripts: string[]) {
var promises: any[] = [];
scripts.forEach((script) => promises.push(this.loadStyle(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') as any;
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);
}
});
}
loadStyle(name: string) {
return new Promise((resolve, reject) => {
//resolve if already loaded
if (this.styles[name].loaded) {
resolve({ script: name, loaded: true, status: 'Already Loaded' });
}
else {
//load style
let style = document.createElement('link') as any;
style.type = "text/css";
style.rel = "stylesheet";
style.href = this.styles[name].src;
if (style.readyState) { //IE
style.onreadystatechange = () => {
if (style.readyState === "loaded" || style.readyState === "complete") {
style.onreadystatechange = null;
this.styles[name].loaded = true;
resolve({ style: name, loaded: true, status: 'Loaded' });
}
};
} else { //Others
style.onload = () => {
this.styles[name].loaded = true;
resolve({ style: name, loaded: true, status: 'Loaded' });
};
}
style.onerror = (error: any) => resolve({ style: name, loaded: false, status: 'Loaded' });
document.getElementsByTagName('head')[0].appendChild(style);
}
});
}
}
app.component.ts
constructor(private scriptLoaderService: ScriptLoaderService) {
this.scriptLoaderService.loadStyles('fancybox-css').then(x => {
this.scriptLoaderService.load('jquery', 'fancybox').then(data => {
}).catch(error => console.log(error));
});
}
其他回答
我已经修改了@rahul kumars的答案，所以它使用可观察的代替:
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
}
如果你正在使用system.js，你可以在运行时使用System.import():
export class MyAppComponent {
constructor(){
System.import('path/to/your/module').then(refToLoadedModule => {
refToLoadedModule.someFunction();
}
);
}
如果你正在使用webpack，你可以充分利用它强大的代码分割支持。确保:
export class MyAppComponent {
constructor() {
require.ensure(['path/to/your/module'], require => {
let yourModule = require('path/to/your/module');
yourModule.someFunction();
});
}
}
还有一种选择是利用scriptjs包来解决这个问题
允许您按需从任何URL加载脚本资源
例子
安装包:
npm i scriptjs
以及scriptjs的类型定义:
npm install --save @types/scriptjs
然后导入$script.get()方法:
import { get } from 'scriptjs';
最后加载脚本资源，在我们的例子中是谷歌Maps库:
export class AppComponent implements OnInit {
ngOnInit() {
get("https://maps.googleapis.com/maps/api/js?key=", () => {
//Google Maps library has been loaded...
});
}
}
Demo
对于那些也想动态加载样式的人。 (基于@Rahul Kumar的精彩回答)
script.store.ts
interface Scripts {
name: string;
src: string;
}
export const StyleStore: Scripts[] = [
{ name: 'fancybox-css', src: 'https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' }
];
export const ScriptStore: Scripts[] = [
{ name: 'jquery', src: 'https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js' },
{ name: 'other', src: '[other script source]'}
];
script-loader.service.ts
import { Injectable } from '@angular/core';
import { ScriptStore, StyleStore } from '../../stores/script.store';
@Injectable({
providedIn: 'root'
})
export class ScriptLoaderService {
private scripts: any = {};
private styles: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
StyleStore.forEach((script: any) => {
this.styles[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);
}
loadStyles(...scripts: string[]) {
var promises: any[] = [];
scripts.forEach((script) => promises.push(this.loadStyle(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') as any;
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);
}
});
}
loadStyle(name: string) {
return new Promise((resolve, reject) => {
//resolve if already loaded
if (this.styles[name].loaded) {
resolve({ script: name, loaded: true, status: 'Already Loaded' });
}
else {
//load style
let style = document.createElement('link') as any;
style.type = "text/css";
style.rel = "stylesheet";
style.href = this.styles[name].src;
if (style.readyState) { //IE
style.onreadystatechange = () => {
if (style.readyState === "loaded" || style.readyState === "complete") {
style.onreadystatechange = null;
this.styles[name].loaded = true;
resolve({ style: name, loaded: true, status: 'Loaded' });
}
};
} else { //Others
style.onload = () => {
this.styles[name].loaded = true;
resolve({ style: name, loaded: true, status: 'Loaded' });
};
}
style.onerror = (error: any) => resolve({ style: name, loaded: false, status: 'Loaded' });
document.getElementsByTagName('head')[0].appendChild(style);
}
});
}
}
app.component.ts
constructor(private scriptLoaderService: ScriptLoaderService) {
this.scriptLoaderService.loadStyles('fancybox-css').then(x => {
this.scriptLoaderService.load('jquery', 'fancybox').then(data => {
}).catch(error => console.log(error));
});
}
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();
}
});
}
}
