Added native Bazel build to GUI2. Reduced a lot of the unused Angular CLI structures

Reviewers should look at the changes in WORKSPACE, BUILD, BUILD.bazel, README.md files
This is only possible now as rules_nodejs went to 1.0.0 on December 20
gui2 has now been made the entry point (rather than gui2-fw-lib)
No tests or linting are functional yet for Typescript
Each NgModule now has its own BUILD.bazel file with ng_module
gui2-fw-lib is all one module and has been refactored to simplify the directory structure
gui2-topo-lib is also all one module - its directory structure has had 3 layers removed
The big bash script in web/gui2/BUILD has been removed - all is done through ng_module rules
in web/gui2/src/main/webapp/BUILD.bazel and web/gui2/src/main/webapp/app/BUILD.bazel

Change-Id: Ifcfcc23a87be39fe6d6c8324046cc8ebadb90551
diff --git a/web/gui2/src/main/webapp/BUILD.bazel b/web/gui2/src/main/webapp/BUILD.bazel
new file mode 100644
index 0000000..17eac76
--- /dev/null
+++ b/web/gui2/src/main/webapp/BUILD.bazel
@@ -0,0 +1,129 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("@npm//history-server:index.bzl", "history_server")
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_terser//:index.bzl", "terser_minified")
+load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
+
+#load("@npm_bazel_karma//:index.bzl", "ts_web_test_suite")
+
+exports_files(["WEB-INF/web.xml"])
+
+# We don't import from these, but the generated ngfactory code will
+NG_FACTORY_ADDED_IMPORTS = [
+    "@npm//@angular/animations",
+    "@npm//@angular/forms",
+]
+
+ng_module(
+    name = "gui2",
+    srcs = [
+        "environments/environment.prod.ts",
+        "onos.prod.ts",
+    ],
+    tsconfig = "//:tsconfig.json",
+    deps = NG_FACTORY_ADDED_IMPORTS + [
+        "//web/gui2/src/main/webapp/app:app",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/router",
+    ],
+)
+
+rollup_bundle(
+    name = "bundle-es2015",
+    config_file = "rollup.config.js",
+    entry_points = {
+        ":onos.prod.ts": "index",
+    },
+    output_dir = True,
+    deps = [
+        "//web/gui2/src/main/webapp:gui2",
+        "@npm//rollup-plugin-commonjs",
+        "@npm//rollup-plugin-node-resolve",
+    ],
+)
+
+terser_minified(
+    name = "bundle-es2015.min",
+    src = ":bundle-es2015",
+)
+
+# Files that we serve in both development and production
+_ASSETS = [
+    # This label references an output of the "styles" sass_binary above.
+    ":onos.global.css",
+    "//web/gui:src/main/webapp/data",
+    "fonts/open-sans-v15-latin-300.woff",
+    "fonts/open-sans-v15-latin-300.woff2",
+    "fonts/open-sans-v15-latin-600.woff",
+    "fonts/open-sans-v15-latin-600.woff2",
+    "fonts/open-sans-v15-latin-700.woff",
+    "fonts/open-sans-v15-latin-700.woff2",
+    "error.html",
+    "login.html",
+    "nav.html",
+    "not-ready.html",
+    # We load zone.js outside the bundle. That's because it's a "pollyfill"
+    # which speculates that such features might be available in a browser.
+    # Also it's tricky to configure dead code elimination to understand that
+    # zone.js is used, given that we don't have any import statement that
+    # imports from it.
+    "@npm//:node_modules/zone.js/dist/zone.min.js",
+]
+
+pkg_web(
+    name = "prodapp",
+    srcs = _ASSETS + [
+        ":bundle-es2015.min",
+        # Include polyfills that will be requested by old browsers
+        #        "@npm//:node_modules/systemjs/dist/system.js",
+        #        "@npm//:node_modules/core-js/client/core.min.js",
+        "index.html",
+    ],
+    # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
+    # so we must serve them at that path, by stripping a prefix
+    additional_root_paths = [
+        "web/gui/src/main/webapp",
+    ],
+)
+
+history_server(
+    name = "prodserver",
+    data = [":prodapp"],
+    # '-a src/prodapp' will ask history-server to scan for all apps under the
+    # given folder this will result in the following auto-configuration:
+    #   /example => src/prodapp/example
+    #   /        => src/prodapp
+    templated_args = [
+        "-a",
+        "web/gui2/src/main/webapp/prodapp",
+    ],
+)
+
+genrule(
+    name = "d3-copy",
+    srcs = ["@npm//:node_modules/d3/dist/d3.js"],
+    outs = ["d3.js"],
+    cmd = "cp $< $@",
+    output_to_bindir = 1,
+)
diff --git a/web/gui2/src/main/webapp/WEB-INF/web.xml b/web/gui2/src/main/webapp/WEB-INF/web.xml
index 5ac6e2f..2543df8 100644
--- a/web/gui2/src/main/webapp/WEB-INF/web.xml
+++ b/web/gui2/src/main/webapp/WEB-INF/web.xml
@@ -68,7 +68,7 @@
         <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
         <init-param>
             <param-name>jersey.config.server.provider.classnames</param-name>
-            <param-value>org.onosproject.ui.impl.MainIndexResource</param-value>
+            <param-value>org.onosproject.ui.impl.gui2.MainIndexResource</param-value>
         </init-param>
         <load-on-startup>1</load-on-startup>
     </servlet>
