build: update @angular/bazel schematics to use html_insert_assets & pkg_web (#34112)

PR Close #34112

packages/bazel/src/builders/files/src/BUILD.bazel.template

@@ -1,9 +1,10 @@
 package(default_visibility = ["//visibility:public"])
 
+load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
+load("@npm//history-server:index.bzl", "history_server")
+load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
 load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
-load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
-load("@npm//history-server:index.bzl", "history_server")
 load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
 load("@npm_bazel_terser//:index.bzl", "terser_minified")
 load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
@@ -64,18 +65,38 @@ terser_minified(
     src = ":bundle",
 )
 
-web_package(
+html_insert_assets(
+    name = "inject_scripts",
+    outs = ["_/index.html"],
+    args = [
+        "--html",
+        "$(location :index.html)",
+        "--out",
+        "$@",
+        "--roots",
+        "$(RULEDIR)",
+        "--assets",
+        "$(location :global_stylesheet.css)",
+        "$(location @npm//:node_modules/zone.js/dist/zone.min.js)",
+        "bundle.min.js",
+    ],
+    data = [
+        ":index.html",
+        ":global_stylesheet.css",
+        "@npm//:node_modules/zone.js/dist/zone.min.js",
+    ],
+)
+
+pkg_web(
     name = "prodapp",
-    assets = [
-        # do not sort
+    additional_root_paths = ["src/_"],
+    srcs = [
         "@npm//:node_modules/zone.js/dist/zone.min.js",
         ":bundle.min",
         ":global_stylesheet",
-    ],
-    data = [
+        ":inject_scripts",
         "favicon.ico",
     ],
-    index_html = "index.html",
 )
 
 history_server(
@@ -95,6 +116,7 @@ filegroup(
 
 ts_devserver(
     name = "devserver",
+    additional_root_paths = ["src/_"],
     port = 4200,
     entry_module = "project/src/main.dev",
     serving_path = "/bundle.min.js",
@@ -105,11 +127,9 @@ ts_devserver(
     static_files = [
         "@npm//:node_modules/zone.js/dist/zone.min.js",
         ":global_stylesheet",
-    ],
-    data = [
+        ":inject_scripts",
         "favicon.ico",
     ],
-    index_html = "index.html",
     deps = [":src"],
 )
 
@@ -158,6 +178,5 @@ karma_web_test_suite(
     deps = [
         ":rxjs_umd_modules",
         ":test_lib",
-        "@npm//karma-jasmine",
     ],
 )

packages/bazel/src/schematics/ng-add/index.ts

@@ -39,17 +39,26 @@ function addDevDependenciesToPackageJson(options: Schema) {
     const devDependencies: [string, string][] = [
       ['@angular/bazel', angularCore.version],
       ['@bazel/bazel', '1.1.0'],
-      ['@bazel/ibazel', '^0.10.2'],
+      ['@bazel/ibazel', '0.10.3'],
       ['@bazel/karma', '0.42.1'],
       ['@bazel/protractor', '0.42.1'],
       ['@bazel/rollup', '0.42.1'],
       ['@bazel/terser', '0.42.1'],
       ['@bazel/typescript', '0.42.1'],
-      ['history-server', '^1.3.1'],
-      ['rollup', '^1.25.2'],
-      ['rollup-plugin-commonjs', '^10.1.0'],
-      ['rollup-plugin-node-resolve', '^5.2.0'],
-      ['terser', '^4.3.9'],
+      ['history-server', '1.3.1'],
+      ['html-insert-assets', '0.2.0'],
+      ['karma', '4.4.1'],
+      ['karma-chrome-launcher', '3.1.0'],
+      ['karma-firefox-launcher', '1.2.0'],
+      ['karma-jasmine', '2.0.1'],
+      ['karma-requirejs', '1.1.0'],
+      ['karma-sourcemap-loader', '0.3.7'],
+      ['protractor', '5.4.2'],
+      ['requirejs', '2.3.6'],
+      ['rollup', '1.27.5'],
+      ['rollup-plugin-commonjs', '10.1.0'],
+      ['rollup-plugin-node-resolve', '5.2.0'],
+      ['terser', '4.4.0'],
     ];
 
     for (const [name, version] of devDependencies) {