feat: seperate 3th party css files from initial bundle

npm/ng-packs/.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /tmp
 /out-tsc
+/dist/dev-app
 # Only exists if Bazel was run
 /bazel-out
 

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": []
           },

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();
+  }
+}

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"
-  }
-}
+  "defaultProject": "myProjectName"
+}

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();
+  }
+}