diff --git a/web/gui2/src/main/webapp/app/BUILD.bazel b/web/gui2/src/main/webapp/app/BUILD.bazel
new file mode 100644
index 0000000..38cb9ae
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/BUILD.bazel
@@ -0,0 +1,71 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+package(default_visibility = ["//:__subpackages__"])
+
+# We don't import from these, but the generated ngfactory code will
+NG_FACTORY_ADDED_IMPORTS = [
+    "@npm//@angular/animations",
+    "@npm//@angular/forms",
+]
+
+ng_module(
+    name = "app",
+    srcs = [
+        "nav/nav.component.ts",
+        "onos.component.ts",
+        "onos.module.ts",
+        "onos.service.ts",
+        "onos-routing.module.ts",
+    ],
+    assets = [
+        "onos.common.css",
+        "onos.component.css",
+        "onos.component.html",
+        "nav/nav.component.css",
+        "nav/nav.component.html",
+        "nav/nav.theme.css",
+    ],
+    tsconfig = "//:tsconfig.json",
+    deps = NG_FACTORY_ADDED_IMPORTS + [
+        "//web/gui2-fw-lib",
+        "//web/gui2/src/main/webapp/app/view/apps:gui2-view-apps",
+        "//web/gui2/src/main/webapp/app/view/processor:gui2-view-processor",
+        "//web/gui2/src/main/webapp/app/view/settings:gui2-view-settings",
+        "//web/gui2/src/main/webapp/app/view/partition:gui2-view-partition",
+        "//web/gui2/src/main/webapp/app/view/cluster:gui2-view-cluster",
+        "//web/gui2/src/main/webapp/app/view/device:gui2-view-device",
+        "//web/gui2/src/main/webapp/app/view/link:gui2-view-link",
+        "//web/gui2/src/main/webapp/app/view/host:gui2-view-host",
+        "//web/gui2/src/main/webapp/app/view/flow:gui2-view-flow",
+        "//web/gui2/src/main/webapp/app/view/intent:gui2-view-intent",
+        "//web/gui2/src/main/webapp/app/view/tunnel:gui2-view-tunnel",
+        "//web/gui2/src/main/webapp/app/view/port:gui2-view-port",
+        "//web/gui2/src/main/webapp/app/view/group:gui2-view-group",
+        "//web/gui2/src/main/webapp/app/view/meter:gui2-view-meter",
+        "//web/gui2/src/main/webapp/app/view/pipeconf:gui2-view-pipeconf",
+        "//web/gui2-topo-lib:gui2-topo-lib",
+        "//apps/faultmanagement/fm-gui2-lib:fm-gui2-lib",
+        "//apps/roadm/web/roadm-gui:roadm-gui",
+        "@npm//@angular/core",
+        "@npm//@angular/router",
+        "@npm//@angular/platform-browser",
+        "@npm//rxjs",
+        "@npm//@types",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.ts b/web/gui2/src/main/webapp/app/nav/nav.component.ts
index 218285b..567b6c5 100644
--- a/web/gui2/src/main/webapp/app/nav/nav.component.ts
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.ts
@@ -20,7 +20,7 @@
     LionService,
     LogService,
     NavService
-} from 'gui2-fw-lib';
+} from '../../../../../../gui2-fw-lib/public_api';
 
 /**
  * ONOS GUI -- Navigation Module
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index fc8375d..85a9586 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -14,90 +14,104 @@
  * limitations under the License.
  */
 import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
-import {Gui2TopoLibModule} from 'gui2-topo-lib';
-import {FmGui2LibModule} from 'fm-gui2-lib';
-import {RoadmGuiLibModule} from 'roadm-gui-lib';
+import {Route, RouterModule} from '@angular/router';
 
 /**
  * The set of Routes in the application - can be chosen from nav menu or
  * elsewhere like tabular icon for flows etc
  */
