मेरे पास स्क्रिप्ट को गतिशील रूप से लोड करने का एक अच्छा तरीका है! अब मैं अपने प्रोजेक्ट में ng6, echarts4 (> 700Kb), ngx-echarts3 का उपयोग करता हूं। जब मैं ngx-echarts के डॉक्स द्वारा उनका उपयोग करता हूं, तो मुझे angular.json: "script": ["./ नोड_modules / echarts / dist / echarts.min.js] में आयात echarts की आवश्यकता होती है। इस प्रकार लॉगिन मॉड्यूल, पेज में स्क्रिप्ट लोड करते समय। .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);
}
}
फिर सबमॉडुले-रूटिंगमॉडल.ट में Script इस PreloadScriptResolver को आयात करें:
const routes: Routes = [
{
path: "",
component: DashboardComponent,
canActivate: [AuthGuardService],
canActivateChild: [AuthGuardService],
resolve: {
preloadScripts: PreloadScriptResolver
},
data: {
preloadScripts: ["echarts"] // important!
},
children: [.....]
}
यह कोड अच्छी तरह से काम करता है, और इसके वादे हैं: जेएस फ़ाइल लोड होने के बाद, फिर मॉड्यूल लोड करना शुरू करते हैं! यह रिज़ॉल्वर कई राउटर में उपयोग कर सकता है