feat(imports): add dynamic imports with html2canvas

Author: Ismaestro

README.md

@@ -68,6 +68,7 @@ npm run docker           | Builds the docker image and run the container
 * Internationalization
 * Lazy loading modules
 * Service Workers
+* Dynamic Imports
 * Custom [example library](https://github.com/Ismaestro/angular-example-library)
 * Modernizr (browser features detection)
 * Google Tag Manager

package-lock.json

@@ -54,6 +54,7 @@
     "@angular/service-worker": "^5.2.10",
     "@ngx-translate/core": "9.1.1",
     "@ngx-translate/http-loader": "2.0.1",
+    "@types/html2canvas": "0.0.33",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "9.6.5",
@@ -62,6 +63,7 @@
     "codelyzer": "4.2.1",
     "coveralls": "3.0.0",
     "hammerjs": "2.0.8",
+    "html2canvas": "^1.0.0-alpha.12",
     "http-server": "^0.11.1",
     "jasmine-core": "3.1.0",
     "jasmine-spec-reporter": "4.2.1",

package.json

@@ -29,7 +29,9 @@ <h1 class="header__title">{{'heroDetail' | translate}}</h1>
         </div>
     </ng-container>
 </div>
-
+<button mat-raised-button type="button" (click)="dynamicImport()">
+    {{'snapshot' | translate | uppercase}}
+</button>
 <button mat-raised-button type="button" (click)="goBack()">
     {{'goBack' | translate | uppercase}}
 </button>

src/app/heroes/hero-detail/hero-detail.component.html

@@ -38,6 +38,14 @@ export class HeroDetailComponent implements OnInit {
     });
   }
 
+  dynamicImport() {
+    import('html2canvas').then(html2canvas => {
+      html2canvas(document.getElementById('heroe-detail')).then((canvas) => {
+        window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
+      });
+    });
+  }
+
   goBack(): void {
     this.location.back();
   }

src/app/heroes/hero-detail/hero-detail.component.ts

@@ -49,5 +49,6 @@
   "updateBrowser": "You are using an old browser, please update it and reload the page.",
   "firstTwoHeroesById": "Heroes (1-2)",
   "offlineMessage": "Without connection we can not load anything!",
-  "goBack": "Go back"
+  "goBack": "Go back",
+  "snapshot": "Snapshot"
 }

src/assets/i18n/en.json

@@ -49,5 +49,6 @@
   "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página.",
   "firstTwoHeroesById": "Heroes (1-2)",
   "offlineMessage": "Sin conexión no podemos cargar nada!",
-  "goBack": "Volver"
+  "goBack": "Volver",
+  "snapshot": "Captura"
 }

src/assets/i18n/es.json

@@ -49,5 +49,6 @@
   "updateBrowser": "Você está usando um navegador antigo, atualize a versão e recarregue a página.",
   "firstTwoHeroesById": "Heróis (1-2)",
   "offlineMessage": "Sem conexão não podemos carregar nada!",
-  "goBack": "Voltar"
+  "goBack": "Voltar",
+  "snapshot": "Instantâneo"
 }

src/assets/i18n/pt-br.json

@@ -49,5 +49,6 @@
   "updateBrowser": "您正在使用一个旧版本浏览器，请更新它并重新加载页面。",
   "firstTwoHeroesById": "英雄 (1-2)",
   "offlineMessage": "沒有連接，我們無法加載任何東西!",
-  "goBack": "回來"
+  "goBack": "回來",
+  "snapshot": "快照"
 }

src/assets/i18n/zh.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "es2015",
+    "module": "esnext",
     "types": []
   },
   "exclude": [