-const onosRoutes: Routes = [
-    {
+const onosRoutes: Route[] = [
+    <Route>{
         path: 'app',
-        loadChildren: 'app/view/apps/apps.module#AppsModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/apps/apps.module').then(m => m.AppsModule)
     },
-    {
+    <Route>{
         path: 'processor',
-        loadChildren: 'app/view/processor/processor.module#ProcessorModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/processor/processor.module').then(m => m.ProcessorModule)
     },
-    {
+    <Route>{
         path: 'settings',
-        loadChildren: 'app/view/settings/settings.module#SettingsModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/settings/settings.module').then(m => m.SettingsModule)
     },
-    {
+    <Route>{
         path: 'partition',
-        loadChildren: 'app/view/partition/partition.module#PartitionModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/partition/partition.module').then(m => m.PartitionModule)
     },
-    {
+    <Route>{
         path: 'cluster',
-        loadChildren: 'app/view/cluster/cluster.module#ClusterModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/cluster/cluster.module').then(m => m.ClusterModule)
     },
-    {
+    <Route>{
         path: 'device',
-        loadChildren: 'app/view/device/device.module#DeviceModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/device/device.module').then(m => m.DeviceModule)
     },
-    {
+    <Route>{
         path: 'link',
-        loadChildren: 'app/view/link/link.module#LinkModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/link/link.module').then(m => m.LinkModule)
     },
-    {
+    <Route>{
         path: 'host',
-        loadChildren: 'app/view/host/host.module#HostModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/host/host.module').then(m => m.HostModule)
     },
-    {
+    <Route>{
         path: 'intent',
-        loadChildren: 'app/view/intent/intent.module#IntentModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/intent/intent.module').then(m => m.IntentModule)
     },
-    {
+    <Route>{
         path: 'tunnel',
-        loadChildren: 'app/view/tunnel/tunnel.module#TunnelModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/tunnel/tunnel.module').then(m => m.TunnelModule)
     },
-    {
+    <Route>{
         path: 'flow',
-        loadChildren: 'app/view/flow/flow.module#FlowModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/flow/flow.module').then(m => m.FlowModule)
     },
-    {
+    <Route>{
         path: 'port',
-        loadChildren: 'app/view/port/port.module#PortModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/port/port.module').then(m => m.PortModule)
     },
-    {
+    <Route>{
         path: 'group',
-        loadChildren: 'app/view/group/group.module#GroupModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/group/group.module').then(m => m.GroupModule)
     },
-    {
+    <Route>{
         path: 'meter',
-        loadChildren: 'app/view/meter/meter.module#MeterModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/meter/meter.module').then(m => m.MeterModule)
     },
-    {
+    <Route>{
         path: 'pipeconf',
-        loadChildren: 'app/view/pipeconf/pipeconf.module#PipeconfModule'
+        pathMatch: 'full',
+        loadChildren: () => import('./view/pipeconf/pipeconf.module').then(m => m.PipeconfModule)
     },
-    /*  Comment out below section for running locally with 'ng serve' when developing */
-    {
+    <Route>{
         path: 'topo2',
-        loadChildren: 'gui2-topo-lib#Gui2TopoLibModule'
+        pathMatch: 'full',
+        loadChildren: () => import('../../../../../gui2-topo-lib/lib/gui2-topo-lib.module').then(m => m.Gui2TopoLibModule)
     },
-    {
+    <Route>{
         path: 'alarmTable',
-        loadChildren: 'fm-gui2-lib#FmGui2LibModule'
+        pathMatch: 'full',
+        loadChildren: () => import('../../../../../../apps/faultmanagement/fm-gui2-lib/lib/fm-gui2-lib.module').then(m => m.FmGui2LibModule)
     },
-    {
+    <Route>{
         path: 'roadm-gui',
-        loadChildren: 'roadm-gui-lib#RoadmGuiLibModule'
+        pathMatch: 'full',
+        loadChildren: () => import('../../../../../../apps/roadm/web/roadm-gui/lib/roadm-gui-lib.module').then(m => m.RoadmGuiLibModule)
     },
-    {
+    <Route>{
         path: '',
         redirectTo: 'topo2', // Default to Topology view
         pathMatch: 'full'
diff --git a/web/gui2/src/main/webapp/app/onos.component.html b/web/gui2/src/main/webapp/app/onos.component.html
index 029d524..dd9e64f 100644
--- a/web/gui2/src/main/webapp/app/onos.component.html
+++ b/web/gui2/src/main/webapp/app/onos.component.html
@@ -13,7 +13,7 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
-<div id="view" onosDetectBrowser>
+<div id="view">
     <onos-mast [username]="onos.username"></onos-mast>
     <onos-nav></onos-nav>
     <onos-veil #veil></onos-veil>
@@ -22,6 +22,3 @@
     <div id="floatpanels"></div>
 
 </div>
-
-
-
diff --git a/web/gui2/src/main/webapp/app/onos.component.ts b/web/gui2/src/main/webapp/app/onos.component.ts
index 909b74b..4b27a3e 100644
--- a/web/gui2/src/main/webapp/app/onos.component.ts
+++ b/web/gui2/src/main/webapp/app/onos.component.ts
@@ -24,7 +24,7 @@
     WebSocketService,
     WsOptions,
     KeysService
-} from 'gui2-fw-lib';
+} from '../../../../../gui2-fw-lib/public_api';
 import { OnosService, View } from './onos.service';
 
 // secret sauce
diff --git a/web/gui2/src/main/webapp/app/onos.module.ts b/web/gui2/src/main/webapp/app/onos.module.ts
index f9bbd15..0e8b9ba 100644
--- a/web/gui2/src/main/webapp/app/onos.module.ts
+++ b/web/gui2/src/main/webapp/app/onos.module.ts
@@ -21,31 +21,36 @@
 import { OnosRoutingModule } from './onos-routing.module';
 import { NavComponent } from './nav/nav.component';
 import { OnosComponent } from './onos.component';
-import { Gui2FwLibModule, ConsoleLoggerService, LogService } from 'gui2-fw-lib';
+import {
+    Gui2FwLibModule,
+    ConsoleLoggerService,
+    LogService
+} from '../../../../../gui2-fw-lib/public_api';
 import { OnosService } from './onos.service';
 
 /**
  * ONOS GUI -- Main Application Module
  */
 @NgModule({
-  declarations: [
-    NavComponent,
-    OnosComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    Gui2FwLibModule,
-    OnosRoutingModule
-  ],
-  providers: [
-    OnosService,
-    { provide: LogService, useClass: ConsoleLoggerService },
-    { provide: 'Window', useValue: window }
-  ],
-  bootstrap: [
-    OnosComponent,
-  ]
+    declarations: [
+        NavComponent,
+        OnosComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        Gui2FwLibModule,
+        OnosRoutingModule
+    ],
+    providers: [
+        OnosService,
+        {provide: LogService, useClass: ConsoleLoggerService},
+        {provide: 'Window', useValue: window}
+    ],
+    bootstrap: [
+        OnosComponent,
+    ]
 })
-export class OnosModule { }
+export class OnosModule {
+}
diff --git a/web/gui2/src/main/webapp/app/onos.service.ts b/web/gui2/src/main/webapp/app/onos.service.ts
index 2cfe008..c64267e 100644
--- a/web/gui2/src/main/webapp/app/onos.service.ts
+++ b/web/gui2/src/main/webapp/app/onos.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {Inject, Injectable} from '@angular/core';
-import { LogService } from 'gui2-fw-lib';
+import { LogService } from '../../../../../gui2-fw-lib/public_api';
 
 /**
  * A structure of View elements for the OnosService
diff --git a/web/gui2/src/main/webapp/app/test.ts b/web/gui2/src/main/webapp/app/test.ts
deleted file mode 100644
index 1631789..0000000
--- a/web/gui2/src/main/webapp/app/test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel b/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel
new file mode 100644
index 0000000..472a086
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-apps",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-apps",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts b/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts
deleted file mode 100644
index 1d4f483..0000000
--- a/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AppsComponent } from './apps/apps.component';
-
-
-const appsRoutes: Routes = [
-    {
-        path: '',
-        component: AppsComponent
-    }
-];
-
-/**
- * ONOS GUI -- Apps Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(appsRoutes)],
-    exports: [RouterModule]
-})
-export class AppsRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.module.ts b/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
index 464ad3c..76215e5 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
@@ -16,10 +16,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { AppsRoutingModule } from './apps-routing.module';
+import { RouterModule } from '@angular/router';
 import { AppsComponent } from './apps/apps.component';
 import { AppsDetailsComponent } from './appsdetails/appsdetails.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * ONOS GUI -- Apps View Module
@@ -31,8 +31,9 @@
 @NgModule({
     imports: [
         CommonModule,
-        AppsRoutingModule,
         Gui2FwLibModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: AppsComponent}]),
         FormsModule
     ],
     declarations: [
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
index ee543ad..e76bf64 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
@@ -24,7 +24,7 @@
     TableBaseImpl, TableResponse, SortDir,
     UrlFnService,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 const INSTALLED = 'INSTALLED';
 const ACTIVE = 'ACTIVE';
@@ -104,7 +104,7 @@
   templateUrl: './apps.component.html',
   styleUrls: [
     './apps.component.css', './apps.theme.css',
-    '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css'
+    '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css'
     ]
 })
 export class AppsComponent extends TableBaseImpl implements OnInit, OnDestroy {
diff --git a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
index 0aa6c7c..b3bbdb8 100644
--- a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
@@ -21,7 +21,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 import { App, APPURLPREFIX, ICONURLSUFFIX } from '../apps/apps.component';
 
@@ -42,7 +42,7 @@
   templateUrl: './appsdetails.component.html',
   styleUrls: [
     './appsdetails.component.css',
-    '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'
+    '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'
   ],
   animations: [
     trigger('appDetailsState', [
diff --git a/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel b/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel
new file mode 100644
index 0000000..5401cad
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/cluster/BUILD.bazel
@@ -0,0 +1,47 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-cluster",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-cluster",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//d3",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
index 81f2f78..4ddcb02 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
@@ -23,7 +23,7 @@
     LionService,
     PanelService,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../gui2-fw-lib/public_api';
 import * as d3 from 'd3';
 import {HostListener} from '@angular/core';
 
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster-routing.module.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster-routing.module.ts
deleted file mode 100644
index 1dd26b5..0000000
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import {ClusterComponent} from './cluster/cluster.component';
-
-const clusterRoutes: Routes = [
-    {
-        path: '',
-        component: ClusterComponent
-    }
-];
-
-/**
- * ONOS GUI -- Cluster Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(clusterRoutes)],
-    exports: [RouterModule]
-})
-export class ClusterRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster.module.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster.module.ts
index 2ffb801..50db1da 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster.module.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster.module.ts
@@ -15,16 +15,17 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { ClusterComponent } from './cluster/cluster.component';
-import { ClusterRoutingModule } from './cluster-routing.module';
 import { ClusterDetailsDirective } from './cluster-details.directive';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
         Gui2FwLibModule,
-        ClusterRoutingModule
+        RouterModule,
+        RouterModule.forChild([{path: '', component: ClusterComponent}]),
     ],
     declarations: [ClusterComponent, ClusterDetailsDirective]
 })
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
index ee74446..a4d43b1 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster/cluster.component.ts
@@ -20,7 +20,7 @@
     WebSocketService,
     LionService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * Model of the response from WebSocket
@@ -49,7 +49,9 @@
 @Component({
   selector: 'onos-cluster',
   templateUrl: './cluster.component.html',
-  styleUrls: ['./cluster.component.css', './cluster.theme.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+  styleUrls: ['./cluster.component.css', './cluster.theme.css',
+      '../../../../../../../../gui2-fw-lib/lib/widget/table.css',
+      '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 
 export class ClusterComponent extends TableBaseImpl implements OnInit, OnDestroy {
diff --git a/web/gui2/src/main/webapp/app/view/device/BUILD.bazel b/web/gui2/src/main/webapp/app/view/device/BUILD.bazel
new file mode 100644
index 0000000..ac3eb0c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/device/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-device",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-device",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/device/device-routing.module.ts b/web/gui2/src/main/webapp/app/view/device/device-routing.module.ts
deleted file mode 100644
index 64bcb92..0000000
--- a/web/gui2/src/main/webapp/app/view/device/device-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { DeviceComponent } from './device/device.component';
-
-const deviceRoutes: Routes = [
-    {
-        path: '',
-        component: DeviceComponent
-    }
-];
-
-/**
- * ONOS GUI -- Devices Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(deviceRoutes)],
-    exports: [RouterModule]
-})
-export class DeviceRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/device/device.module.ts b/web/gui2/src/main/webapp/app/view/device/device.module.ts
index 94e717d..a038ef5 100644
--- a/web/gui2/src/main/webapp/app/view/device/device.module.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device.module.ts
@@ -15,9 +15,9 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DeviceRoutingModule } from './device-routing.module';
+import { Routes, RouterModule } from '@angular/router';
 import { DeviceComponent } from './device/device.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { FormsModule } from '@angular/forms';
 import { DeviceDetailsComponent } from './devicedetails/devicedetails.component';
 
@@ -27,7 +27,8 @@
 @NgModule({
     imports: [
         CommonModule,
-        DeviceRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: DeviceComponent}]),
         Gui2FwLibModule,
         FormsModule
     ],
diff --git a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
index a164af2..22322a6 100644
--- a/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device/device.component.ts
@@ -20,7 +20,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -57,7 +57,7 @@
 @Component({
     selector: 'onos-device',
     templateUrl: './device.component.html',
-    styleUrls: ['./device.component.css', './device.theme.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./device.component.css', './device.theme.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class DeviceComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts b/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
index a5c750a..439c302 100644
--- a/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/devicedetails/devicedetails.component.ts
@@ -21,7 +21,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * The details view when a device row is clicked from the Device view
@@ -39,7 +39,7 @@
     selector: 'onos-devicedetails',
     templateUrl: './devicedetails.component.html',
     styleUrls: ['./devicedetails.component.css',
-        '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'
+        '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'
     ],
     animations: [
         trigger('deviceDetailsState', [
diff --git a/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel b/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel
new file mode 100644
index 0000000..7c5bbf7
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/flow/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-flow",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-flow",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow-routing.module.ts b/web/gui2/src/main/webapp/app/view/flow/flow-routing.module.ts
deleted file mode 100644
index 4ddf65f..0000000
--- a/web/gui2/src/main/webapp/app/view/flow/flow-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { FlowComponent } from './flow/flow.component';
-
-const flowRoutes: Routes = [
-    {
-        path: '',
-        component: FlowComponent
-    }
-];
-
-/**
- * ONOS GUI -- Flows Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(flowRoutes)],
-    exports: [RouterModule]
-})
-export class FlowRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow.module.ts b/web/gui2/src/main/webapp/app/view/flow/flow.module.ts
index ee03a8d..c51da09 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow.module.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flow.module.ts
@@ -16,10 +16,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlowComponent } from './flow/flow.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { FlowRoutingModule } from './flow-routing.module';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { FormsModule } from '@angular/forms';
 import { FlowDetailsComponent } from './flowdetails/flowdetails/flowdetails.component';
+import {RouterModule} from '@angular/router';
 
 /**
  * ONOS GUI -- Flow View Module
@@ -28,7 +28,8 @@
     imports: [
         CommonModule,
         Gui2FwLibModule,
-        FlowRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: FlowComponent}]),
         FormsModule
     ],
     declarations: [
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
index a54e0f6..8c81bb3 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.ts
@@ -21,7 +21,7 @@
     WebSocketService,
     LionService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -51,7 +51,7 @@
 @Component({
     selector: 'onos-flow',
     templateUrl: './flow.component.html',
-    styleUrls: ['./flow.component.css', './flow.theme.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./flow.component.css', './flow.theme.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class FlowComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
index fbb3592..f9b3f4c 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/flow/flowdetails/flowdetails/flowdetails.component.ts
@@ -20,7 +20,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../../gui2-fw-lib/public_api';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /**
@@ -40,7 +40,7 @@
     templateUrl: './flowdetails.component.html',
     styleUrls: [
         './flowdetails.component.css',
-        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+        '../../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'
     ],
     animations: [
         trigger('flowDetailsState', [
diff --git a/web/gui2/src/main/webapp/app/view/group/BUILD.bazel b/web/gui2/src/main/webapp/app/view/group/BUILD.bazel
new file mode 100644
index 0000000..82ad14a
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/group/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-group",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-group",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/group/group-routing.module.ts b/web/gui2/src/main/webapp/app/view/group/group-routing.module.ts
deleted file mode 100644
index 9ce3153..0000000
--- a/web/gui2/src/main/webapp/app/view/group/group-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { GroupComponent } from './group/group.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: GroupComponent
-  }
-];
-
-/**
- * ONOS GUI -- Groups Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class GroupRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/group/group.module.ts b/web/gui2/src/main/webapp/app/view/group/group.module.ts
index ad876ee..9ffee40 100644
--- a/web/gui2/src/main/webapp/app/view/group/group.module.ts
+++ b/web/gui2/src/main/webapp/app/view/group/group.module.ts
@@ -13,24 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { GroupRoutingModule } from './group-routing.module';
-import { GroupComponent } from './group/group.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GroupComponent} from './group/group.component';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    GroupRoutingModule,
-    Gui2FwLibModule,
-    FormsModule,
-    RouterModule
-  ],
-  declarations: [GroupComponent],
-  exports: [GroupComponent]
+    imports: [
+        CommonModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: GroupComponent}]),
+        Gui2FwLibModule,
+        FormsModule,
+        RouterModule
+    ],
+    declarations: [GroupComponent],
+    exports: [GroupComponent]
 })
-export class GroupModule { }
+export class GroupModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/group/group/group.component.ts b/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
index 0d2efc5..fbb58ba 100644
--- a/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
+++ b/web/gui2/src/main/webapp/app/view/group/group/group.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -47,7 +47,7 @@
 @Component({
     selector: 'onos-group',
     templateUrl: './group.component.html',
-    styleUrls: ['./group.component.css', './group.theme.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./group.component.css', './group.theme.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class GroupComponent extends TableBaseImpl implements OnInit, OnDestroy {
     id: string;
diff --git a/web/gui2/src/main/webapp/app/view/host/BUILD.bazel b/web/gui2/src/main/webapp/app/view/host/BUILD.bazel
new file mode 100644
index 0000000..78f486f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/host/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-host",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-host",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/host/host-routing.module.ts b/web/gui2/src/main/webapp/app/view/host/host-routing.module.ts
deleted file mode 100644
index 01cdd8f..0000000
--- a/web/gui2/src/main/webapp/app/view/host/host-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
-* Copyright 2018-present Open Networking Foundation
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HostComponent } from './host/host.component';
-
-const hostRoutes: Routes = [
-    {
-        path: '',
-        component: HostComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(hostRoutes)],
-    exports: [RouterModule]
-})
-export class HostRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/host/host.module.ts b/web/gui2/src/main/webapp/app/view/host/host.module.ts
index 2bb8321..1873fce 100644
--- a/web/gui2/src/main/webapp/app/view/host/host.module.ts
+++ b/web/gui2/src/main/webapp/app/view/host/host.module.ts
@@ -16,15 +16,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { HostRoutingModule } from './host-routing.module';
 import { HostComponent } from './host/host.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { HostDetailsComponent } from './hostdetails/hostdetails.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
-        HostRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: HostComponent}]),
         Gui2FwLibModule
     ],
     declarations: [HostComponent, HostDetailsComponent]
diff --git a/web/gui2/src/main/webapp/app/view/host/host/host.component.ts b/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
index bf692a2..22c0e58 100644
--- a/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
+++ b/web/gui2/src/main/webapp/app/view/host/host/host.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 interface HostTableResponse extends TableResponse {
     hosts: Host[];
@@ -43,7 +43,7 @@
     selector: 'onos-host',
     templateUrl: './host.component.html',
     styleUrls: ['./host.component.css',
-        '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+        '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class HostComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts b/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
index 5e70270..50af4f6 100644
--- a/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/host/hostdetails/hostdetails.component.ts
@@ -21,7 +21,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * The details view when a host row is clicked from the Host view
@@ -39,7 +39,7 @@
     selector: 'onos-hostdetails',
     templateUrl: './hostdetails.component.html',
     styleUrls: ['./hostdetails.component.css',
-        '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'
+        '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'
     ],
     animations: [
         trigger('hostDetailsState', [
diff --git a/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel b/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel
new file mode 100644
index 0000000..81739e5
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/intent/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-intent",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-intent",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent-routing.module.ts b/web/gui2/src/main/webapp/app/view/intent/intent-routing.module.ts
deleted file mode 100644
index 22407ff..0000000
--- a/web/gui2/src/main/webapp/app/view/intent/intent-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { IntentComponent } from './intent/intent.component';
-
-const intentRoutes: Routes = [
-    {
-        path: '',
-        component: IntentComponent
-    }
-];
-
-/**
- * ONOS GUI -- Intents Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(intentRoutes)],
-    exports: [RouterModule]
-})
-export class IntentRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent.module.ts b/web/gui2/src/main/webapp/app/view/intent/intent.module.ts
index d935e08..49869ee 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent.module.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent.module.ts
@@ -16,9 +16,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { IntentRoutingModule } from './intent-routing.module';
 import { IntentComponent } from './intent/intent.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
@@ -26,7 +25,7 @@
         CommonModule,
         Gui2FwLibModule,
         RouterModule,
-        IntentRoutingModule,
+        RouterModule.forChild([{path: '', component: IntentComponent}]),
     ],
     declarations: [IntentComponent],
     exports: [IntentComponent]
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
index 6bd490e..0e9fc449 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 const RESUBMITINTENT = 'resubmitIntent';
 const REMOVEINTENT = 'removeIntent';
@@ -62,7 +62,7 @@
 @Component({
     selector: 'onos-intent',
     templateUrl: './intent.component.html',
-    styleUrls: ['./intent.component.css', './intent-theme.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./intent.component.css', './intent-theme.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class IntentComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/link/BUILD.bazel b/web/gui2/src/main/webapp/app/view/link/BUILD.bazel
new file mode 100644
index 0000000..5625ec4
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/link/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-link",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-link",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/link/link-routing.module.ts b/web/gui2/src/main/webapp/app/view/link/link-routing.module.ts
deleted file mode 100644
index a2ff939..0000000
--- a/web/gui2/src/main/webapp/app/view/link/link-routing.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { LinkComponent } from './link/link.component';
-
-const linkRoutes: Routes = [
-    {
-        path: '',
-        component: LinkComponent
-    }
-];
-
-/**
- * ONOS GUI -- Links Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(linkRoutes)],
-    exports: [RouterModule]
-})
-export class LinkRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/link/link.module.ts b/web/gui2/src/main/webapp/app/view/link/link.module.ts
index 0cf2cc2..383e881 100644
--- a/web/gui2/src/main/webapp/app/view/link/link.module.ts
+++ b/web/gui2/src/main/webapp/app/view/link/link.module.ts
@@ -13,20 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LinkComponent } from './link/link.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { LinkRoutingModule } from './link-routing.module';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LinkComponent} from './link/link.component';
+import {Gui2FwLibModule} from '../../../../../../../gui2-fw-lib/public_api';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    LinkRoutingModule,
-    Gui2FwLibModule
-  ],
-  declarations: [
-    LinkComponent
-  ]
+    imports: [
+        CommonModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: LinkComponent}]),
+        Gui2FwLibModule
+    ],
+    declarations: [
+        LinkComponent
+    ]
 })
-export class LinkModule { }
+export class LinkModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/link/link/link.component.ts b/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
index fe3da34..d59ac18 100644
--- a/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
+++ b/web/gui2/src/main/webapp/app/view/link/link/link.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * Model of the response from WebSocket
@@ -46,7 +46,7 @@
 @Component({
     selector: 'onos-link',
     templateUrl: './link.component.html',
-    styleUrls: ['./link.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./link.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class LinkComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel b/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel
new file mode 100644
index 0000000..b4607f3
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/meter/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-meter",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-meter",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter-routing.module.ts b/web/gui2/src/main/webapp/app/view/meter/meter-routing.module.ts
deleted file mode 100644
index 83a432e..0000000
--- a/web/gui2/src/main/webapp/app/view/meter/meter-routing.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-* Copyright 2018-present Open Networking Foundation
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { MeterComponent } from './meter/meter.component';
-
-
-const meterRoutes: Routes = [
-    {
-        path: '',
-        component: MeterComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(meterRoutes)],
-    exports: [RouterModule]
-})
-export class MeterRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter.module.ts b/web/gui2/src/main/webapp/app/view/meter/meter.module.ts
index cd90d85..d5244c9 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter.module.ts
+++ b/web/gui2/src/main/webapp/app/view/meter/meter.module.ts
@@ -13,22 +13,22 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
-
-import { MeterRoutingModule } from './meter-routing.module';
-import { MeterComponent } from './meter/meter.component';
-
-import { FormsModule } from '@angular/forms';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Gui2FwLibModule} from '../../../../../../../gui2-fw-lib/public_api';
+import {MeterComponent} from './meter/meter.component';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    Gui2FwLibModule,
-    MeterRoutingModule,
-    FormsModule
-  ],
-  declarations: [MeterComponent]
+    imports: [
+        CommonModule,
+        Gui2FwLibModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: MeterComponent}]),
+        FormsModule
+    ],
+    declarations: [MeterComponent]
 })
-export class MeterModule { }
+export class MeterModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
index 914e062..62501bf 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -47,7 +47,7 @@
     selector: 'onos-meter',
     templateUrl: './meter.component.html',
     styleUrls: ['./meter.component.css', './meter.theme.css',
-        '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+        '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class MeterComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel b/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel
new file mode 100644
index 0000000..7c86a08
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/partition/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-partition",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-partition",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition-routing.module.ts b/web/gui2/src/main/webapp/app/view/partition/partition-routing.module.ts
deleted file mode 100644
index 8b5345c..0000000
--- a/web/gui2/src/main/webapp/app/view/partition/partition-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { PartitionComponent } from './partition/partition.component';
-
-const partitionRoutes: Routes = [
-    {
-        path: '',
-        component: PartitionComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(partitionRoutes)],
-    exports: [RouterModule]
-})
-export class PartitionRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition.module.ts b/web/gui2/src/main/webapp/app/view/partition/partition.module.ts
index 2e79afc..0f3c852 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition.module.ts
+++ b/web/gui2/src/main/webapp/app/view/partition/partition.module.ts
@@ -15,16 +15,17 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import {Gui2FwLibModule} from '../../../../../../../gui2-fw-lib/public_api';
 
-import { PartitionRoutingModule } from './partition-routing.module';
 import { PartitionComponent } from './partition/partition.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
         Gui2FwLibModule,
-        PartitionRoutingModule
+        RouterModule,
+        RouterModule.forChild([{path: '', component: PartitionComponent}]),
     ],
     declarations: [PartitionComponent]
 })
diff --git a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
index f8518a4..dd2a509 100644
--- a/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
+++ b/web/gui2/src/main/webapp/app/view/partition/partition/partition.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -28,7 +28,7 @@
 @Component({
     selector: 'onos-partition',
     templateUrl: './partition.component.html',
-    styleUrls: ['./partition.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./partition.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class PartitionComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel b/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel
new file mode 100644
index 0000000..ecd43ea
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-pipeconf",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-pipeconf",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
deleted file mode 100644
index b837eb8..0000000
--- a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2019-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {NgModule} from '@angular/core';
-import {PipeconfComponent} from './pipeconf/pipeconf.component';
-import {RouterModule, Routes} from '@angular/router';
-
-const pipeconfRoutes: Routes = [
-    {
-        path: '',
-        component: PipeconfComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(pipeconfRoutes)],
-    exports: [RouterModule]
-})
-export class PipeconfRoutingModule {
-}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
index 535fa0f..f2481f9 100644
--- a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
@@ -18,14 +18,15 @@
 import {CommonModule} from '@angular/common';
 import {PipeconfComponent} from './pipeconf/pipeconf.component';
 import {PipeconfDetailsComponent} from './pipeconfdetails/pipeconfdetails.component';
-import {Gui2FwLibModule} from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import {FormsModule} from '@angular/forms';
-import {PipeconfRoutingModule} from './pipeconf-routing.module';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
-        PipeconfRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: PipeconfComponent}]),
         Gui2FwLibModule,
         FormsModule
     ],
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
index 8a2c9e6..d5aa2d3 100644
--- a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
@@ -20,7 +20,7 @@
     LogService, SortDir,
     TableBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import {ActivatedRoute, Router} from '@angular/router';
 
 const pipeconfReq = 'pipeconfRequest';
@@ -88,7 +88,7 @@
 @Component({
     selector: 'onos-pipeconf',
     templateUrl: './pipeconf.component.html',
-    styleUrls: ['./pipeconf.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./pipeconf.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class PipeconfComponent extends TableBaseImpl implements OnInit, OnDestroy {
     devId: string;
@@ -142,7 +142,7 @@
             }]
         ]));
 
-        const p = Object.assign({}, this.sortParams, this.payloadParams);
+        const p = (<any>Object).assign({}, this.sortParams, this.payloadParams);
 
         // Allow it to sit in pending events
         if (this.wss.isConnected()) {
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
index 2fcb117..9057521 100644
--- a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
@@ -26,7 +26,7 @@
     FnService,
     IconService,
     LogService, WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import {PipeconfAction, PipeconfTable} from '../pipeconf/pipeconf.component';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
@@ -37,7 +37,7 @@
     selector: 'onos-pipeconfdetails',
     templateUrl: './pipeconfdetails.component.html',
     styleUrls: ['./pipeconfdetails.component.css',
-        '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'],
+        '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'],
     animations: [
         trigger('pipeconfDetailsState', [
             state('true', style({
diff --git a/web/gui2/src/main/webapp/app/view/port/BUILD.bazel b/web/gui2/src/main/webapp/app/view/port/BUILD.bazel
new file mode 100644
index 0000000..aa6c632
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/port/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-port",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-port",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/port/port-routing.module.ts b/web/gui2/src/main/webapp/app/view/port/port-routing.module.ts
deleted file mode 100644
index 6ba681d..0000000
--- a/web/gui2/src/main/webapp/app/view/port/port-routing.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { PortComponent } from './port/port.component';
-
-
-const portRoutes: Routes = [
-    {
-        path: '',
-        component: PortComponent
-    }
-];
-
-/**
- * ONOS GUI -- Devices Tabular View Feature Routing Module - allows it to be lazy loaded
- *
- * See https://angular.io/guide/lazy-loading-ngmodules
- */
-@NgModule({
-    imports: [RouterModule.forChild(portRoutes)],
-    exports: [RouterModule]
-})
-export class PortRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/port/port.module.ts b/web/gui2/src/main/webapp/app/view/port/port.module.ts
index 105312c..eab8095 100644
--- a/web/gui2/src/main/webapp/app/view/port/port.module.ts
+++ b/web/gui2/src/main/webapp/app/view/port/port.module.ts
@@ -16,16 +16,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PortComponent } from './port/port.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { FormsModule } from '@angular/forms';
-import { PortRoutingModule } from './port-routing.module';
 import { PortDetailsComponent } from './portdetails/portdetails.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
         Gui2FwLibModule,
-        PortRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: PortComponent}]),
         FormsModule
     ],
     declarations: [PortComponent, PortDetailsComponent]
diff --git a/web/gui2/src/main/webapp/app/view/port/port/port.component.ts b/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
index 1c66459..c850d2a 100644
--- a/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
+++ b/web/gui2/src/main/webapp/app/view/port/port/port.component.ts
@@ -20,7 +20,7 @@
     PrefsService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -61,7 +61,7 @@
 @Component({
     selector: 'onos-port',
     templateUrl: './port.component.html',
-    styleUrls: ['./port.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./port.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class PortComponent extends TableBaseImpl implements OnInit, OnDestroy {
     devId: string;
diff --git a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
index 76b628e..30d59f1 100644
--- a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.ts
@@ -21,7 +21,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * The details view when a port row is clicked from the Port view
@@ -38,7 +38,7 @@
 @Component({
     selector: 'onos-portdetails',
     templateUrl: './portdetails.component.html',
-    styleUrls: ['./portdetails.component.css', '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'],
+    styleUrls: ['./portdetails.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'],
     animations: [
         trigger('portDetailsState', [
             state('true', style({
diff --git a/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel b/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel
new file mode 100644
index 0000000..feb6ae6
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/processor/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-processor",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-processor",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor-routing.module.ts b/web/gui2/src/main/webapp/app/view/processor/processor-routing.module.ts
deleted file mode 100644
index 598e451..0000000
--- a/web/gui2/src/main/webapp/app/view/processor/processor-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProcessorComponent } from './processor/processor.component';
-
-const processorRoutes: Routes = [
-    {
-        path: '',
-        component: ProcessorComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(processorRoutes)],
-    exports: [RouterModule]
-})
-export class ProcessorRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor.module.ts b/web/gui2/src/main/webapp/app/view/processor/processor.module.ts
index 2cf5e42..e6d8a21 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor.module.ts
+++ b/web/gui2/src/main/webapp/app/view/processor/processor.module.ts
@@ -15,14 +15,15 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { ProcessorRoutingModule } from './processor-routing.module';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { ProcessorComponent } from './processor/processor.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
-        ProcessorRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: ProcessorComponent}]),
         Gui2FwLibModule
     ],
     declarations: [ProcessorComponent]
diff --git a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
index 6b0a9bc..5083dcd 100644
--- a/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
+++ b/web/gui2/src/main/webapp/app/view/processor/processor/processor.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     TableBaseImpl
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { ActivatedRoute } from '@angular/router';
 
 /**
@@ -28,7 +28,7 @@
 @Component({
     selector: 'onos-processor',
     templateUrl: './processor.component.html',
-    styleUrls: ['./processor.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./processor.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class ProcessorComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel b/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel
new file mode 100644
index 0000000..0802afe
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/settings/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-settings",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-settings",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings-routing.module.ts b/web/gui2/src/main/webapp/app/view/settings/settings-routing.module.ts
deleted file mode 100644
index 54e808b..0000000
--- a/web/gui2/src/main/webapp/app/view/settings/settings-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
-* Copyright 2018-present Open Networking Foundation
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { SettingsComponent } from './settings/settings.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: SettingsComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
-})
-export class SettingsRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings.module.ts b/web/gui2/src/main/webapp/app/view/settings/settings.module.ts
index 5b6505b..7e89942 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings.module.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settings.module.ts
@@ -16,15 +16,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { SettingsRoutingModule } from './settings-routing.module';
 import { SettingsComponent } from './settings/settings.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
 import { SettingsDetailsComponent } from './settingsdetails/settingsdetails.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
     imports: [
         CommonModule,
-        SettingsRoutingModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: SettingsComponent}]),
         Gui2FwLibModule
     ],
     declarations: [SettingsComponent, SettingsDetailsComponent]
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
index 65cae49..b22b349 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.html
@@ -48,7 +48,7 @@
         <div class="table-body">
             <table>
                 <tr *ngIf="tableData.length === 0" class="no-data">
-                    <td colspan="5">{{ annots.noRowMsg }}</td>
+                    <td colspan="5">{{ annots.noRowsMsg }}</td>
                 </tr>
                 <tr *ngFor="let setting of tableData" (click)="selectCallback($event, setting)" [ngClass]="{selected: setting.id === selId, 'data-change': isChanged(setting.id)}">
                     <td [ngStyle]="{width: '260px'}">{{setting.component}}</td>
diff --git a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
index b2444ad..67fd073 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settings/settings.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * Model of the data returned through the Web Socket about settings.
@@ -47,7 +47,7 @@
 @Component({
     selector: 'onos-settings',
     templateUrl: './settings.component.html',
-    styleUrls: ['./settings.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./settings.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 
 export class SettingsComponent extends TableBaseImpl implements OnInit, OnDestroy {
diff --git a/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts b/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
index 6497e5d..ba2ce78 100644
--- a/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
+++ b/web/gui2/src/main/webapp/app/view/settings/settingsdetails/settingsdetails.component.ts
@@ -19,7 +19,7 @@
     LogService,
     DetailsPanelBaseImpl,
     WebSocketService
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Settings } from '../settings/settings.component';
 
@@ -38,7 +38,7 @@
 @Component({
     selector: 'onos-settingsdetails',
     templateUrl: './settingsdetails.component.html',
-    styleUrls: ['./settingsdetails.component.css', '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'],
+    styleUrls: ['./settingsdetails.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel.css', '../../../../../../../../gui2-fw-lib/lib/widget/panel-theme.css'],
     animations: [
         trigger('settingsDetailsState', [
             state('true', style({
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel b/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel
new file mode 100644
index 0000000..b63d67d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/tunnel/BUILD.bazel
@@ -0,0 +1,46 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+
+ng_module(
+    name = "gui2-view-tunnel",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]),
+    module_name = "gui2-view-tunnel",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel-routing.module.ts b/web/gui2/src/main/webapp/app/view/tunnel/tunnel-routing.module.ts
deleted file mode 100644
index dbbee7f..0000000
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2018-present Open Networking Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { TunnelComponent } from './tunnel/tunnel.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: TunnelComponent
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class TunnelRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel.module.ts b/web/gui2/src/main/webapp/app/view/tunnel/tunnel.module.ts
index 0e2018b..0c50567 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel.module.ts
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel.module.ts
@@ -13,21 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
-import { TunnelRoutingModule } from './tunnel-routing.module';
-import { TunnelComponent } from './tunnel/tunnel.component';
-import { Gui2FwLibModule } from 'gui2-fw-lib';
+import {TunnelComponent} from './tunnel/tunnel.component';
+import { Gui2FwLibModule } from '../../../../../../../gui2-fw-lib/public_api';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    TunnelRoutingModule,
-    Gui2FwLibModule
-  ],
-  declarations: [
-    TunnelComponent
-  ]
+    imports: [
+        CommonModule,
+        RouterModule,
+        RouterModule.forChild([{path: '', component: TunnelComponent}]),
+        Gui2FwLibModule
+    ],
+    declarations: [
+        TunnelComponent
+    ]
 })
-export class TunnelModule { }
+export class TunnelModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
index 91eb7e6..6e5556d 100644
--- a/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
+++ b/web/gui2/src/main/webapp/app/view/tunnel/tunnel/tunnel.component.ts
@@ -19,7 +19,7 @@
     LogService,
     WebSocketService,
     SortDir, TableBaseImpl, TableResponse
-} from 'gui2-fw-lib';
+} from '../../../../../../../../gui2-fw-lib/public_api';
 
 /**
  * Model of the response from WebSocket
@@ -48,7 +48,7 @@
 @Component({
     selector: 'onos-tunnel',
     templateUrl: './tunnel.component.html',
-    styleUrls: ['./tunnel.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+    styleUrls: ['./tunnel.component.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.css', '../../../../../../../../gui2-fw-lib/lib/widget/table.theme.css']
 })
 export class TunnelComponent extends TableBaseImpl implements OnInit, OnDestroy {
 
diff --git a/web/gui2/src/main/webapp/index.html b/web/gui2/src/main/webapp/index.html
index d71afe9..aeff5fc 100644
--- a/web/gui2/src/main/webapp/index.html
+++ b/web/gui2/src/main/webapp/index.html
@@ -23,41 +23,18 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="onos.global.css">
 
-    <base href="/">
+    <base href="/onos/ui/">
     <title>ONOS</title>
 
     <!-- {INJECTED-USER-START} -->
     <!-- {INJECTED-USER-END} -->
 
-    <!-- ONOS UI Framework included here -->
-    <!--<script src="onos.js"></script>-->
-    <!--<script src="dist/onos.js"></script>-->
-
-    <!-- Framework and library stylesheets included here -->
-    <!--<link rel="stylesheet" href="dist/onos.css">-->
-
-    <!-- Contributed javascript injected here -->
-    <!-- {INJECTED-JAVASCRIPT-START} -->
-    <!-- {INJECTED-JAVASCRIPT-END} -->
-
-    <!-- Contributed stylesheets injected here -->
-    <!-- {INJECTED-STYLESHEETS-START} -->
-    <!-- {INJECTED-STYLESHEETS-END} -->
-
 </head>
 <body class="light">
     <onos-root></onos-root>
-
-<!--<script>-->
-    <!--&lt;!&ndash; Inject user agent info into html element to allow CSS sensitivity. &ndash;&gt;-->
-    <!--(function () {-->
-        <!--var t = ('ontouchstart' in window) || ('onmsgesturechange' in window);-->
-        <!--d3.select(document.documentElement)-->
-            <!--.attr('data-useragent', navigator.userAgent)-->
-            <!--.attr('data-platform', navigator.platform)-->
-            <!--.classed('touch', t);-->
-    <!--}());-->
-<!--</script>-->
+    <script type="module" src="bundle-es2015.min/index.js"></script>
+    <script src="npm/node_modules/zone.js/dist/zone.min.js"></script>
 </body>
 </html>
diff --git a/web/gui2/src/main/webapp/onos.prod.ts b/web/gui2/src/main/webapp/onos.prod.ts
new file mode 100644
index 0000000..5abb8e4
--- /dev/null
+++ b/web/gui2/src/main/webapp/onos.prod.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Used to launch the application under Bazel production mode.
+ */
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {OnosModule} from './app/onos.module';
+
+enableProdMode();
+platformBrowser().bootstrapModule(OnosModule);
diff --git a/web/gui2/src/main/webapp/onos.ts b/web/gui2/src/main/webapp/onos.ts
index cf76512..a9465b6 100644
--- a/web/gui2/src/main/webapp/onos.ts
+++ b/web/gui2/src/main/webapp/onos.ts
@@ -1,12 +1,29 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-import { OnosModule } from './app/onos.module';
-import { environment } from './environments/environment';
+/**
+ * This main entry point is used to launch the app under the
+ * @angular-devkit/build-angular, which is the default CLI
+ * builder. Note that for AOT, the CLI will magically replace
+ * the bootstrap by switching platform-browser-dynamic with
+ * platform-browser.
+ * This file is completely unused in the Bazel build.
+ */
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-if (environment.production) {
-  enableProdMode();
-}
+import {OnosModule} from './app/onos.module';
 
-platformBrowserDynamic().bootstrapModule(OnosModule)
-  .catch(err => console.log(err));
+platformBrowserDynamic().bootstrapModule(OnosModule).catch(err => console.log(err));
diff --git a/web/gui2/src/main/webapp/rollup.config.js b/web/gui2/src/main/webapp/rollup.config.js
new file mode 100644
index 0000000..6f6d372
--- /dev/null
+++ b/web/gui2/src/main/webapp/rollup.config.js
@@ -0,0 +1,11 @@
+const node = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+
+module.exports = {
+  plugins: [
+    node({
+      mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
+    }),
+    commonjs(),
+  ],
+};
diff --git a/web/gui2/src/main/webapp/test.ts b/web/gui2/src/main/webapp/test.ts
new file mode 100644
index 0000000..38acf1e
--- /dev/null
+++ b/web/gui2/src/main/webapp/test.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/web/gui2/src/main/webapp/tsconfig.app.json b/web/gui2/src/main/webapp/tsconfig.app.json
deleted file mode 100644
index d470edb..0000000
--- a/web/gui2/src/main/webapp/tsconfig.app.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "module": "es2015",
-    "types": []
-  },
-  "exclude": [
-    "tests/test.ts",
-    "**/*.spec.ts"
-  ]
-}
diff --git a/web/gui2/src/main/webapp/tsconfig.spec.json b/web/gui2/src/main/webapp/tsconfig.spec.json
deleted file mode 100644
index 670b8aa..0000000
--- a/web/gui2/src/main/webapp/tsconfig.spec.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
-    "module": "commonjs",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "app/test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
diff --git a/web/gui2/src/main/webapp/typings.d.ts b/web/gui2/src/main/webapp/typings.d.ts
deleted file mode 100644
index ef5c7bd..0000000
--- a/web/gui2/src/main/webapp/typings.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/* SystemJS module definition */
-declare var module: NodeModule;
-interface NodeModule {
-  id: string;
-}