我有这个模块，它将外部库与额外的逻辑组件化，而不直接将<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动态加载脚本?
当前回答
我有一个很好的方法来动态加载脚本! 现在我在我的项目中使用ng6, echarts4 (>700Kb)，ngx-echarts3。当我通过ngx-echarts的文档使用它们时，我需要在angular中导入echarts。json: “脚本”:["。/ node_modules / echarts / dist / echarts.min.js”) 因此在登录模块中，页面同时加载scripts.js，这是一个大文件!我不想要。
所以，我认为angular将每个模块作为一个文件加载，我可以插入一个路由器解析器来预加载js，然后开始加载模块!
/ / 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);
}
}
然后在子模块-routing.module中。导入PreloadScriptResolver:
const routes: Routes = [
{
path: "",
component: DashboardComponent,
canActivate: [AuthGuardService],
canActivateChild: [AuthGuardService],
resolve: {
preloadScripts: PreloadScriptResolver
},
data: {
preloadScripts: ["echarts"] // important!
},
children: [.....]
}
这段代码工作得很好，它承诺:js文件加载后，然后模块开始加载!这个解析器可以在许多路由器中使用
其他回答
我发现这个解决方案更干净，首先在你的模块中导入HttpClientJsonpModule，然后做这样的事情
this.apiLoaded = this.httpClient.jsonp(environment.AnyApiUrl, 'callback')
.pipe(
map(() => true),
catchError(() => of(false)),
);
在模板中:
<app-component *ngIf="apiLoaded | async"></app-component>
这个解决方案在Angular谷歌Maps的官方文档中。
您可以使用谷歌标签管理器来管理外部脚本，而无需进入代码。对于非技术用户和技术用户来说，这是一个完美的解决方案。
Angular的通用解决方案;在加载播放视频的脚本之前，我需要等待页面上的特定元素。
import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
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);
}
}
}
我有一个很好的方法来动态加载脚本! 现在我在我的项目中使用ng6, echarts4 (>700Kb)，ngx-echarts3。当我通过ngx-echarts的文档使用它们时，我需要在angular中导入echarts。json: “脚本”:["。/ node_modules / echarts / dist / echarts.min.js”) 因此在登录模块中，页面同时加载scripts.js，这是一个大文件!我不想要。
所以，我认为angular将每个模块作为一个文件加载，我可以插入一个路由器解析器来预加载js，然后开始加载模块!
/ / 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);
}
}
然后在子模块-routing.module中。导入PreloadScriptResolver:
const routes: Routes = [
{
path: "",
component: DashboardComponent,
canActivate: [AuthGuardService],
canActivateChild: [AuthGuardService],
resolve: {
preloadScripts: PreloadScriptResolver
},
data: {
preloadScripts: ["echarts"] // important!
},
children: [.....]
}
这段代码工作得很好，它承诺:js文件加载后，然后模块开始加载!这个解析器可以在许多路由器中使用
对于那些也想动态加载样式的人。 (基于@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));
});
}
