diff --git a/web/gui2/src/main/webapp/app/BUILD.bazel b/web/gui2/src/main/webapp/app/BUILD.bazel
index f18236d..7d7971e 100644
--- a/web/gui2/src/main/webapp/app/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/BUILD.bazel
@@ -14,9 +14,7 @@
  limitations under the License.
 """
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
-load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -26,7 +24,7 @@
     "@npm//@angular/forms",
 ]
 
-ng_module(
+ts_library(
     name = "app",
     srcs = [
         "nav/nav.component.ts",
@@ -35,7 +33,7 @@
         "onos.service.ts",
         "onos-routing.module.ts",
     ],
-    assets = [
+    angular_assets = [
         "onos.common.css",
         "onos.component.css",
         "onos.component.html",
@@ -44,6 +42,7 @@
         "nav/nav.theme.css",
     ],
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = NG_FACTORY_ADDED_IMPORTS + [
         "//web/gui2-fw-lib",
         "//web/gui2/src/main/webapp/app/view/apps:gui2-view-apps",
@@ -67,6 +66,7 @@
         "//apps/yang-gui/yang-gui2-lib:yang-gui2-lib",
         "//apps/inbandtelemetry/intApp-gui2/intApp:intapp-gui2-lib",
         "@npm//@angular/core",
+        "@npm//@angular/common",
         "@npm//@angular/router",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",
diff --git a/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel b/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel
index 9cfeb2a..64f314b 100644
--- a/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-apps",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-apps",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel b/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel
index 3dc548e..dea2783 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-cluster",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-cluster",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/device/BUILD.bazel b/web/gui2/src/main/webapp/app/view/device/BUILD.bazel
index f821a4f..ce7abff 100644
--- a/web/gui2/src/main/webapp/app/view/device/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/device/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-device",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-device",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel b/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel
index fe80c74..e2896f8 100644
--- a/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-flow",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-flow",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/group/BUILD.bazel b/web/gui2/src/main/webapp/app/view/group/BUILD.bazel
index 5eb3695..02a5f5d 100644
--- a/web/gui2/src/main/webapp/app/view/group/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/group/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-group",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-group",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/host/BUILD.bazel b/web/gui2/src/main/webapp/app/view/host/BUILD.bazel
index df3f9be..55cf6c3 100644
--- a/web/gui2/src/main/webapp/app/view/host/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/host/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-host",
     srcs = glob(
         include = [
@@ -28,14 +28,18 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel b/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel
index e8c5508..7207aff 100644
--- a/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-intent",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-intent",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/link/BUILD.bazel b/web/gui2/src/main/webapp/app/view/link/BUILD.bazel
index f7c458d..a15c5c9 100644
--- a/web/gui2/src/main/webapp/app/view/link/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/link/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-link",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-link",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel b/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel
index 01f2f95..ed4d19d 100644
--- a/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-meter",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-meter",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel b/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel
index 80cbe05..3936d9e 100644
--- a/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-partition",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-partition",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel b/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel
index 16250bb..697fa48 100644
--- a/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-pipeconf",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-pipeconf",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/port/BUILD.bazel b/web/gui2/src/main/webapp/app/view/port/BUILD.bazel
index 8b15b6f..91c6d7a 100644
--- a/web/gui2/src/main/webapp/app/view/port/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/port/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-port",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-port",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel b/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel
index 5ea3000..895281f 100644
--- a/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-processor",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-processor",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel b/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel
index f4a2f6d..93b4c3c 100644
--- a/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-settings",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-settings",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel b/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel
index 4cc24e3..a0200db 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel
@@ -14,11 +14,11 @@
  limitations under the License.
 """
 
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 package(default_visibility = ["//:__subpackages__"])
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-
-ng_module(
+ts_library(
     name = "gui2-view-tunnel",
     srcs = glob(
         include = [
@@ -28,15 +28,19 @@
             "**/*.spec.ts",
         ],
     ),
-    assets = glob([
+    angular_assets = [
+        "//web/gui2-fw-lib:extra_css",
+    ] + glob([
         "**/*.css",
         "**/*.html",
     ]),
     module_name = "gui2-view-tunnel",
     tsconfig = "//web/gui2:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//web/gui2-fw-lib",
         "@npm//@angular/animations",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser-dynamic",