From ac71b2fc6f7ae6e6b7d4e632104af330ab8de484 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Mon, 7 Oct 2019 15:41:45 +0300
Subject: [PATCH] feat: seperate 3th party css files from initial bundle

---
 npm/ng-packs/.gitignore                       |  1 +
 npm/ng-packs/angular.json                     | 25 +++++++--
 .../apps/dev-app/src/app/app.component.ts     | 18 ++++++-
 templates/app/angular/angular.json            | 52 ++++++++++---------
 .../app/angular/src/app/app.component.ts      | 18 ++++++-
 5 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/npm/ng-packs/.gitignore b/npm/ng-packs/.gitignore
index 7f282e1aa3..3915996991 100644
--- a/npm/ng-packs/.gitignore
+++ b/npm/ng-packs/.gitignore
@@ -3,6 +3,7 @@
 # compiled output
 /tmp
 /out-tsc
+/dist/dev-app
 # Only exists if Bazel was run
 /bazel-out
 
diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json
index fb32a2d757..a06c34c90e 100644
--- a/npm/ng-packs/angular.json
+++ b/npm/ng-packs/angular.json
@@ -434,13 +434,30 @@
             "tsConfig": "apps/dev-app/tsconfig.app.json",
             "aot": false,
             "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
+            "extractCss": true,
             "styles": [
               "apps/dev-app/src/styles.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",
-              "node_modules/primeng/resources/themes/nova-light/theme.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeng/resources/primeng.min.css"
+              {
+                "input": "node_modules/font-awesome/css/font-awesome.min.css",
+                "lazy": true,
+                "bundleName": "font-awesome.min"
+              },
+              {
+                "input": "node_modules/primeng/resources/themes/nova-light/theme.css",
+                "lazy": true,
+                "bundleName": "primeng-nova-light-theme"
+              },
+              {
+                "input": "node_modules/primeicons/primeicons.css",
+                "lazy": true,
+                "bundleName": "primeicons"
+              },
+              {
+                "input": "node_modules/primeng/resources/primeng.min.css",
+                "lazy": true,
+                "bundleName": "primeng.min"
+              }
             ],
             "scripts": []
           },
diff --git a/npm/ng-packs/apps/dev-app/src/app/app.component.ts b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
index bf2a27962a..e89c73184d 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { LazyLoadService } from '@abp/ng.core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,17 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(private lazyLoadService: LazyLoadService) {}
+
+  ngOnInit() {
+    this.lazyLoadService
+      .load(
+        ['primeng.min.css', 'primeicons.css', 'primeng-nova-light-theme.css', 'font-awesome.min.css'],
+        'style',
+        null,
+        'head',
+      )
+      .subscribe();
+  }
+}
diff --git a/templates/app/angular/angular.json b/templates/app/angular/angular.json
index 8a844d2562..f7bb4656fe 100644
--- a/templates/app/angular/angular.json
+++ b/templates/app/angular/angular.json
@@ -23,17 +23,31 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": false,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "extractCss": true,
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",
-              "node_modules/primeng/resources/themes/nova-light/theme.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeng/resources/primeng.min.css"
+              {
+                "input": "node_modules/font-awesome/css/font-awesome.min.css",
+                "lazy": true,
+                "bundleName": "font-awesome.min"
+              },
+              {
+                "input": "node_modules/primeng/resources/themes/nova-light/theme.css",
+                "lazy": true,
+                "bundleName": "primeng-nova-light-theme"
+              },
+              {
+                "input": "node_modules/primeicons/primeicons.css",
+                "lazy": true,
+                "bundleName": "primeicons"
+              },
+              {
+                "input": "node_modules/primeng/resources/primeng.min.css",
+                "lazy": true,
+                "bundleName": "primeng.min"
+              }
             ],
             "scripts": []
           },
@@ -100,10 +114,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
@@ -118,14 +129,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
+            "exclude": ["**/node_modules/**"]
           }
         },
         "e2e": {
@@ -143,8 +148,5 @@
       }
     }
   },
-  "defaultProject": "myProjectName",
-  "cli": {
-    "analytics": "07ef29be-2b85-4919-9f78-44994f63b8b7"
-  }
-}
\ No newline at end of file
+  "defaultProject": "myProjectName"
+}
diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts
index bf2a27962a..e89c73184d 100644
--- a/templates/app/angular/src/app/app.component.ts
+++ b/templates/app/angular/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { LazyLoadService } from '@abp/ng.core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,17 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(private lazyLoadService: LazyLoadService) {}
+
+  ngOnInit() {
+    this.lazyLoadService
+      .load(
+        ['primeng.min.css', 'primeicons.css', 'primeng-nova-light-theme.css', 'font-awesome.min.css'],
+        'style',
+        null,
+        'head',
+      )
+      .subscribe();
+  }
+}