diff --git a/tensorboard/BUILD b/tensorboard/BUILD
index e55acd059e..e179053645 100644
--- a/tensorboard/BUILD
+++ b/tensorboard/BUILD
@@ -354,25 +354,7 @@ tf_web_library(
 
 tensorboard_zip_file(
     name = "dev_webfiles",
-    deps = [":dev_assets"],
-)
-
-# Should keep the asset dependencies in sync with :assets.
-tf_web_library(
-    name = "dev_assets",
-    srcs = [
-        "//tensorboard/webapp:index.html",
-        "//tensorboard/webapp:index.js",
-        "//tensorboard/webapp:svg_bundle",
-        "//tensorboard/webapp/widgets/line_chart_v2/lib/worker:chart_worker.js",
-    ],
-    path = "/",
-    suppress = ["strictDependencies"],
-    deps = [
-        "//tensorboard/webapp/widgets/source_code/monaco:monaco_editor",
-        "//tensorboard/webapp/widgets/source_code/monaco:monaco_languages",
-        "@com_google_fonts_roboto",
-    ],
+    deps = ["//tensorboard/webapp/dev_assets"],
 )
 
 # This is a dummy rule used as a numpy dependency in open-source.
diff --git a/tensorboard/webapp/dev_assets/BUILD b/tensorboard/webapp/dev_assets/BUILD
new file mode 100644
index 0000000000..81057579b0
--- /dev/null
+++ b/tensorboard/webapp/dev_assets/BUILD
@@ -0,0 +1,78 @@
+# Build targets for building development webapp assets.
+#
+# This largely duplicates asset related targets in //tensorboard/webapp.
+# Because we had to create `index.html` to be zippped by the
+# tensorboard_zip_file which ends up having the same target name as
+# //tensorboard/webapp:index.html, we had to create the dev_assets version in
+# a different package. Once we can get rid of zip asset provider and a way to
+# alias asset, we would not need the enitrely different Bazel package.
+load("//tensorboard/defs:defs.bzl", "tf_js_binary", "tf_ng_module")
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+package(default_visibility = ["//tensorboard:__pkg__"])
+
+licenses(["notice"])
+
+tf_ng_module(
+    name = "ng_main",
+    srcs = [
+        "main_dev.ts",
+    ],
+    deps = [
+        "//tensorboard/webapp:ng_main",
+        "@npm//@angular/localize",
+    ],
+)
+
+tf_js_binary(
+    name = "tb_webapp_binary",
+    compile = 1,
+    entry_point = "main_dev.ts",
+    deps = [
+        ":ng_main",
+        "//tensorboard/webapp/angular:expect_angular_material_tabs",
+        "//tensorboard/webapp/angular:expect_angular_material_toolbar",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//@ngrx/store",
+        "@npm//rxjs",
+        "@npm//zone.js",
+    ],
+)
+
+tf_web_library(
+    name = "tb_webapp",
+    srcs = [
+        ":tb_webapp_binary.js",
+    ],
+    path = "/tb-webapp",
+)
+
+genrule(
+    name = "rename_index_html",
+    srcs = ["//tensorboard/webapp:index_polymer3.inlined.html"],
+    outs = ["index.html"],
+    cmd = "cat $(SRCS) > $@",
+)
+
+# Should keep the asset dependencies in sync with //tensorboard:assets.
+tf_web_library(
+    name = "dev_assets",
+    srcs = [
+        ":index.html",
+        "//tensorboard/components:polymer3_lib_binary.js",
+        "//tensorboard/webapp:styles.css",
+        "//tensorboard/webapp:svg_bundle",
+        "//tensorboard/webapp/widgets/line_chart_v2/lib/worker:chart_worker.js",
+    ],
+    path = "/",
+    deps = [
+        ":tb_webapp",
+        "//tensorboard/components/tf_imports:roboto",
+        "//tensorboard/webapp/widgets/source_code/monaco:monaco_editor",
+        "//tensorboard/webapp/widgets/source_code/monaco:monaco_languages",
+        "//tensorboard/webapp/widgets/source_code/monaco:requirejs",
+        "@com_google_fonts_roboto",
+    ],
+)
diff --git a/tensorboard/webapp/main.ts b/tensorboard/webapp/dev_assets/main_dev.ts
similarity index 92%
rename from tensorboard/webapp/main.ts
rename to tensorboard/webapp/dev_assets/main_dev.ts
index a193a633e3..5ecf529155 100644
--- a/tensorboard/webapp/main.ts
+++ b/tensorboard/webapp/dev_assets/main_dev.ts
@@ -12,4 +12,6 @@ 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 './bootstrap';
+import '@angular/localize/init';
+
+import '../bootstrap';