feat(bazel): ng-new schematics with Bazel (#27277)

This commit creates a schematics for ng new command that builds
the project with Bazel.

PR Close #27277

packages/bazel/BUILD.bazel

@@ -7,6 +7,7 @@ npm_package(
         "package.json",
         "protractor-utils.js",
         "//packages/bazel/src:package_assets",
+        "//packages/bazel/src/builders:package_assets",
         "//packages/bazel/src/schematics:package_assets",
     ],
     packages = [
@@ -19,5 +20,6 @@ npm_package(
         "//packages/bazel/src/ngc-wrapped:ngc_lib",
         "//packages/bazel/src/protractor/utils",
         "//packages/bazel/src/schematics/bazel-workspace",
+        "//packages/bazel/src/schematics/ng-new",
     ],
 )

packages/bazel/src/builders/builders.json

@@ -1,7 +1,7 @@
 {
   "builders": {
     "build": {
-      "class": "./index#Builder",
+      "class": "./index",
       "schema": "./schema.json",
       "description": "Executes Bazel on a target."
     }

packages/bazel/src/builders/index.ts

@@ -5,18 +5,18 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  *
- * @fileoverview Bazel bundle builder
+ * @fileoverview Bazel builder
  */
 
-import {BuildEvent, Builder as BuilderInterface, BuilderConfiguration, BuilderContext} from '@angular-devkit/architect';
+import {BuildEvent, Builder, BuilderConfiguration, BuilderContext} from '@angular-devkit/architect';
 import {getSystemPath, resolve} from '@angular-devkit/core';
 import {Observable, of } from 'rxjs';
 import {catchError, map, tap} from 'rxjs/operators';
 
 import {checkInstallation, runBazel} from './bazel';
 import {Schema} from './schema';
 
-export class Builder implements BuilderInterface<Schema> {
+class BazelBuilder implements Builder<Schema> {
   constructor(private context: BuilderContext) {}
 
   run(builderConfig: BuilderConfiguration<Partial<Schema>>): Observable<BuildEvent> {
@@ -38,3 +38,5 @@ export class Builder implements BuilderInterface<Schema> {
         .pipe(map(() => ({success: true})), catchError(() => of ({success: false})), );
   }
 }
+
+export default BazelBuilder;

packages/bazel/src/schematics/BUILD.bazel

@@ -15,6 +15,7 @@ jasmine_node_test(
     bootstrap = ["angular/tools/testing/init_node_spec.js"],
     deps = [
         "//packages/bazel/src/schematics/bazel-workspace:test",
+        "//packages/bazel/src/schematics/ng-new:test",
         "//tools/testing:node",
     ],
 )

packages/bazel/src/schematics/bazel-workspace/files/src/BUILD.bazel.template

@@ -7,7 +7,15 @@ load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
 
 ng_module(
     name = "src",
-    srcs = glob(["**/*.ts"], exclude = ["**/*.spec.ts", "test.ts"]),
+    srcs = glob(
+        include = ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "main.ts",
+            "test.ts",
+            "initialize_testbed.ts",
+        ],
+    ),
     assets = glob([
       "**/*.css",
       "**/*.html",
@@ -21,7 +29,7 @@ ng_module(
 
 rollup_bundle(
     name = "bundle",
-    entry_point = "src/main",
+    entry_point = "src/main.prod",
     deps = ["//src"],
 )
 
@@ -50,7 +58,7 @@ ts_devserver(
         "npm/node_modules/zone.js/dist",
         "npm/node_modules/tslib",
     ],
-    entry_module = "<%= name %>/src/main",
+    entry_module = "<%= name %>/src/main.dev",
     serving_path = "/bundle.min.js",
     static_files = [
         "@npm//node_modules/zone.js:dist/zone.min.js",
@@ -67,14 +75,28 @@ ts_library(
     deps = [
         ":src",
         "@angular//packages/core/testing",
-        "@angular//packages/platform-browser-dynamic/testing",
         "@npm//@types",
     ],
 )
 
+ts_library(
+    name = "initialize_testbed",
+    testonly = 1,
+    srcs = [
+        "initialize_testbed.ts",
+    ],
+    deps = [
+        "@angular//packages/core/testing",
+        "@angular//packages/platform-browser-dynamic/testing",
+    ],
+)
+
 ts_web_test_suite(
     name = "test",
     srcs = ["@npm//node_modules/tslib:tslib.js"],
+    runtime_deps = [
+        ":initialize_testbed",
+    ],
     # do not sort
     bootstrap = [
         "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",

packages/bazel/src/schematics/bazel-workspace/files/src/initialize_testbed.ts.template

@@ -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());

packages/bazel/src/schematics/bazel-workspace/index.ts

@@ -30,7 +30,7 @@ export default function(options: BazelWorkspaceOptions): Rule {
     const appDir = `${newProjectRoot}/${options.name}`;
 
     const workspaceVersions = {
-      'ANGULAR_VERSION': '7.0.2',
+      'ANGULAR_VERSION': '7.1.0',
       'RULES_SASS_VERSION': '1.14.1',
       'RXJS_VERSION': '6.3.3',
     };

packages/bazel/src/schematics/collection.json

@@ -2,6 +2,11 @@
     "name": "@angular/bazel",
     "version": "0.1",
     "schematics": {
+      "ng-new": {
+        "factory": "./ng-new",
+        "schema": "./ng-new/schema.json",
+        "description": "Create an Angular project that builds with Bazel."
+      },
       "bazel-workspace": {
         "factory": "./bazel-workspace",
         "schema": "./bazel-workspace/schema.json",

packages/bazel/src/schematics/ng-new/BUILD.bazel

@@ -0,0 +1,36 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "ng-new",
+    srcs = [
+        "index.ts",
+        "schema.d.ts",
+    ],
+    data = glob(["files/**/*"]) + [
+        "schema.json",
+    ],
+    deps = [
+        "//packages/bazel/src/schematics/bazel-workspace",
+        "@ngdeps//@angular-devkit/core",
+        "@ngdeps//@angular-devkit/schematics",
+        "@ngdeps//@schematics/angular",
+        "@ngdeps//typescript",
+    ],
+)
+
+ts_library(
+    name = "test",
+    testonly = True,
+    srcs = [
+        "index_spec.ts",
+    ],
+    data = [
+        "//packages/bazel/src/schematics:package_assets",
+    ],
+    deps = [
+        ":ng-new",
+        "@ngdeps//@angular-devkit/schematics",
+    ],
+)

packages/bazel/src/schematics/ng-new/files/index.html.template

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title><%= utils.classify(name) %></title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+  <script src="/zone.min.js"></script>
+  <script src="/bundle.min.js"></script>
+</body>
+</html>

packages/bazel/src/schematics/ng-new/files/main.dev.ts.template

@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

packages/bazel/src/schematics/ng-new/files/main.prod.ts.template

@@ -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);