diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index 0a6add1fed8..58e2129320d 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -1,5 +1 @@
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
-
-module.exports = on => {
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
-};
+module.exports = (on) => {};
diff --git a/projects/shell-chrome/BUILD.bazel b/projects/shell-chrome/BUILD.bazel
new file mode 100644
index 00000000000..8fde2b695ba
--- /dev/null
+++ b/projects/shell-chrome/BUILD.bazel
@@ -0,0 +1,9 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_config(
+    name = "tsconfig-app",
+    src = "tsconfig.app.json",
+    deps = ["//:tsconfig.json"],
+)
diff --git a/projects/shell-chrome/src/BUILD.bazel b/projects/shell-chrome/src/BUILD.bazel
new file mode 100644
index 00000000000..83e102cb816
--- /dev/null
+++ b/projects/shell-chrome/src/BUILD.bazel
@@ -0,0 +1,123 @@
+load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
+load("@npm//@bazel/terser:index.bzl", "terser_minified")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
+load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
+load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+sass_library(
+    name = "material-theming",
+    srcs = ["@npm//:node_modules/@angular/material/_index.scss"]
+)
+
+sass_binary(
+    name = "shell-chrome-styles",
+    src = "styles.scss",
+    deps = [":material-theming"],
+    sourcemap = False,
+)
+
+ts_library(
+    name = "devtools",
+    srcs = [
+        "devtools.ts"
+    ],
+    deps = [
+        "@npm//@types/chrome",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ng_ts_library(
+    name = "src",
+    srcs = [
+      "main.ts",
+      "polyfills.ts"
+    ],
+    deps = [
+      "//projects/shell-chrome/src/app",
+      "//projects/shell-chrome/src/environments:environment",
+      "//projects/ng-devtools",
+      "@npm//@angular/core",
+      "@npm//@angular/platform-browser-dynamic",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+    module_name = "shell-chrome",
+)
+
+
+rollup_bundle(
+    name = "devtools-app-bundle-es2015",
+    config_file = "rollup.config.js",
+    entry_point = "main.ts",
+    output_dir = True,
+    deps = [
+        ":src",
+        "@npm//@rollup/plugin-commonjs",
+        "@npm//@rollup/plugin-node-resolve",
+    ],
+)
+
+terser_minified(
+    name = "devtools-app-bundle-es2015.min",
+    src = ":devtools-app-bundle-es2015",
+)
+
+# Files that we serve in both development and production
+_ASSETS = [
+    # This label references an output of the "styles" sass_binary above.
+    ":shell-chrome-styles",
+
+    ":manifest.json",
+
+    # 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",
+]
+
+html_insert_assets(
+    name = "inject_scripts_for_prod",
+    outs = ["index.html"],
+    args = [
+        "--html=$(execpath //projects/shell-chrome/src:_index.html)",
+        "--out=$@",
+        "--roots=. $(RULEDIR)",
+        "--assets",
+    ] + ["$(execpath %s)" % s for s in _ASSETS],
+    data = ["//projects/shell-chrome/src:_index.html"] + _ASSETS,
+)
+
+rollup_bundle(
+    name = "devtools-es2015",
+    entry_point = "devtools.ts",
+    format = "iife",
+    deps = [
+        ":devtools",
+    ]
+)
+
+pkg_web(
+    name = "prodapp",
+    srcs = _ASSETS + [
+        ":devtools-es2015",
+        "//projects/shell-chrome/src/app:ng-validate-es2015",
+        "//projects/shell-chrome/src/app:background-es2015",
+        "//projects/shell-chrome/src/app:backend-es2015",
+        "//projects/shell-chrome/src/app:content-script-es2015",
+        ":devtools-app-bundle-es2015",
+        ":inject_scripts_for_prod",
+        "//projects/shell-chrome/src/assets",
+        "//projects/shell-chrome/src/popups",
+        "//projects/shell-chrome/src:devtools.html",
+        "//projects/ng-devtools/src/lib/images",
+    ],
+    additional_root_paths = [
+        "projects/ng-devtools/src/lib",
+    ],
+)
\ No newline at end of file
diff --git a/projects/shell-chrome/src/index.html b/projects/shell-chrome/src/_index.html
similarity index 80%
rename from projects/shell-chrome/src/index.html
rename to projects/shell-chrome/src/_index.html
index 961767aef51..b0a8bdc039f 100644
--- a/projects/shell-chrome/src/index.html
+++ b/projects/shell-chrome/src/_index.html
@@ -10,5 +10,7 @@
   </head>
   <body>
     <app-root></app-root>
+
+    <script type="module" src="./devtools-app-bundle-es2015/devtools-app-bundle-es2015.js"></script>
   </body>
 </html>
diff --git a/projects/shell-chrome/src/app/BUILD.bazel b/projects/shell-chrome/src/app/BUILD.bazel
new file mode 100644
index 00000000000..e5805329f22
--- /dev/null
+++ b/projects/shell-chrome/src/app/BUILD.bazel
@@ -0,0 +1,196 @@
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
+load("@npm//@bazel/terser:index.bzl", "terser_minified")
+
+package(default_visibility = ["//visibility:public"])
+
+sass_binary(
+    name = "app-component-styles",
+    src = "app.component.scss",
+)
+
+ng_ts_library(
+    name = "app",
+    srcs = [
+        "app.component.ts",
+        "app.module.ts",
+        "inject.ts",        
+    ],
+    angular_assets = [
+        "app.component.html",
+        ":app-component-styles"
+    ],
+    deps = [
+        ":zone-aware-chrome-message-bus",
+        "//projects/shell-chrome/src/app:background",
+        "//projects/shell-chrome/src/app:backend",
+        ":chrome-application-environment",
+        ":chrome-application-operations",
+        "//projects/protocol",
+        "//projects/ng-devtools-backend",
+        "//projects/ng-devtools-backend/src/lib:highlighter",
+        "//projects/ng-devtools-backend/src/lib:component-tree",
+        "//projects/ng-devtools",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "ng-validate",
+    srcs = [
+        "ng-validate.ts"
+    ],
+    deps = [
+        "@npm//@types/chrome"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "chrome-window-extensions",
+    srcs = [
+        "chrome-window-extensions.ts"
+    ],
+    deps = [
+        "//projects/ng-devtools-backend",
+        "//projects/ng-devtools-backend/src/lib:component-tree"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "chrome-application-environment",
+    srcs = [
+        "chrome-application-environment.ts"
+    ],
+    deps = [
+        "//projects/shell-chrome/src/environments:environment",
+        "//projects/ng-devtools"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "chrome-application-operations",
+    srcs = [
+        "chrome-application-operations.ts"
+    ],
+    deps = [
+        "//projects/protocol",
+        "//projects/ng-devtools",
+        "@npm//@types/chrome"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "same-page-message-bus",
+    srcs = [
+        "same-page-message-bus.ts",
+    ],
+    deps = [
+        "//projects/protocol",
+        "@npm//@angular/core"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "zone-aware-chrome-message-bus",
+    srcs = [
+        "zone-aware-chrome-message-bus.ts",
+    ],
+    deps = [
+        ":chrome-message-bus",
+        "//projects/protocol",
+        "@npm//@angular/core",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "chrome-message-bus",
+    srcs = [
+        "chrome-message-bus.ts"
+    ],
+    deps = [
+        "//projects/protocol",
+        "@npm//@angular/core"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "background",
+    srcs = [
+        "background.ts"
+    ],
+    deps = ["//projects/shell-chrome/src/app:ng-validate"],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "backend",
+    srcs = [
+        "backend.ts"
+    ],
+    deps = [
+        ":same-page-message-bus",
+        "//projects/shell-chrome/src/app:chrome-window-extensions",
+        "//projects/ng-devtools-backend",
+        "//projects/ng-devtools-backend/src/lib:highlighter"
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+ts_library(
+    name = "content-script",
+    srcs = [
+        "content-script.ts"
+    ],
+    deps = [
+        "@npm//@types/chrome",
+        ":chrome-message-bus",
+        ":same-page-message-bus",
+         "//projects/protocol",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
+
+rollup_bundle(
+    name = "backend" + "-es2015",
+    entry_point = "backend" + '.ts',
+    config_file = "//projects/shell-chrome/src:rollup.config.js",
+    format = 'iife',
+    deps = [
+        ":" + "backend",
+        "@npm//@rollup/plugin-commonjs",
+        "@npm//@rollup/plugin-node-resolve",
+    ],
+)
+
+[
+    rollup_bundle(
+        name = file_name + "-es2015",
+        args = [
+            "--name", file_name + '-out'
+        ],
+        entry_point = file_name + '.ts',
+        config_file = "//projects/shell-chrome/src:rollup.config.js",
+        format = format,
+        deps = [
+            ":" + file_name,
+            "@npm//@rollup/plugin-commonjs",
+            "@npm//@rollup/plugin-node-resolve",
+        ],
+    )
+    for file_name, format in [
+        ("ng-validate", 'umd'),
+        ("background", "umd"),
+        ("content-script", "umd")
+    ]
+]
\ No newline at end of file
diff --git a/projects/shell-chrome/src/app/app.component.ts b/projects/shell-chrome/src/app/app.component.ts
index b11beb858f8..ad89e645994 100644
--- a/projects/shell-chrome/src/app/app.component.ts
+++ b/projects/shell-chrome/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
-import { injectScripts } from '../inject';
+import { injectScripts } from './inject';
 import { PriorityAwareMessageBus, MessageBus, Events } from 'protocol';
 import { ZoneAwareChromeMessageBus } from './zone-aware-chrome-message-bus';
 
@@ -27,7 +27,8 @@ export class AppComponent implements OnInit {
     chrome.devtools.network.onNavigated.addListener(() => {
       window.location.reload();
     });
-    injectScripts(['backend.js', 'runtime.js']);
+
+    injectScripts(['app/backend-es2015.js']);
     this._cd.detectChanges();
   }
 }
diff --git a/projects/shell-chrome/src/app/background.ts b/projects/shell-chrome/src/app/background.ts
index bfcf9eb4afe..cfcb43781d2 100644
--- a/projects/shell-chrome/src/app/background.ts
+++ b/projects/shell-chrome/src/app/background.ts
@@ -73,9 +73,9 @@ const installContentScript = (tabId: number) => {
   console.log('Installing the content-script');
   // We first inject the content-script and after that
   // invoke the global that it exposes.
-  chrome.tabs.executeScript(tabId, { file: '/content-script.js' }, (result) => {
+  chrome.tabs.executeScript(tabId, { file: 'app/content-script-es2015.js' }, (result) => {
     chrome.tabs.executeScript(tabId, {
-      code: '___devToolsContentScript.main()',
+      code: 'globalThis["content-script-out"].main()',
     });
   });
 };
diff --git a/projects/shell-chrome/src/inject.ts b/projects/shell-chrome/src/app/inject.ts
similarity index 100%
rename from projects/shell-chrome/src/inject.ts
rename to projects/shell-chrome/src/app/inject.ts
diff --git a/projects/shell-chrome/src/assets/BUILD.bazel b/projects/shell-chrome/src/assets/BUILD.bazel
new file mode 100644
index 00000000000..13f47ebfbea
--- /dev/null
+++ b/projects/shell-chrome/src/assets/BUILD.bazel
@@ -0,0 +1,10 @@
+package(default_visibility = ["//:__subpackages__"])
+
+filegroup(
+    name = "assets",
+    srcs = glob([
+        "*.svg",
+        "**/*.png",
+        "*.css",
+    ]),
+)
diff --git a/projects/shell-chrome/src/devtools.html b/projects/shell-chrome/src/devtools.html
index e7026778b62..a4ab5c5223e 100644
--- a/projects/shell-chrome/src/devtools.html
+++ b/projects/shell-chrome/src/devtools.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-</head>
-<body>
-  <script src="devtools.js"></script>
-  <script src="runtime.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  </head>
+  <body>
+    <script src="devtools-es2015.js"></script>
+  </body>
 </html>
diff --git a/projects/shell-chrome/src/environments/BUILD.bazel b/projects/shell-chrome/src/environments/BUILD.bazel
new file mode 100644
index 00000000000..c0f62762ca6
--- /dev/null
+++ b/projects/shell-chrome/src/environments/BUILD.bazel
@@ -0,0 +1,15 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library", "ts_config")
+
+package(default_visibility = ["//visibility:public"])
+
+
+ts_library(
+    name = "environment",
+    srcs = [
+      "environment.ts",
+    ],
+    deps = [
+      "//projects/ng-devtools",
+    ],
+    tsconfig = "//projects/shell-chrome:tsconfig-app",
+)
\ No newline at end of file
diff --git a/projects/shell-chrome/src/environments/environment.prod.ts b/projects/shell-chrome/src/environments/environment.prod.ts
index 5f28e98ec91..de2abcf7a7b 100644
--- a/projects/shell-chrome/src/environments/environment.prod.ts
+++ b/projects/shell-chrome/src/environments/environment.prod.ts
@@ -1,12 +1,9 @@
-import { Process } from 'ng-devtools';
-
-declare let process: Process;
-
 export const environment = {
   production: true,
   process: {
     env: {
-      LATEST_SHA: process.env.LATEST_SHA,
+      // todo(aleksanderbodurri): when devtools is merged into the main angular repo, use stamping tooling to inject the latest SHA into the environment
+      LATEST_SHA: '',
     },
   },
 };
diff --git a/projects/shell-chrome/src/environments/environment.ts b/projects/shell-chrome/src/environments/environment.ts
index 801f65c4eec..fdd31c6ef8c 100644
--- a/projects/shell-chrome/src/environments/environment.ts
+++ b/projects/shell-chrome/src/environments/environment.ts
@@ -1,25 +1,10 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-import { Process } from 'ng-devtools';
-
-declare let process: Process;
-
 export const environment = {
   production: false,
   process: {
     env: {
-      LATEST_SHA: process.env.LATEST_SHA,
+      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
+      // use stamping tooling to inject the latest SHA into the environment
+      LATEST_SHA: '',
     },
   },
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/projects/shell-chrome/src/manifest.json b/projects/shell-chrome/src/manifest.json
index d44cb39e6e7..631aca812c3 100644
--- a/projects/shell-chrome/src/manifest.json
+++ b/projects/shell-chrome/src/manifest.json
@@ -16,21 +16,16 @@
     "default_popup": "popups/not-angular.html"
   },
   "devtools_page": "devtools.html",
-  "web_accessible_resources": ["backend.js", "runtime.js", "devtools.html"],
+  "web_accessible_resources": ["app/backend-es2015.js", "devtools.html"],
   "background": {
-    "scripts": ["background.js", "runtime.js"],
+    "scripts": ["app/background-es2015.js"],
     "persistent": false
   },
   "permissions": ["activeTab", "http://*/*", "https://*/*", "file:///*"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["runtime.js"],
-      "run_at": "document_start"
-    },
-    {
-      "matches": ["<all_urls>"],
-      "js": ["ng-validate.js"],
+      "js": ["app/ng-validate-es2015.js"],
       "run_at": "document_idle"
     }
   ]
diff --git a/projects/shell-chrome/src/popups/BUILD.bazel b/projects/shell-chrome/src/popups/BUILD.bazel
new file mode 100644
index 00000000000..9ea46d3e4ce
--- /dev/null
+++ b/projects/shell-chrome/src/popups/BUILD.bazel
@@ -0,0 +1,6 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "popups",
+    srcs = glob(["*.html"])
+)
\ No newline at end of file
diff --git a/projects/shell-chrome/src/rollup.config.js b/projects/shell-chrome/src/rollup.config.js
new file mode 100644
index 00000000000..87158723b33
--- /dev/null
+++ b/projects/shell-chrome/src/rollup.config.js
@@ -0,0 +1,11 @@
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+
+module.exports = {
+  plugins: [
+    nodeResolve({
+      mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
+    }),
+    commonjs(),
+  ],
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index ed2b6f46140..3a47b85acfd 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,8 @@ export const environment = {
   production: false,
   process: {
     env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo, use stamping tooling to inject the latest SHA into the environment
+      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
+      // use stamping tooling to inject the latest SHA into the environment
       LATEST_SHA: '',
     },
   },
diff --git a/tslint.json b/tslint.json
index cb7e739a9e4..22709a26fd7 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,8 @@
 {
   "extends": "tslint:recommended",
+  "linterOptions": {
+    "exclude": ["projects/ng-devtools/src/lib/vendor/**"]
+  },
   "rules": {
     "array-type": false,
     "arrow-parens": false,