build: add bazel integration test (#18733)

It includes sass compilation, and building the bazel package
distribution.

PR Close #18733

integration/bazel/src/BUILD.bazel

@@ -0,0 +1,11 @@
+load("@angular//:index.bzl", "ng_module")
+
+# Allow targets under sub-packages to reference the tsconfig.json file
+exports_files(["tsconfig.json"])
+
+ng_module(
+    name = "app",
+    srcs = ["app.module.ts"],
+    deps = ["//src/hello-world"],
+    tsconfig = ":tsconfig.json",
+)

integration/bazel/src/app.module.ts

@@ -0,0 +1,9 @@
+import {HelloWorldModule} from './hello-world/hello-world.module';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  imports: [BrowserModule, HelloWorldModule]
+})
+export class AppModule {}

integration/bazel/src/hello-world/BUILD.bazel

@@ -0,0 +1,19 @@
+package(default_visibility = ["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+
+sass_binary(
+    name = "styles",
+    src = "hello-world.component.scss",
+    deps = [
+         "//src/shared:colors",
+         "//src/shared:fonts",
+    ],
+)
+
+ng_module(
+    name = "hello-world",
+    srcs = glob(["*.ts"]),
+    tsconfig = "//src:tsconfig.json",
+    assets = [":styles"],
+)

integration/bazel/src/hello-world/hello-world.component.scss

@@ -0,0 +1,12 @@
+@import "src/shared/fonts";
+@import "src/shared/colors";
+
+html {
+  body {
+    font-family: $default-font-stack;
+    h1 {
+      font-family: $modern-font-stack;
+      color: $example-red;
+    }
+  }
+}

integration/bazel/src/hello-world/hello-world.component.ts

@@ -0,0 +1,15 @@
+
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+    <input type="text" [value]="name" (input)="name = $event.target.value"/>
+  `,
+  // TODO: might be better to point to .scss so this looks valid at design-time
+  styleUrls: ['./styles.css']
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}

integration/bazel/src/hello-world/hello-world.module.ts

@@ -0,0 +1,8 @@
+import {HelloWorldComponent} from './hello-world.component';
+import {NgModule} from '@angular/core';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+})
+export class HelloWorldModule {}

integration/bazel/src/shared/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library")
+
+sass_library(
+    name = "colors",
+    srcs = ["_colors.scss"],
+)
+
+sass_library(
+    name = "fonts",
+    srcs = ["_fonts.scss"],
+)

integration/bazel/src/shared/_colors.scss

@@ -0,0 +1,2 @@
+$example-blue: #0000ff;
+$example-red: #ff0000;

integration/bazel/src/shared/_fonts.scss

@@ -0,0 +1,2 @@
+$default-font-stack: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+$modern-font-stack: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

integration/bazel/src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es5",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ]
+  }
+}