Skip to content
Permalink
Browse files

Dynamically Loading Scripts from CDN

  • Loading branch information...
ngdevelop-tech committed Sep 10, 2019
1 parent d479108 commit 94ecc6fd430310312ad564de3c4c64a369023f82
Showing with 63 additions and 3 deletions.
  1. +5 −1 src/app/app.component.ts
  2. +56 −0 src/app/script.service.ts
  3. +2 −2 src/index.html
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { Resume, Experience, Education, Skill } from './resume';
import { ScriptService } from './script.service';
declare let pdfMake: any ;
@Component({
selector: 'app-root',
@@ -12,7 +13,7 @@ export class AppComponent {

degrees = ['B.E.', 'M.E.', 'B.Com', 'M.Com'];

constructor() {
constructor(private scriptService: ScriptService) {
this.resume = JSON.parse(sessionStorage.getItem('resume')) || new Resume();
if (!this.resume.experiences || this.resume.experiences.length === 0) {
this.resume.experiences = [];
@@ -26,6 +27,9 @@ export class AppComponent {
this.resume.skills = [];
this.resume.skills.push(new Skill());
}

console.log('Loading External Scripts');
this.scriptService.load('pdfMake', 'vfsFonts');
}

addExperience() {
@@ -0,0 +1,56 @@
import { Injectable } from '@angular/core';

interface Scripts {
name: string;
src: string;
}
export const ScriptStore: Scripts[] = [
{ name: 'pdfMake', src: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js' },
{ name: 'vfsFonts', src: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js' }
];

@Injectable({
providedIn: 'root'
})
export class ScriptService {

private scripts: any = {};

constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
}

load(...scripts: string[]) {
const 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
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
script.onload = () => {
this.scripts[name].loaded = true;
console.log(`${name} Loaded.`);
resolve({ script: name, loaded: true, status: 'Loaded' });
};
script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
document.getElementsByTagName('head')[0].appendChild(script);
}
});
}


}
@@ -13,8 +13,8 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script>
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script> -->
</head>

<body>

0 comments on commit 94ecc6f

Please sign in to comment.
You can’t perform that action at this time.