diff --git a/web/gui2-fw-lib/src/app/app.component.ts b/web/gui2-fw-lib/src/app/app.component.ts
index 34d2728..e60fc6d 100644
--- a/web/gui2-fw-lib/src/app/app.component.ts
+++ b/web/gui2-fw-lib/src/app/app.component.ts
@@ -15,7 +15,7 @@
  */
 
 import {Component} from '@angular/core';
-import {FnService, KeysService, LogService, LionService, WebSocketService, WsOptions} from 'gui2-fw-lib';
+import {FnService, KeysService, LogService, LionService, WebSocketService, WsOptions} from '../../projects/gui2-fw-lib/src/public_api';
 
 @Component({
   selector: 'app-root',
diff --git a/web/gui2-fw-lib/src/app/app.module.ts b/web/gui2-fw-lib/src/app/app.module.ts
index dab7c37..0cdd9fe 100644
--- a/web/gui2-fw-lib/src/app/app.module.ts
+++ b/web/gui2-fw-lib/src/app/app.module.ts
@@ -18,7 +18,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AppComponent } from './app.component';
-import { Gui2FwLibModule, ConsoleLoggerService, LogService } from 'gui2-fw-lib';
+import { Gui2FwLibModule, ConsoleLoggerService, LogService } from '../../projects/gui2-fw-lib/src/public_api';
 import {HttpClientModule} from '@angular/common/http';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
diff --git a/web/gui2-fw-lib/src/initialize_testbed.ts b/web/gui2-fw-lib/src/initialize_testbed.ts
new file mode 100644
index 0000000..25cca1d
--- /dev/null
+++ b/web/gui2-fw-lib/src/initialize_testbed.ts
@@ -0,0 +1,9 @@
+/**
+ * @fileoverview Provides a script to initialize TestBed before tests are run.
+ * This file should be included in the "runtime_deps" of a "ts_web_test_suite"
+ * rule.
+ */
+import {TestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+
+TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
diff --git a/web/gui2-fw-lib/src/main.dev.ts b/web/gui2-fw-lib/src/main.dev.ts
new file mode 100644
index 0000000..32bd701
--- /dev/null
+++ b/web/gui2-fw-lib/src/main.dev.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/web/gui2-fw-lib/src/main.prod.ts b/web/gui2-fw-lib/src/main.prod.ts
new file mode 100644
index 0000000..70fd120
--- /dev/null
+++ b/web/gui2-fw-lib/src/main.prod.ts
@@ -0,0 +1,6 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app/app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/web/gui2-fw-lib/src/noBUILD.bazel b/web/gui2-fw-lib/src/noBUILD.bazel
new file mode 100644
index 0000000..398c403
--- /dev/null
+++ b/web/gui2-fw-lib/src/noBUILD.bazel
@@ -0,0 +1,168 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_karma//:index.bzl", "ts_web_test_suite")
+load("@build_bazel_rules_nodejs//:defs.bzl", "history_server", "rollup_bundle")
+load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
+load("@io_bazel_rules_sass//:defs.bzl", "multi_sass_binary", "sass_binary")
+
+sass_binary(
+    name = "global_stylesheet",
+    src = glob([
+        "styles.css",
+        "styles.scss",
+    ])[0],
+    output_name = "global_stylesheet.css",
+)
+
+multi_sass_binary(
+    name = "styles",
+    srcs = glob(
+        include = ["**/*.scss"],
+        exclude = ["styles.scss"],
+    ),
+)
+
+ng_module(
+    name = "src",
+    srcs = glob(
+        include = ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "main.ts",
+            "test.ts",
+            "initialize_testbed.ts",
+        ],
+    ),
+    assets = glob([
+        "**/*.css",
+        "**/*.html",
+    ]) + ([":styles"] if len(glob(["**/*.scss"])) else []),
+    tsconfig = "tsconfig.app.json",
+    deps = [
+        "//web/gui2-fw-lib/projects/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
+
+rollup_bundle(
+    name = "bundle",
+    entry_point = ":main.prod.ts",
+    deps = [
+        "//src",
+        "@npm//@angular/router",
+        "@npm//rxjs",
+    ],
+)
+
+web_package(
+    name = "prodapp",
+    assets = [
+        # do not sort
+        "@npm//:node_modules/zone.js/dist/zone.min.js",
+        ":bundle.min.js",
+        ":global_stylesheet",
+    ],
+    data = [
+        "favicon.ico",
+    ],
+    index_html = "index.html",
+)
+
+history_server(
+    name = "prodserver",
+    data = [":prodapp"],
+    templated_args = ["src/prodapp"],
+)
+
+filegroup(
+    name = "rxjs_umd_modules",
+    srcs = [
+        # do not sort
+        "@npm//:node_modules/rxjs/bundles/rxjs.umd.js",
+        ":rxjs_shims.js",
+    ],
+)
+
+genrule(
+    name = "d3-copy",
+    srcs = ["@npm//:node_modules/d3/dist/d3.js"],
+    outs = ["d3.js"],
+    cmd = "cp $< $@",
+    output_to_bindir = 1,
+)
+
+ts_devserver(
+    name = "devserver",
+    data = [
+        "favicon.ico",
+    ],
+    entry_module = "org_onosproject_onos/web/gui2-fw-lib/src/main.dev",
+    index_html = "index.html",
+    port = 4200,
+    scripts = [
+        "@npm//:node_modules/tslib/tslib.js",
+        ":rxjs_umd_modules",
+    ],
+    serving_path = "/bundle.min.js",
+    static_files = [
+        "@npm//:node_modules/zone.js/dist/zone.min.js",
+        ":global_stylesheet",
+        ":d3-copy",
+    ],
+    deps = [":src"],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":src",
+        "@npm//@angular/core",
+        "@npm//@angular/router",
+        "@npm//@types",
+    ],
+)
+
+ts_library(
+    name = "initialize_testbed",
+    testonly = 1,
+    srcs = [
+        "initialize_testbed.ts",
+    ],
+    deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types",
+    ],
+)
+
+ts_web_test_suite(
+    name = "test",
+    srcs = [
+        "@npm//:node_modules/tslib/tslib.js",
+    ],
+    # do not sort
+    bootstrap = [
+        "@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
+        "@npm//:node_modules/reflect-metadata/Reflect.js",
+    ],
+    browsers = [
+        "@io_bazel_rules_webtesting//browsers:chromium-local",
+    ],
+    runtime_deps = [
+        ":initialize_testbed",
+    ],
+    deps = [
+        ":rxjs_umd_modules",
+        ":test_lib",
+        "@npm//karma-jasmine",
+    ],
+)
diff --git a/web/gui2-fw-lib/src/rxjs_shims.js b/web/gui2-fw-lib/src/rxjs_shims.js
new file mode 100644
index 0000000..a317127
--- /dev/null
+++ b/web/gui2-fw-lib/src/rxjs_shims.js
@@ -0,0 +1,32 @@
+/**
+ * @fileoverview Provides named UMD shims for `rxjs/operators` and `rxjs/testing`.
+ * This file should be included in the "scripts" of a "ts_devserver"
+ * rule and the "deps" of a "ts_web_test_suite" rule.
+ */
+// rxjs/operators
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports === 'object') {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    } else if (typeof define === 'function' && define.amd) {
+        define('rxjs/operators', ['exports', 'rxjs'], factory);
+    }
+})(function(exports, rxjs) {
+    'use strict';
+    Object.keys(rxjs.operators).forEach(function(key) { exports[key] = rxjs.operators[key]; });
+    Object.defineProperty(exports, '__esModule', {value: true});
+});
+
+// rxjs/testing
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports === 'object') {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    } else if (typeof define === 'function' && define.amd) {
+        define('rxjs/testing', ['exports', 'rxjs'], factory);
+    }
+})(function(exports, rxjs) {
+    'use strict';
+    Object.keys(rxjs.testing).forEach(function(key) { exports[key] = rxjs.testing[key]; });
+    Object.defineProperty(exports, '__esModule', {value: true});
+});