Showing preview only (665K chars total). Download the full file or copy to clipboard to get everything.
Repository: alexeagle/angular-bazel-example
Branch: master
Commit: 2f1abb9b0279
Files: 336
Total size: 580.1 KB
Directory structure:
gitextract_yf405e50/
├── .bazelignore
├── .bazelrc
├── .circleci/
│ ├── bazel.rc
│ └── config.yml
├── .clang-format
├── .firebaserc
├── .gitignore
├── BUILD.bazel
├── LICENSE
├── README.md
├── WORKSPACE
├── angular-metadata.tsconfig.json
├── angular.json
├── deployment.yaml
├── e2e/
│ ├── BUILD.bazel
│ ├── protractor.on-prepare.js
│ └── src/
│ ├── app.e2e-spec.ts
│ └── app.po.ts
├── firebase.json
├── package.json
├── renovate.json
├── src/
│ ├── BUILD.bazel
│ ├── app/
│ │ ├── BUILD.bazel
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── billing/
│ │ │ ├── BUILD.bazel
│ │ │ ├── billing.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp0/
│ │ │ │ │ ├── cmp0.component.html
│ │ │ │ │ ├── cmp0.component.scss
│ │ │ │ │ ├── cmp0.component.spec.ts
│ │ │ │ │ └── cmp0.component.ts
│ │ │ │ ├── cmp1/
│ │ │ │ │ ├── cmp1.component.html
│ │ │ │ │ ├── cmp1.component.scss
│ │ │ │ │ ├── cmp1.component.spec.ts
│ │ │ │ │ └── cmp1.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp2/
│ │ │ │ ├── cmp2.component.html
│ │ │ │ ├── cmp2.component.scss
│ │ │ │ ├── cmp2.component.spec.ts
│ │ │ │ └── cmp2.component.ts
│ │ │ ├── cmp3/
│ │ │ │ ├── cmp3.component.html
│ │ │ │ ├── cmp3.component.scss
│ │ │ │ ├── cmp3.component.spec.ts
│ │ │ │ └── cmp3.component.ts
│ │ │ └── module1.module.ts
│ │ ├── compute/
│ │ │ ├── BUILD.bazel
│ │ │ ├── compute.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp4/
│ │ │ │ │ ├── cmp4.component.html
│ │ │ │ │ ├── cmp4.component.scss
│ │ │ │ │ ├── cmp4.component.spec.ts
│ │ │ │ │ └── cmp4.component.ts
│ │ │ │ ├── cmp5/
│ │ │ │ │ ├── cmp5.component.html
│ │ │ │ │ ├── cmp5.component.scss
│ │ │ │ │ ├── cmp5.component.spec.ts
│ │ │ │ │ └── cmp5.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp6/
│ │ │ │ ├── cmp6.component.html
│ │ │ │ ├── cmp6.component.scss
│ │ │ │ ├── cmp6.component.spec.ts
│ │ │ │ └── cmp6.component.ts
│ │ │ ├── cmp7/
│ │ │ │ ├── cmp7.component.html
│ │ │ │ ├── cmp7.component.scss
│ │ │ │ ├── cmp7.component.spec.ts
│ │ │ │ └── cmp7.component.ts
│ │ │ └── module1.module.ts
│ │ ├── datastore/
│ │ │ ├── BUILD.bazel
│ │ │ ├── datastore.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp8/
│ │ │ │ │ ├── cmp8.component.html
│ │ │ │ │ ├── cmp8.component.scss
│ │ │ │ │ ├── cmp8.component.spec.ts
│ │ │ │ │ └── cmp8.component.ts
│ │ │ │ ├── cmp9/
│ │ │ │ │ ├── cmp9.component.html
│ │ │ │ │ ├── cmp9.component.scss
│ │ │ │ │ ├── cmp9.component.spec.ts
│ │ │ │ │ └── cmp9.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp10/
│ │ │ │ ├── cmp10.component.html
│ │ │ │ ├── cmp10.component.scss
│ │ │ │ ├── cmp10.component.spec.ts
│ │ │ │ └── cmp10.component.ts
│ │ │ ├── cmp11/
│ │ │ │ ├── cmp11.component.html
│ │ │ │ ├── cmp11.component.scss
│ │ │ │ ├── cmp11.component.spec.ts
│ │ │ │ └── cmp11.component.ts
│ │ │ └── module1.module.ts
│ │ ├── functions/
│ │ │ ├── BUILD.bazel
│ │ │ ├── functions.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp12/
│ │ │ │ │ ├── cmp12.component.html
│ │ │ │ │ ├── cmp12.component.scss
│ │ │ │ │ ├── cmp12.component.spec.ts
│ │ │ │ │ └── cmp12.component.ts
│ │ │ │ ├── cmp13/
│ │ │ │ │ ├── cmp13.component.html
│ │ │ │ │ ├── cmp13.component.scss
│ │ │ │ │ ├── cmp13.component.spec.ts
│ │ │ │ │ └── cmp13.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp14/
│ │ │ │ ├── cmp14.component.html
│ │ │ │ ├── cmp14.component.scss
│ │ │ │ ├── cmp14.component.spec.ts
│ │ │ │ └── cmp14.component.ts
│ │ │ ├── cmp15/
│ │ │ │ ├── cmp15.component.html
│ │ │ │ ├── cmp15.component.scss
│ │ │ │ ├── cmp15.component.spec.ts
│ │ │ │ └── cmp15.component.ts
│ │ │ └── module1.module.ts
│ │ ├── hello-world/
│ │ │ ├── BUILD.bazel
│ │ │ ├── hello-world.component.html
│ │ │ ├── hello-world.component.scss
│ │ │ ├── hello-world.component.spec.ts
│ │ │ ├── hello-world.component.ts
│ │ │ └── hello-world.module.ts
│ │ ├── home/
│ │ │ ├── BUILD.bazel
│ │ │ ├── home.html
│ │ │ └── home.ts
│ │ ├── logging/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── logging.module.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp16/
│ │ │ │ │ ├── cmp16.component.html
│ │ │ │ │ ├── cmp16.component.scss
│ │ │ │ │ ├── cmp16.component.spec.ts
│ │ │ │ │ └── cmp16.component.ts
│ │ │ │ ├── cmp17/
│ │ │ │ │ ├── cmp17.component.html
│ │ │ │ │ ├── cmp17.component.scss
│ │ │ │ │ ├── cmp17.component.spec.ts
│ │ │ │ │ └── cmp17.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp18/
│ │ │ │ ├── cmp18.component.html
│ │ │ │ ├── cmp18.component.scss
│ │ │ │ ├── cmp18.component.spec.ts
│ │ │ │ └── cmp18.component.ts
│ │ │ ├── cmp19/
│ │ │ │ ├── cmp19.component.html
│ │ │ │ ├── cmp19.component.scss
│ │ │ │ ├── cmp19.component.spec.ts
│ │ │ │ └── cmp19.component.ts
│ │ │ └── module1.module.ts
│ │ ├── monitoring/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp20/
│ │ │ │ │ ├── cmp20.component.html
│ │ │ │ │ ├── cmp20.component.scss
│ │ │ │ │ ├── cmp20.component.spec.ts
│ │ │ │ │ └── cmp20.component.ts
│ │ │ │ ├── cmp21/
│ │ │ │ │ ├── cmp21.component.html
│ │ │ │ │ ├── cmp21.component.scss
│ │ │ │ │ ├── cmp21.component.spec.ts
│ │ │ │ │ └── cmp21.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp22/
│ │ │ │ │ ├── cmp22.component.html
│ │ │ │ │ ├── cmp22.component.scss
│ │ │ │ │ ├── cmp22.component.spec.ts
│ │ │ │ │ └── cmp22.component.ts
│ │ │ │ ├── cmp23/
│ │ │ │ │ ├── cmp23.component.html
│ │ │ │ │ ├── cmp23.component.scss
│ │ │ │ │ ├── cmp23.component.spec.ts
│ │ │ │ │ └── cmp23.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── monitoring.module.ts
│ │ ├── networking/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp24/
│ │ │ │ │ ├── cmp24.component.html
│ │ │ │ │ ├── cmp24.component.scss
│ │ │ │ │ ├── cmp24.component.spec.ts
│ │ │ │ │ └── cmp24.component.ts
│ │ │ │ ├── cmp25/
│ │ │ │ │ ├── cmp25.component.html
│ │ │ │ │ ├── cmp25.component.scss
│ │ │ │ │ ├── cmp25.component.spec.ts
│ │ │ │ │ └── cmp25.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp26/
│ │ │ │ │ ├── cmp26.component.html
│ │ │ │ │ ├── cmp26.component.scss
│ │ │ │ │ ├── cmp26.component.spec.ts
│ │ │ │ │ └── cmp26.component.ts
│ │ │ │ ├── cmp27/
│ │ │ │ │ ├── cmp27.component.html
│ │ │ │ │ ├── cmp27.component.scss
│ │ │ │ │ ├── cmp27.component.spec.ts
│ │ │ │ │ └── cmp27.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── networking.module.ts
│ │ ├── registry/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp28/
│ │ │ │ │ ├── cmp28.component.html
│ │ │ │ │ ├── cmp28.component.scss
│ │ │ │ │ ├── cmp28.component.spec.ts
│ │ │ │ │ └── cmp28.component.ts
│ │ │ │ ├── cmp29/
│ │ │ │ │ ├── cmp29.component.html
│ │ │ │ │ ├── cmp29.component.scss
│ │ │ │ │ ├── cmp29.component.spec.ts
│ │ │ │ │ └── cmp29.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp30/
│ │ │ │ │ ├── cmp30.component.html
│ │ │ │ │ ├── cmp30.component.scss
│ │ │ │ │ ├── cmp30.component.spec.ts
│ │ │ │ │ └── cmp30.component.ts
│ │ │ │ ├── cmp31/
│ │ │ │ │ ├── cmp31.component.html
│ │ │ │ │ ├── cmp31.component.scss
│ │ │ │ │ ├── cmp31.component.spec.ts
│ │ │ │ │ └── cmp31.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── registry.module.ts
│ │ ├── storage/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp32/
│ │ │ │ │ ├── cmp32.component.html
│ │ │ │ │ ├── cmp32.component.scss
│ │ │ │ │ ├── cmp32.component.spec.ts
│ │ │ │ │ └── cmp32.component.ts
│ │ │ │ ├── cmp33/
│ │ │ │ │ ├── cmp33.component.html
│ │ │ │ │ ├── cmp33.component.scss
│ │ │ │ │ ├── cmp33.component.spec.ts
│ │ │ │ │ └── cmp33.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp34/
│ │ │ │ │ ├── cmp34.component.html
│ │ │ │ │ ├── cmp34.component.scss
│ │ │ │ │ ├── cmp34.component.spec.ts
│ │ │ │ │ └── cmp34.component.ts
│ │ │ │ ├── cmp35/
│ │ │ │ │ ├── cmp35.component.html
│ │ │ │ │ ├── cmp35.component.scss
│ │ │ │ │ ├── cmp35.component.spec.ts
│ │ │ │ │ └── cmp35.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── storage.module.ts
│ │ ├── support/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp36/
│ │ │ │ │ ├── cmp36.component.html
│ │ │ │ │ ├── cmp36.component.scss
│ │ │ │ │ ├── cmp36.component.spec.ts
│ │ │ │ │ └── cmp36.component.ts
│ │ │ │ ├── cmp37/
│ │ │ │ │ ├── cmp37.component.html
│ │ │ │ │ ├── cmp37.component.scss
│ │ │ │ │ ├── cmp37.component.spec.ts
│ │ │ │ │ └── cmp37.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp38/
│ │ │ │ │ ├── cmp38.component.html
│ │ │ │ │ ├── cmp38.component.scss
│ │ │ │ │ ├── cmp38.component.spec.ts
│ │ │ │ │ └── cmp38.component.ts
│ │ │ │ ├── cmp39/
│ │ │ │ │ ├── cmp39.component.html
│ │ │ │ │ ├── cmp39.component.scss
│ │ │ │ │ ├── cmp39.component.spec.ts
│ │ │ │ │ └── cmp39.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── support.module.ts
│ │ └── todos/
│ │ ├── BUILD.bazel
│ │ ├── reducers/
│ │ │ ├── BUILD.bazel
│ │ │ └── reducers.ts
│ │ ├── todos.component.html
│ │ ├── todos.component.scss
│ │ ├── todos.component.ts
│ │ └── todos.module.ts
│ ├── assets/
│ │ ├── BUILD.bazel
│ │ └── landing.css
│ ├── example/
│ │ ├── BUILD.bazel
│ │ └── index.html
│ ├── index.html
│ ├── initialize_testbed.ts
│ ├── lib/
│ │ └── shorten/
│ │ ├── BUILD.bazel
│ │ ├── README.md
│ │ └── shorten.ts
│ ├── main.dev.ts
│ ├── main.prod.ts
│ ├── main.ts
│ ├── rxjs_shims.js
│ ├── shared/
│ │ └── material/
│ │ ├── BUILD.bazel
│ │ └── material.module.ts
│ ├── styles.scss
│ ├── tsconfig-test.json
│ └── tsconfig.json
├── third_party/
│ └── github.com/
│ └── bazelbuild/
│ └── bazel-toolchains/
│ └── bazelrc/
│ └── bazel-0.24.0.bazelrc
└── tools/
├── BUILD.bazel
├── defaults.bzl
└── generator/
├── index.js
├── src/
│ ├── build-file.js
│ ├── clean.js
│ ├── create-feature-module.js
│ ├── feature-names.js
│ ├── generate.js
│ ├── ng-module.js
│ ├── ng.js
│ ├── reference-components.js
│ └── utils.js
└── templates/
├── dashboard/
│ ├── component.html
│ ├── component.scss
│ ├── component.spec.ts
│ └── component.ts
├── form/
│ ├── component.html
│ ├── component.scss
│ ├── component.spec.ts
│ └── component.ts
└── table/
├── component.html
├── component.scss
├── component.spec.ts
└── component.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .bazelignore
================================================
node_modules
================================================
FILE: .bazelrc
================================================
# Make TypeScript and Angular compilation fast, by keeping a few copies of the
# compiler running as daemons, and cache SourceFile AST's to reduce parse time.
build --strategy=TypeScriptCompile=worker
build --strategy=AngularTemplateCompile=worker
# Don't create bazel-* symlinks in the WORKSPACE directory.
# These require .gitignore and may scare users.
# Also, it's a workaround for https://github.com/bazelbuild/rules_typescript/issues/12
# which affects the common case of having `tsconfig.json` in the WORKSPACE directory.
#
# Instead, you should run `bazel info bazel-bin` to find out where the outputs went.
build --symlink_prefix=dist/
test --test_output=errors
# Use the Angular 6 compiler
build --define=compile=legacy
# Turn off legacy external runfiles
run --nolegacy_external_runfiles
test --nolegacy_external_runfiles
# Turn on --incompatible_strict_action_env which was on by default
# in Bazel 0.21.0 but turned off again in 0.22.0. Follow
# https://github.com/bazelbuild/bazel/issues/7026 for more details.
# This flag is needed to so that the bazel cache is not invalidated
# when running bazel via `yarn bazel`.
# See https://github.com/angular/angular/issues/27514.
build --incompatible_strict_action_env
run --incompatible_strict_action_env
test --incompatible_strict_action_env
# Turn on managed directories feature in Bazel
# This allows us to avoid installing a second copy of node_modules
build --experimental_allow_incremental_repository_updates
query --experimental_allow_incremental_repository_updates
###############################
# Remote Build Execution support
# Turn on these settings with
# --config=remote
###############################
# Load default settings for Remote Build Execution
# When updating, the URLs of bazel_toolchains in packages/bazel/package.bzl
# may also need to be updated (see https://github.com/angular/angular/pull/27935)
import %workspace%/third_party/github.com/bazelbuild/bazel-toolchains/bazelrc/bazel-0.24.0.bazelrc
# Point to our custom execution platform; see tools/BUILD.bazel
build:remote --extra_execution_platforms=//tools:rbe_ubuntu1604-angular
build:remote --host_platform=//tools:rbe_ubuntu1604-angular
build:remote --platforms=//tools:rbe_ubuntu1604-angular
# Remote instance.
# rbe-shared-demo has 500 2-core workers
# rbe-shared-demo2 has 100 8-core workers
build:remote --remote_instance_name=projects/rbe-shared-demo2/instances/default_instance
# Allow Bazel to consume all the workers
build:remote --jobs=100
# Schedule actions both locally and remote, take the faster one
# See https://blog.bazel.build/2019/02/01/dynamic-spawn-scheduler.html
# NB: this setting is experimental and can cause obscure build failures.
# The Bazel team does not recommend using this in all projects.
# We can observe failures like Remote connection/protocol failed
# build:remote --experimental_spawn_scheduler
##################################################
# Load any settings specific to the current user.
##################################################
# Needs to be last statement in this
# config, as the user configuration should be able to overwrite flags from this file.
# To use Remote Build Execution, this file should contain a line like
# build --google_credentials=[path to the .json credentials file]
try-import .bazelrc.user
================================================
FILE: .circleci/bazel.rc
================================================
# These options are enabled when running on CI
# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
# See remote cache documentation in /docs/BAZEL.md
# Don't be spammy in the logs
# TODO: re-enable after we deal with 10m timeout on circleci
#build --noshow_progress
# Don't run tests that are not meant to be run on circleci
test --test_tag_filters=-no-circleci
# Print all the options that apply to the build.
# This helps us diagnose which options override others
# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
build --announce_rc
# Prevent unstable environment variables from tainting cache keys
build --experimental_strict_action_env
# Save downloaded repositories such as the go toolchain
# This directory can then be included in the CircleCI cache
# It should save time running the first build
build --experimental_repository_cache=/home/circleci/bazel_repository_cache
# Workaround https://github.com/bazelbuild/bazel/issues/3645
# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
# https://circleci.com/docs/2.0/configuration-reference/#resource_class
build --local_resources=14336,8.0,1.0
# Use fixed chunk names for code-split bundles in CI
# so that GitHub buildsize bot reports are accurate
build --define=ROLLUP_BUNDLE_FIXED_CHUNK_NAMES=1
================================================
FILE: .circleci/config.yml
================================================
# This file configures the build at https://circleci.com/gh/alexeagle/angular-bazel-example
# Complete documentation is at https://circleci.com/docs/2.0/
# CircleCI lets us pick the key for storing one or more caches, to speed up subsequent builds.
# We can use this to avoid re-fetching our dependencies from npm on every build.
# To ensure we don't load a stale cache, we invalidate it based on the entries in the key:
# - the checksum of Yarn's lock file
# - the branch we are on, which really shouldn't be needed since the yarn lock file should be hermetic
# - the docker image tag, working around an issue we saw where changing docker images causes permission
# errors when restoring the cache, like when the user we run as changes
var_1: &default_docker_image circleci/node:10.16
var_2: &cache_key node-0.16-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.8.0
# Each job will inherit these defaults
var_3: &job_defaults
working_directory: ~/angular-bazel-example
docker:
- image: *default_docker_image
# After checkout, rebase on top of master, because we want to test the proposed merge of a
# onto the target branch, not just test what's on the user's fork.
# Similar to travis behavior, but not quite the same.
# See https://discuss.circleci.com/t/1662
var_4: &post_checkout
post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
var_5: &restore_cache
restore_cache:
keys:
- *cache_key
var_6: &init_environment
run:
name: Initializing environment
command: |
sudo apt-get update
# Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)
# and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)
# which are dependendies of chrome & needed for karma & protractor headless chrome tests.
# This is a very small install with the whole init_environment step taking less than 8 seconds.
# TODO(gregmagolan): switch rules_webtesting to use a chrome headless_shell binary which does
# not depend on any dynamically linked libs
sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1
# Also install libraries required for firefox
sudo apt-get -y install libdbus-glib-1-2
# Setup /etc/bazel.bazelrc
sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
var_7: &yarn_install
run:
name: Run yarn install
command: yarn install
var_8: &init_bazel
run:
name: Initializing Bazel
command: |
# Symlink fetched bazel to /usr/local/bin/bazel
pathToBazel=$(ls $(realpath ./node_modules/@bazel/bazel-linux_x64)/bazel-*)
sudo ln -fs $pathToBazel /usr/local/bin/bazel
echo "Bazel version:"
bazel version
var_9: &attach_workspace
attach_workspace:
at: ~/
version: 2
# These jobs will run in parallel, and report separate statuses to GitHub PRs
jobs:
setup:
<<: *job_defaults
steps:
- checkout:
<<: *post_checkout
- *restore_cache
- *init_environment
- *yarn_install
- *init_bazel
# Save all node_modules to the cache
- save_cache:
key: *cache_key
paths:
- "node_modules"
# Persist any changes at this point to be reused by further jobs.
- persist_to_workspace:
root: ~/
paths:
- ./angular-bazel-example
lint:
<<: *job_defaults
steps:
- *attach_workspace
- *init_environment
- *init_bazel
# Run the Buildifier to check our Bazel rules for format issues.
- run: 'yarn bazel:format --mode=check ||
(echo "BUILD files not formatted. Please run ''yarn bazel:format --mode=fix''" ; exit 1)'
# Run the Buildifier to check our Bazel rules for lint issues.
# Note: The `--lint=warn` will auto fixe (re-write) the affected files.
- run: 'yarn bazel:format --lint=warn ||
(echo "BUILD files contain unresolved lint errors. Please fix manually the remaining errors." ; exit 1)'
build_and_test:
<<: *job_defaults
resource_class: xlarge
steps:
- *attach_workspace
- *init_environment
- *init_bazel
# Build and Test
- run: yarn ng test
- run: yarn ng e2e
# Also run prodserver test which is not covered by `ng e2e`
- run: bazel test //e2e:prodserver_test
- store_artifacts:
path: dist/bin/src/bundle.min.js
destination: bundle.min.js
- store_artifacts:
path: dist/bin/src/bundle.cs.min
destination: bundle.cs.min
benchmark:
<<: *job_defaults
resource_class: xlarge
steps:
- *attach_workspace
- *init_environment
- *init_bazel
# Run `bazel build` first as a temporary workaround to unexpected
# benchmark failure when entire build runs withing ibazel-benchmark-runner
# ```
# Error running Bazel unexpected EOF
# [ibazel-benchmark-runner] iBazel process exited unexpectedly 4 null
# error Command failed with exit code 1.
# ```
# TODO(gregmagolan): remove this once issue is resolved
- run: bazel build ...
# Run the benchmark
- run: yarn benchmark
workflows:
version: 2
default_workflow:
jobs:
- setup
- lint:
requires:
- setup
- build_and_test:
requires:
- setup
- benchmark:
requires:
- setup
================================================
FILE: .clang-format
================================================
Language: JavaScript
BasedOnStyle: Google
ColumnLimit: 100
================================================
FILE: .firebaserc
================================================
{
"projects": {
"default": "bazel-angular-io"
}
}
================================================
FILE: .gitignore
================================================
node_modules
bazel-out
dist
.firebase
.DS_Store
.bazelrc.user
================================================
FILE: BUILD.bazel
================================================
load("@k8s_deploy//:defaults.bzl", "k8s_deploy")
package(default_visibility = ["//:__subpackages__"])
# ts_library and ng_module use the `//:tsconfig.json` target
# by default. This alias allows omitting explicit tsconfig
# attribute.
alias(
name = "tsconfig.json",
actual = "//src:tsconfig.json",
)
k8s_deploy(
name = "deploy",
images = {
"gcr.io/internal-200822/src:nodejs_image": "//src:image",
},
template = ":deployment.yaml",
)
================================================
FILE: LICENSE
================================================
The MIT License
Copyright (c) 2014-2017 Google, Inc. http://angular.io
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
[](https://circleci.com/gh/angular/angular-bazel-example)
# Moved to rules_nodejs monorepo: https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular
**Readme content is preserved below to avoid breaking links**
**This is experimental, as part of Angular Labs! There may be breaking changes.**
This is part of the ABC project. The overall goal is to make it possible to
develop Angular applications the same way we do at Google.
Learn more about Bazel and Angular at https://bazel.angular.io
This example is deployed at https://bazel.angular.io/example
## Guide to the example
This example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.
- **Angular CLI**: you can use the `ng` command to run build, serve, test, and e2e
- **Angular Libraries**: to maximize build incrementality, each Angular module is compiled as a separate step. This lets us re-use Angular libraries without having to publish them as npm packages. See `src/todos` for a typical `NgModule` compiled as a library for use in the application, using the `ng_module` rule in the `BUILD.bazel` file.
- **TypeScript Libraries**: see `src/lib` for a trivial example of a pure-TS library that's consumed in the application, using the `ts_library` rule in the `BUILD.bazel` file.
- **Sass**: we use Sass for all styling. Angular components import Sass files, and these are built by Bazel as independent processes calling the modern Sass compiler (written in Dart).
- **Material design**: see `src/material` where we collect the material modules we use.
- **Redux-style state management**: see `src/reducers` where we use the [NgRx Store](https://ngrx.io/guide/store).
- **Lazy loading**: in production mode, the application is served in chunks. Run `ng serve --prod`
- **Differential loading**: in production mode, we load a pair of `<script>` tags. Modern browsers will load code in the ES2015 syntax, which is smaller and requires fewer polyfills. Older browsers will load ES5 syntax.
- **Docker**: see below where we package up the production app for deployment on Kubernetes.
## Installation
You only need to install one build tool, and which one you choose typically depends on what kind of development you do most often.
If you're a frontend developer, you should install NodeJS and yarn.
The `package.json` file has an `engines` section which indicates the range of NodeJS and yarn versions that you could use.
You simply run `yarn` commands shown below, and don't need to install Bazel or any other dependencies.
If you're a full-stack developer, you might be using Bazel for your backend already.
In this case, you should install Bazel following instructions at http://bazel.build.
Also install `ibazel`, which is a watch mode for Bazel not included in the standard distribution. See https://github.com/bazelbuild/bazel-watcher#installation.
The `WORKSPACE` file has a `check_bazel_version` call which will print an error if your Bazel version is not in the supported range.
You simply run `bazel` commands shown below, and don't need to install NodeJS, yarn, or any other dependencies.
## Development
First we'll run the development server:
```bash
$ ng serve
# or
$ ibazel run //src:devserver
```
This runs in "watch mode", which means it will watch any files that are inputs to the devserver, and when they change it will ask Bazel to re-build them.
When the re-build is finished, it will trigger a LiveReload in the browser.
This command prints a URL on the terminal. Open that page to see the demo app
running. Now you can edit one of the source files (`src/lib/file.ts` is an easy
one to understand and see the effect). As soon as you save a change, the app
should refresh in the browser with the new content. Our intent is that this time
is less than two seconds, even for a large application.
Control-C twice to kill the devserver.
## Testing
We can also run all the unit tests:
```bash
$ ng test
# or
$ bazel test //src/...
```
Or run the end-to-end tests:
```bash
$ ng e2e
# or
$ bazel test //e2e/...
```
In this example, there is a unit test for the `hello-world` component which uses
the `ts_web_test_suite` rule. There are also protractor e2e tests for both the
`prodserver` and `devserver` which use the `protractor_web_test_suite` rule.
Note that Bazel will only re-run the tests whose inputs changed since the last run.
## Production
We can run the application in production mode, where the code has been bundled
and optimized. This can be slower than the development mode, because any change
requires re-optimizing the app. This example uses Rollup and Uglify, but other
bundlers can be integrated with Bazel.
```bash
$ ng serve --prod
# or
$ bazel run //src:prodserver
```
### Code splitting
The production bundle is code split and routes such as `/` and `/todos`
are lazy loaded. Code splitting is handled by the rollup_bundle rule
which now supports the new code splitting feature in rollup.
Note: code splitting is _not_ supported in development mode yet so the
`//src:devserver` target does not serve a code split bundle. The dynamic
`import()` statements will resolve to modules that are served in the initial
JS payload.
## Npm dependencies
Having a local `node_modules` folder setup by `yarn` or `npm` is not
necessary when building this example with Bazel. This example makes use
of Bazel managed npm dependencies (https://github.com/bazelbuild/rules_nodejs#using-bazel-managed-dependencies)
which means Bazel will setup the npm dependencies in your `package.json` for you
outside of your local workspace for use in the build.
However, you may still want to run `yarn` or `npm` to manually
setup a local `node_modules` folder for editor and tooling support.
## Deployment
### Firebase
We use the standard firebase deploy command.
Run `yarn deploy` to release changes to bazel.angular.io.
### Kubernetes Engine
We use Bazel's docker support to package up our production server for deployment.
Each time the app changes, we'll get a slim new docker layer with just the modified files, keeping the round-trip for deployment incremental and fast.
This example is configured to run on Google Kubernetes Engine, so we can have an elastic pool of backend machines behind a load balancer.
This setup is more expensive to operate than something like Firebase Functions where the backend code is spun up on-demand, but is also more adaptable to scenarios like backend servers that need to run other binaries on the machine.
The application is currently live at http://35.197.115.230/
To run it under docker:
```
$ bazel run src:nodejs_image -- --norun
$ docker run --rm -p 8080:8080 bazel/src:nodejs_image
```
Deploy to production:
1. Install gcloud and kubectl
1. Authenticate to the Google Container Registry
`gcloud auth configure-docker`
1. Authenticate to Kubernetes Engine
`gcloud container clusters get-credentials angular-bazel-example --zone=us-west1-a`
1. For the first deployment: `bazel run :deploy.create`
1. To update: `bazel run :deploy.replace`
Tips:
```
# Run the binary without docker
$ bazel run src:nodejs_image.binary
# What's in the image?
$ bazel build src:nodejs_image && file-roller dist/bin/src/nodejs_image-layer.tar
# Tear down all running docker containers
$ docker rm -f $(docker ps -aq)
# Hop into the running image on kubernetes
$ kubectl exec angular-bazel-example-prod-3285254973-ncv3g -it -- /bin/bash
```
================================================
FILE: WORKSPACE
================================================
# The WORKSPACE file tells Bazel that this directory is a "workspace", which is like a project root.
# The content of this file specifies all the external dependencies Bazel needs to perform a build.
####################################
# ESModule imports (and TypeScript imports) can be absolute starting with the workspace name.
# The name of the workspace should match the npm package where we publish, so that these
# imports also make sense when referencing the published package.
workspace(
name = "angular_bazel_example",
managed_directories = {"@npm": ["node_modules"]},
)
# These rules are built-into Bazel but we need to load them first to download more rules
load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
# Fetch rules_nodejs so we can install our npm dependencies
http_archive(
name = "build_bazel_rules_nodejs",
sha256 = "0d9660cf0894f1fe1e9840818553e0080fbce0851169812d77a70bdb9981c946",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.37.0/rules_nodejs-0.37.0.tar.gz"],
)
# Fetch sass rules for compiling sass files
http_archive(
name = "io_bazel_rules_sass",
sha256 = "4f05239080175a3f4efa8982d2b7775892d656bb47e8cf56914d5f9441fb5ea6",
strip_prefix = "rules_sass-86ca977cf2a8ed481859f83a286e164d07335116",
url = "https://github.com/bazelbuild/rules_sass/archive/86ca977cf2a8ed481859f83a286e164d07335116.zip",
)
# Check the bazel version and download npm dependencies
load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "yarn_install")
# Bazel version must be at least the following version because:
# - 0.27.0 Adds managed directories support
check_bazel_version(
message = """
You no longer need to install Bazel on your machine.
Angular has a dependency on the @bazel/bazel package which supplies it.
Try running `yarn bazel` instead.
(If you did run that, check that you've got a fresh `yarn install`)
""",
minimum_bazel_version = "0.27.0",
)
# Setup the Node.js toolchain & install our npm dependencies into @npm
yarn_install(
name = "npm",
package_json = "//:package.json",
yarn_lock = "//:yarn.lock",
)
# Install all bazel dependencies of our npm packages
load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
install_bazel_dependencies()
# Load npm_bazel_protractor dependencies
load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
npm_bazel_protractor_dependencies()
# Load npm_bazel_karma dependencies
load("@npm_bazel_karma//:package.bzl", "rules_karma_dependencies")
rules_karma_dependencies()
# Setup the rules_webtesting toolchain
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
web_test_repositories()
# Temporary work-around for https://github.com/angular/angular/issues/28681
# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
load("@npm_bazel_karma//:browser_repositories.bzl", "browser_repositories")
browser_repositories()
# Setup the rules_typescript tooolchain
load("@npm_bazel_typescript//:defs.bzl", "ts_setup_workspace")
ts_setup_workspace()
# Setup the rules_sass toolchain
load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
sass_repositories()
################################
# Support for Remote Execution #
################################
http_archive(
name = "bazel_toolchains",
sha256 = "88e818f9f03628eef609c8429c210ecf265ffe46c2af095f36c7ef8b1855fef5",
strip_prefix = "bazel-toolchains-92dd8a7",
urls = [
"https://github.com/bazelbuild/bazel-toolchains/archive/92dd8a7.zip",
],
)
####################################################
# Support creating Docker images for our node apps #
####################################################
http_archive(
name = "io_bazel_rules_docker",
sha256 = "aed1c249d4ec8f703edddf35cbe9dfaca0b5f5ea6e4cd9e83e99f3b0d1136c3d",
strip_prefix = "rules_docker-0.7.0",
urls = ["https://github.com/bazelbuild/rules_docker/archive/v0.7.0.tar.gz"],
)
load("@io_bazel_rules_docker//nodejs:image.bzl", nodejs_image_repos = "repositories")
nodejs_image_repos()
####################################################
# Kubernetes setup, for deployment to Google Cloud #
####################################################
git_repository(
name = "io_bazel_rules_k8s",
commit = "36ae5b534cc51ab0815c9bc723760469a9f7175c",
remote = "https://github.com/bazelbuild/rules_k8s.git",
shallow_since = "1545317854 -0500",
)
load("@io_bazel_rules_k8s//k8s:k8s.bzl", "k8s_defaults", "k8s_repositories")
k8s_repositories()
k8s_defaults(
# This creates a rule called "k8s_deploy" that we can call later
name = "k8s_deploy",
# This is the name of the cluster as it appears in:
# kubectl config view --minify -o=jsonpath='{.contexts[0].context.cluster}'
cluster = "_".join([
"gke",
"internal-200822",
"us-west1-a",
"angular-bazel-example",
]),
kind = "deployment",
)
================================================
FILE: angular-metadata.tsconfig.json
================================================
// WORKAROUND https://github.com/angular/angular/issues/18810
//
// This file is required to run ngc on 3rd party libraries such as @ngrx,
// to write files like node_modules/@ngrx/store/store.ngsummary.json.
//
{
"compilerOptions": {
"lib": [
"dom",
"es2015"
],
"experimentalDecorators": true,
"types": [],
"module": "amd",
"moduleResolution": "node"
},
"angularCompilerOptions": {
"enableSummariesForJit": true
},
"include": [
"node_modules/@angular/**/*",
"node_modules/@ngrx/**/*"
],
"exclude": [
"node_modules/@ngrx/store/migrations/**",
"node_modules/@ngrx/store/schematics/**",
"node_modules/@ngrx/store/schematics-core/**",
"node_modules/@angular/cdk/schematics/**",
"node_modules/@angular/cdk/typings/schematics/**",
"node_modules/@angular/material/schematics/**",
"node_modules/@angular/material/typings/schematics/**",
"node_modules/@angular/common/upgrade*",
"node_modules/@angular/router/upgrade*",
"node_modules/@angular/bazel/**",
"node_modules/@angular/compiler-cli/**",
"node_modules/@angular/**/testing/**"
]
}
================================================
FILE: angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-bazel-example": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular/bazel:build",
"options": {
"targetLabel": "//src:prodapp",
"bazelCommand": "build"
}
},
"serve": {
"builder": "@angular/bazel:build",
"options": {
"targetLabel": "//src:devserver",
"bazelCommand": "run",
"watch": true
},
"configurations": {
"production": {
"targetLabel": "//src:prodserver"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngbazel:build"
}
},
"test": {
"builder": "@angular/bazel:build",
"options": {
"bazelCommand": "test",
"targetLabel": "//src/app/..."
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ngbazel-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular/bazel:build",
"options": {
"bazelCommand": "test",
"targetLabel": "//e2e:devserver_test"
},
"configurations": {
"production": {
"targetLabel": "//e2e:prodserver_test"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ngbazel"
}
================================================
FILE: deployment.yaml
================================================
# Configuration for deployment to kubernetes
apiVersion: apps/v1beta1
kind: Deployment
metadata:
name: angular-bazel-example-prod
spec:
replicas: 1
template:
metadata:
labels:
app: angular-bazel-example-prod
spec:
containers:
- name: angular-bazel-example
image: gcr.io/internal-200822/src:nodejs_image
imagePullPolicy: Always
ports:
- containerPort: 8080
================================================
FILE: e2e/BUILD.bazel
================================================
load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
ts_library(
name = "e2e",
testonly = 1,
srcs = glob(["src/*.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
"@npm//@types/jasmine",
"@npm//jasmine",
"@npm//protractor",
],
)
protractor_web_test_suite(
name = "prodserver_test",
on_prepare = ":protractor.on-prepare.js",
server = "//src:prodserver",
deps = [":e2e"],
)
protractor_web_test_suite(
name = "devserver_test",
on_prepare = ":protractor.on-prepare.js",
server = "//src:devserver",
deps = [":e2e"],
)
================================================
FILE: e2e/protractor.on-prepare.js
================================================
// The function exported from this file is used by the protractor_web_test_suite.
// It is passed to the `onPrepare` configuration setting in protractor and executed
// before running tests.
//
// If the function returns a promise, as it does here, protractor will wait
// for the promise to resolve before running tests.
const protractorUtils = require('@bazel/protractor/protractor-utils');
const protractor = require('protractor');
const path = require('path');
module.exports = function(config) {
// In this example, `@bazel/protractor/protractor-utils` is used to run
// the server. protractorUtils.runServer() runs the server on a randomly
// selected port (given a port flag to pass to the server as an argument).
// The port used is returned in serverSpec and the protractor serverUrl
// is the configured.
const isProdserver = path.basename(config.server, path.extname(config.server)) === 'prodserver';
return protractorUtils
.runServer(config.workspace, config.server, isProdserver ? '-p' : '-port', [])
.then(serverSpec => {
// Example app is hosted under `/example` in the prodserver and under `/` in devserver
const serverUrl = `http://localhost:${serverSpec.port}` + (isProdserver ? '/example' : '');
protractor.browser.baseUrl = serverUrl;
});
};
================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
describe('angular example application', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display: Hello World!', async () => {
await page.navigateTo();
expect(await page.getParagraphText()).toEqual(`Hello Adolph Blain...`);
await page.typeInInput('!');
expect(await page.getParagraphText()).toEqual(`Hello Adolph Blain...!`);
});
});
================================================
FILE: e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
async navigateTo() {
await browser.get(browser.baseUrl + '/hello');
return browser.waitForAngular();
}
async waitForElement(el, timeout = 10000) {
await browser.wait(() => el.isPresent(), timeout);
await browser.wait(() => el.isDisplayed(), timeout);
return el;
}
async getParagraphText() {
return (await this.waitForElement(element(by.css('div#greeting')))).getText();
}
async typeInInput(s: string) {
return (await this.waitForElement(element(by.css('input')))).sendKeys(s);
}
}
================================================
FILE: firebase.json
================================================
{
"hosting": {
"public": "dist/bin/src/prodapp",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/example/**",
"destination": "/example/index.html"
}
]
}
}
================================================
FILE: package.json
================================================
{
"name": "angular-bazel-example",
"private": true,
"description": "Demo of building Angular apps with Bazel",
"license": "Apache-2.0",
"engines": {
"node": ">=10.9.0 <11.0.0",
"yarn": ">=1.9.2 <2.0.0"
},
"dependencies": {
"@angular/animations": "8.2.6",
"@angular/cdk": "8.2.0",
"@angular/common": "8.2.6",
"@angular/core": "8.2.6",
"@angular/forms": "8.2.6",
"@angular/material": "8.2.0",
"@angular/platform-browser": "8.2.6",
"@angular/platform-browser-dynamic": "8.2.6",
"@angular/router": "8.2.6",
"@ngrx/store": "8.0.1",
"date-fns": "1.30.1",
"rxjs": "6.5.2",
"systemjs": "0.21.6",
"tslib": "1.10.0",
"zone.js": "0.10.2"
},
"devDependencies": {
"@angular/bazel": "8.2.6",
"@angular/cli": "8.3.4",
"@angular/compiler": "8.2.6",
"@angular/compiler-cli": "8.2.6",
"@bazel/bazel": "^0.29.0",
"@bazel/benchmark-runner": "0.1.0",
"@bazel/buildifier": "0.28.0",
"@bazel/ibazel": "0.10.3",
"@bazel/karma": "~0.37.0",
"@bazel/protractor": "~0.37.0",
"@bazel/typescript": "~0.37.0",
"@types/jasmine": "3.4.0",
"@types/node": "6.14.6",
"clang-format": "1.2.4",
"core-js": "2.6.9",
"firebase-tools": "7.1.0",
"husky": "3.0.4",
"ts-morph": "3.1.0",
"typescript": "3.4.5"
},
"scripts": {
"build": "bazel build //src:bundle",
"serve": "ibazel run //src:devserver",
"deploy": "ng build && firebase deploy",
"serve-prod": "bazel run //src:prodserver",
"e2e": "bazel test //e2e:all",
"test": "bazel test //src/...",
"benchmark": "ibazel-benchmark-runner //src:devserver src/app/hello-world/hello-world.component.ts --url=http://localhost:5432",
"postinstall": "ngc -p angular-metadata.tsconfig.json",
"bazel:format": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-actions,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,out-of-order-load,output-group,package-name,package-on-top,positional-args,redefined-variable,repository-name,same-origin-load,string-iteration,unsorted-dict-items,unused-variable",
"bazel:lint": "yarn bazel:format --lint=warn",
"bazel:lint-fix": "yarn bazel:format --lint=fix",
"format": "git-clang-format",
"precommit": "check-clang-format \"yarn format\"",
"generate": "node tools/generator/index.js",
"generate:clean": "node tools/generator/index.js --clean"
}
}
================================================
FILE: renovate.json
================================================
{
"extends": [
"config:base"
],
"pinVersions": false,
"packageRules": [
{
"packagePatterns": [
"^@angular\/.*"
],
"groupName": "angular",
"pinVersions": false
},
{
"packagePatterns": [
"^@bazel\/.*",
"build_bazel_rules_nodejs"
],
"groupName": "bazel",
"pinVersions": false
}
]
}
================================================
FILE: src/BUILD.bazel
================================================
load("@build_bazel_rules_nodejs//:defs.bzl", "history_server", "rollup_bundle")
load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
load("@io_bazel_rules_docker//container:container.bzl", "container_image")
load("@io_bazel_rules_docker//nodejs:image.bzl", "nodejs_image")
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_config", "ts_devserver", "ts_library")
package(default_visibility = ["//:__subpackages__"])
ts_config(
name = "tsconfig-test",
src = "tsconfig-test.json",
deps = [":tsconfig.json"],
)
# Run the sass compiler to output "styles.css"
# TODO(alexeagle): demonstrate the sass_library rule too
sass_binary(
name = "styles",
src = "styles.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/animations",
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ts_library(
name = "initialize_testbed",
testonly = 1,
srcs = [
"initialize_testbed.ts",
],
deps = [
"@npm//@angular/core",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types",
],
)
ng_module(
name = "src",
srcs = [
"main.dev.ts",
"main.prod.ts",
],
tsconfig = ":tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"//src/app",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/router",
"@npm//@ngrx/store",
],
)
filegroup(
name = "rxjs_umd_modules",
srcs = [
":rxjs_shims.js",
"@npm//:node_modules/rxjs/bundles/rxjs.umd.js",
],
)
# Files that we serve in both development and production
_ASSETS = [
# This label references an output of the "styles" sass_binary above.
":styles.css",
# Directly reference a file that came from @angular/material npm package
"@npm//:node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
# 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",
]
# This devserver is written in Go and is super-fast.
# It doesn't run any bundler or code splitter. Instead, it concatenates
# named UMD and named AMD JavaScript code on-the-fly in-memory.
# This scales really well for massive codebases.
ts_devserver(
name = "devserver",
# Serve these files but don't inject tags for them into the index file
# This might be because we only want to lazy-load these scripts on-demand,
# or because they aren't compatible with Require.js so we must use a runtime
# loader to load them.
data = [
"//src/assets",
],
# Start from the development version of the main
entry_module = "angular_bazel_example/src/main.dev",
# <script> and <link> tags will be automatically injected into this index file
index_html = "//src/example:assets",
# These scripts will be included in the JS bundle after require.js
# They should have only named UMD modules, or require.js will throw.
scripts = [
"@npm//:node_modules/@ngrx/store/bundles/store.umd.min.js",
"@npm//:node_modules/tslib/tslib.js",
":rxjs_umd_modules",
# We are manaully adding the bazel generated named-UMD date-fns bundle here as
# named-UMD bundles for non-APF npm packages are not yet automatically added.
# This file is generated by the npm_umd_bundle @npm//date-fns:date-fns__umd
# rule that is setup by yarn_install.
"@npm//date-fns:date-fns.umd.js",
],
# Serve these files in addition to the JavaScript bundle
# The corresponding <script> or <link> tags will be injected into the index_html
static_files = _ASSETS,
# Tell Bazel to build the sources first
deps = ["//src"],
)
rollup_bundle(
name = "bundle",
entry_point = ":main.prod.ts",
deps = [
"//src",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/material",
"@npm//@angular/platform-browser",
"@npm//@angular/router",
"@npm//@ngrx/store",
"@npm//rxjs",
],
)
web_package(
name = "prodapp",
# In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
# so we must serve them at that path, by stripping a prefix
additional_root_paths = [
"npm/node_modules/core-js/client",
"npm/node_modules/systemjs/dist",
],
# do not sort
assets = _ASSETS + [
# For differential loading, we supply both an ESModule entry point and an es5 entry point
# The injector will put two complimentary script tags in the example.html
":bundle.min.js",
":bundle.min.es2015.js",
],
data = [
":bundle",
"//src/assets",
# Include polyfills that will be requested by old browsers
"@npm//:node_modules/systemjs/dist/system.js",
"@npm//:node_modules/core-js/client/core.min.js",
"index.html",
],
# <script> and <link> tags will be automatically injected into this index.
index_html = "//src/example:assets",
)
history_server(
name = "prodserver",
data = [":prodapp"],
# '-a src/prodapp' will ask history-server to scan for all apps under the
# given folder this will result in the following auto-configuration:
# /example => src/prodapp/example
# / => src/prodapp
templated_args = [
"-a",
"src/prodapp",
],
)
nodejs_image(
name = "nodejs_image",
data = [":prodapp"],
entry_point = "@history-server_runtime_deps//:node_modules/history-server/modules/cli.js",
node_modules = "@history-server_runtime_deps//:node_modules",
# Actions created by this rule are I/O-bound,
# so there is no benefit to running them remotely
tags = ["local"],
templated_args = ["src/prodapp"],
)
container_image(
name = "image",
base = ":nodejs_image",
# Actions created by this rule are I/O-bound,
# so there is no benefit to running them remotely
tags = ["local"],
workdir = "/app/src/nodejs_image.binary.runfiles/angular_bazel_example",
)
================================================
FILE: src/app/BUILD.bazel
================================================
load("@npm_angular_bazel//:index.bzl", "ng_module")
package(default_visibility = ["//:__subpackages__"])
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/animations",
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "app",
srcs = glob(["*.ts"]),
assets = ["app.component.html"],
tsconfig = "//src:tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"//src/app/billing",
"//src/app/compute",
"//src/app/datastore",
"//src/app/functions",
"//src/app/logging",
"//src/app/monitoring",
"//src/app/networking",
"//src/app/registry",
"//src/app/storage",
"//src/app/support",
"//src/app/hello-world",
"//src/app/home",
"//src/app/todos",
"//src/shared/material",
"@npm//@angular/core",
"@npm//@angular/router",
"@npm//@angular/platform-browser",
"@npm//@ngrx/store",
],
)
================================================
FILE: src/app/app-routing.module.ts
================================================
import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
// These are lazy-loaded routes - note that we dynamic-import the modules here
// to avoid having an eager dependency on them.
// IMPORTANT: this array is auto-updated by script/generator
// dont rename the 'routes' variable.
const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () => import('./home/home.ngfactory').then(m => m.HomeModuleNgFactory)
},
{
path: 'hello',
pathMatch: 'full',
loadChildren: () =>
import('./hello-world/hello-world.module.ngfactory').then(m => m.HelloWorldModuleNgFactory)
},
{
path: 'todos',
pathMatch: 'full',
loadChildren: () => import('./todos/todos.module.ngfactory').then(m => m.TodosModuleNgFactory)
},
{
path: 'billing',
pathMatch: 'full',
loadChildren: () =>
import('./billing/billing.module.ngfactory').then(m => m.BillingModuleNgFactory)
},
{
path: 'compute',
pathMatch: 'full',
loadChildren: () =>
import('./compute/compute.module.ngfactory').then(m => m.ComputeModuleNgFactory)
},
{
path: 'datastore',
pathMatch: 'full',
loadChildren: () =>
import('./datastore/datastore.module.ngfactory').then(m => m.DatastoreModuleNgFactory)
},
{
path: 'functions',
pathMatch: 'full',
loadChildren: () =>
import('./functions/functions.module.ngfactory').then(m => m.FunctionsModuleNgFactory)
},
{
path: 'logging',
pathMatch: 'full',
loadChildren: () =>
import('./logging/logging.module.ngfactory').then(m => m.LoggingModuleNgFactory)
},
{
path: 'monitoring',
pathMatch: 'full',
loadChildren: () =>
import('./monitoring/monitoring.module.ngfactory').then(m => m.MonitoringModuleNgFactory)
},
{
path: 'networking',
pathMatch: 'full',
loadChildren: () =>
import('./networking/networking.module.ngfactory').then(m => m.NetworkingModuleNgFactory)
},
{
path: 'registry',
pathMatch: 'full',
loadChildren: () =>
import('./registry/registry.module.ngfactory').then(m => m.RegistryModuleNgFactory)
},
{
path: 'storage',
pathMatch: 'full',
loadChildren: () =>
import('./storage/storage.module.ngfactory').then(m => m.StorageModuleNgFactory)
},
{
path: 'support',
pathMatch: 'full',
loadChildren: () =>
import('./support/support.module.ngfactory').then(m => m.SupportModuleNgFactory)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
// TODO: maybe set this based on devmode?
enableTracing: true,
// preloadingStrategy: PreloadAllModules,
})],
exports: [RouterModule],
})
export class AppRoutingModule {
}
================================================
FILE: src/app/app.component.html
================================================
<nav>
<mat-toolbar class="mat-secondary">
<p class="show-small"><button mat-button (click)="drawer.toggle()">
<mat-icon>menu</mat-icon>
</button></p>
<a mat-button href="http://angular.io" class="hide-small">
<img class="nav-logo" src="/assets/angular-logo-with-text.svg">
</a>
<span class="hide-small">+</span>
<a mat-button href="https://bazel.build">
<img class="nav-logo" src="/assets/bazel-navbar.svg">
</a>
<span class="flex-spacer"></span>
<a mat-button href="https://next.angular.io/guide/bazel">
Documentation
</a>
<a href="https://github.com/angular/angular-bazel-example">
<img class="nav-logo" src="/assets/github-circle-white-transparent.svg">
</a>
</mat-toolbar>
</nav>
<mat-drawer-container>
<mat-drawer #drawer opened mode="side">
<mat-nav-list>
<a mat-list-item routerLink="/"> Home </a>
<a mat-list-item routerLink="/hello"> Hello World </a>
<a mat-list-item routerLink="/todos"> Todos </a>
<a mat-list-item routerLink="/billing"><mat-icon>credit_card</mat-icon> Billing </a>
<a mat-list-item routerLink="/compute"><mat-icon>memory</mat-icon> Compute </a>
<a mat-list-item routerLink="/datastore"><mat-icon>view_agenda</mat-icon> Datastore </a>
<a mat-list-item routerLink="/functions"><mat-icon>functions</mat-icon> Functions </a>
<a mat-list-item routerLink="/logging"><mat-icon>format_align_left</mat-icon> Logging </a>
<a mat-list-item routerLink="/monitoring"><mat-icon>device_unknown</mat-icon> Monitoring </a>
<a mat-list-item routerLink="/networking"><mat-icon>settings_ethernet</mat-icon> Networking </a>
<a mat-list-item routerLink="/registry"><mat-icon>ballot</mat-icon> Registry </a>
<a mat-list-item routerLink="/storage"><mat-icon>folder</mat-icon> Storage </a>
<a mat-list-item routerLink="/support"><mat-icon>headset_mic</mat-icon> Support </a>
</mat-nav-list>
</mat-drawer>
<mat-drawer-content>
<div class="content">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
================================================
FILE: src/app/app.component.ts
================================================
import {Component} from '@angular/core';
@Component({selector: 'app-component', templateUrl: 'app.component.html'})
export class AppComponent {
}
================================================
FILE: src/app/app.module.ts
================================================
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {StoreModule} from '@ngrx/store';
import {MaterialModule} from '../shared/material/material.module';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {BillingModule} from './billing/billing.module';
import {ComputeModule} from './compute/compute.module';
import {DatastoreModule} from './datastore/datastore.module';
import {FunctionsModule} from './functions/functions.module';
import {HomeModule} from './home/home';
import {LoggingModule} from './logging/logging.module';
import {MonitoringModule} from './monitoring/monitoring.module';
import {NetworkingModule} from './networking/networking.module';
import {RegistryModule} from './registry/registry.module';
import {StorageModule} from './storage/storage.module';
import {SupportModule} from './support/support.module';
import {todoReducer} from './todos/reducers/reducers';
@NgModule({
declarations: [AppComponent],
imports: [
AppRoutingModule, BrowserModule, BrowserAnimationsModule, MaterialModule, HomeModule,
StoreModule.forRoot({todoReducer}), BillingModule, ComputeModule, DatastoreModule,
FunctionsModule, LoggingModule, MonitoringModule, NetworkingModule, RegistryModule,
StorageModule, SupportModule
],
exports: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
================================================
FILE: src/app/billing/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@npm_angular_bazel//:index.bzl", "ng_module")
package(default_visibility = ["//:__subpackages__"])
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "billing",
srcs = [
"billing.module.ts",
"index/index.component.ts",
],
assets = [
"index/index.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"//src/app/billing/module0",
"//src/app/billing/module1",
],
)
================================================
FILE: src/app/billing/billing.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {IndexComponent} from './index/index.component';
import {Module0Module} from './module0/module0.module';
import {Module1Module} from './module1/module1.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule, RouterModule.forChild([{path: '', component: IndexComponent}]), Module0Module,
Module1Module
]
})
export class BillingModule {
}
================================================
FILE: src/app/billing/index/index.component.html
================================================
<app-cmp0></app-cmp0>
<app-cmp1></app-cmp1>
<app-cmp2></app-cmp2>
<app-cmp3></app-cmp3>
================================================
FILE: src/app/billing/index/index.component.spec.ts
================================================
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {IndexComponent} from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({declarations: [IndexComponent]}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/billing/index/index.component.ts
================================================
import {Component, OnInit} from '@angular/core';
@Component({selector: 'app-index', templateUrl: './index.component.html', styles: []})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/billing/module0/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp0/cmp0.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp1/cmp1.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module0",
srcs = [
"cmp0/cmp0.component.ts",
"cmp1/cmp1.component.ts",
"module0.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp0/cmp0.component.html",
"cmp1/cmp1.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module0",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/billing/module0/cmp0/cmp0.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/billing/module0/cmp0/cmp0.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/billing/module0/cmp0/cmp0.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp0Component} from './cmp0.component';
describe('Cmp0Component', () => {
let component: Cmp0Component;
let fixture: ComponentFixture<Cmp0Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp0Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp0Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/billing/module0/cmp0/cmp0.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp0',
templateUrl: './cmp0.component.html',
styleUrls: ['./cmp0.component.scss']
})
export class Cmp0Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/billing/module0/cmp1/cmp1.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/billing/module0/cmp1/cmp1.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/billing/module0/cmp1/cmp1.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp1Component} from './cmp1.component';
describe('Cmp1Component', () => {
let component: Cmp1Component;
let fixture: ComponentFixture<Cmp1Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp1Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp1Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/billing/module0/cmp1/cmp1.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp1',
templateUrl: './cmp1.component.html',
styleUrls: ['./cmp1.component.scss']
})
export class Cmp1Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/billing/module0/module0.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp0Component} from './cmp0/cmp0.component';
import {Cmp1Component} from './cmp1/cmp1.component';
@NgModule({
declarations: [Cmp0Component, Cmp1Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp0Component, Cmp1Component]
})
export class Module0Module {
}
================================================
FILE: src/app/billing/module1/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp2/cmp2.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp3/cmp3.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module1",
srcs = [
"cmp2/cmp2.component.ts",
"cmp3/cmp3.component.ts",
"module1.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp2/cmp2.component.html",
"cmp3/cmp3.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module1",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/billing/module1/cmp2/cmp2.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/billing/module1/cmp2/cmp2.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/billing/module1/cmp2/cmp2.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp2Component} from './cmp2.component';
describe('Cmp2Component', () => {
let component: Cmp2Component;
let fixture: ComponentFixture<Cmp2Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp2Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp2Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/billing/module1/cmp2/cmp2.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp2',
templateUrl: './cmp2.component.html',
styleUrls: ['./cmp2.component.scss']
})
export class Cmp2Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/billing/module1/cmp3/cmp3.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/billing/module1/cmp3/cmp3.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/billing/module1/cmp3/cmp3.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp3Component} from './cmp3.component';
describe('Cmp3Component', () => {
let component: Cmp3Component;
let fixture: ComponentFixture<Cmp3Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp3Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp3Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/billing/module1/cmp3/cmp3.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp3',
templateUrl: './cmp3.component.html',
styleUrls: ['./cmp3.component.scss']
})
export class Cmp3Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/billing/module1/module1.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp2Component} from './cmp2/cmp2.component';
import {Cmp3Component} from './cmp3/cmp3.component';
@NgModule({
declarations: [Cmp2Component, Cmp3Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp2Component, Cmp3Component]
})
export class Module1Module {
}
================================================
FILE: src/app/compute/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@npm_angular_bazel//:index.bzl", "ng_module")
package(default_visibility = ["//:__subpackages__"])
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "compute",
srcs = [
"compute.module.ts",
"index/index.component.ts",
],
assets = [
"index/index.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"//src/app/compute/module0",
"//src/app/compute/module1",
],
)
================================================
FILE: src/app/compute/compute.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {IndexComponent} from './index/index.component';
import {Module0Module} from './module0/module0.module';
import {Module1Module} from './module1/module1.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule, RouterModule.forChild([{path: '', component: IndexComponent}]), Module0Module,
Module1Module
]
})
export class ComputeModule {
}
================================================
FILE: src/app/compute/index/index.component.html
================================================
<app-cmp4></app-cmp4>
<app-cmp5></app-cmp5>
<app-cmp6></app-cmp6>
<app-cmp7></app-cmp7>
================================================
FILE: src/app/compute/index/index.component.spec.ts
================================================
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {IndexComponent} from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({declarations: [IndexComponent]}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/compute/index/index.component.ts
================================================
import {Component, OnInit} from '@angular/core';
@Component({selector: 'app-index', templateUrl: './index.component.html', styles: []})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/compute/module0/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp4/cmp4.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp5/cmp5.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module0",
srcs = [
"cmp4/cmp4.component.ts",
"cmp5/cmp5.component.ts",
"module0.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp4/cmp4.component.html",
"cmp5/cmp5.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module0",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/compute/module0/cmp4/cmp4.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Compute</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/compute/module0/cmp4/cmp4.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/compute/module0/cmp4/cmp4.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp4Component} from './cmp4.component';
describe('Cmp4Component', () => {
let component: Cmp4Component;
let fixture: ComponentFixture<Cmp4Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp4Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp4Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/compute/module0/cmp4/cmp4.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp4',
templateUrl: './cmp4.component.html',
styleUrls: ['./cmp4.component.scss']
})
export class Cmp4Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/compute/module0/cmp5/cmp5.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/compute/module0/cmp5/cmp5.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/compute/module0/cmp5/cmp5.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp5Component} from './cmp5.component';
describe('Cmp5Component', () => {
let component: Cmp5Component;
let fixture: ComponentFixture<Cmp5Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp5Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp5Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/compute/module0/cmp5/cmp5.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp5',
templateUrl: './cmp5.component.html',
styleUrls: ['./cmp5.component.scss']
})
export class Cmp5Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/compute/module0/module0.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp4Component} from './cmp4/cmp4.component';
import {Cmp5Component} from './cmp5/cmp5.component';
@NgModule({
declarations: [Cmp4Component, Cmp5Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp4Component, Cmp5Component]
})
export class Module0Module {
}
================================================
FILE: src/app/compute/module1/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp6/cmp6.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp7/cmp7.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module1",
srcs = [
"cmp6/cmp6.component.ts",
"cmp7/cmp7.component.ts",
"module1.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp6/cmp6.component.html",
"cmp7/cmp7.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module1",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/compute/module1/cmp6/cmp6.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/compute/module1/cmp6/cmp6.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/compute/module1/cmp6/cmp6.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp6Component} from './cmp6.component';
describe('Cmp6Component', () => {
let component: Cmp6Component;
let fixture: ComponentFixture<Cmp6Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp6Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp6Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/compute/module1/cmp6/cmp6.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp6',
templateUrl: './cmp6.component.html',
styleUrls: ['./cmp6.component.scss']
})
export class Cmp6Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/compute/module1/cmp7/cmp7.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/compute/module1/cmp7/cmp7.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/compute/module1/cmp7/cmp7.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp7Component} from './cmp7.component';
describe('Cmp7Component', () => {
let component: Cmp7Component;
let fixture: ComponentFixture<Cmp7Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp7Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp7Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/compute/module1/cmp7/cmp7.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp7',
templateUrl: './cmp7.component.html',
styleUrls: ['./cmp7.component.scss']
})
export class Cmp7Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/compute/module1/module1.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp6Component} from './cmp6/cmp6.component';
import {Cmp7Component} from './cmp7/cmp7.component';
@NgModule({
declarations: [Cmp6Component, Cmp7Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp6Component, Cmp7Component]
})
export class Module1Module {
}
================================================
FILE: src/app/datastore/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@npm_angular_bazel//:index.bzl", "ng_module")
package(default_visibility = ["//:__subpackages__"])
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "datastore",
srcs = [
"datastore.module.ts",
"index/index.component.ts",
],
assets = [
"index/index.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"//src/app/datastore/module0",
"//src/app/datastore/module1",
],
)
================================================
FILE: src/app/datastore/datastore.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {IndexComponent} from './index/index.component';
import {Module0Module} from './module0/module0.module';
import {Module1Module} from './module1/module1.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule, RouterModule.forChild([{path: '', component: IndexComponent}]), Module0Module,
Module1Module
]
})
export class DatastoreModule {
}
================================================
FILE: src/app/datastore/index/index.component.html
================================================
<app-cmp8></app-cmp8>
<app-cmp9></app-cmp9>
<app-cmp10></app-cmp10>
<app-cmp11></app-cmp11>
================================================
FILE: src/app/datastore/index/index.component.spec.ts
================================================
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {IndexComponent} from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({declarations: [IndexComponent]}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/datastore/index/index.component.ts
================================================
import {Component, OnInit} from '@angular/core';
@Component({selector: 'app-index', templateUrl: './index.component.html', styles: []})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/datastore/module0/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp8/cmp8.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp9/cmp9.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module0",
srcs = [
"cmp8/cmp8.component.ts",
"cmp9/cmp9.component.ts",
"module0.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp8/cmp8.component.html",
"cmp9/cmp9.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module0",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/datastore/module0/cmp8/cmp8.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Datastore</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/datastore/module0/cmp8/cmp8.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/datastore/module0/cmp8/cmp8.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp8Component} from './cmp8.component';
describe('Cmp8Component', () => {
let component: Cmp8Component;
let fixture: ComponentFixture<Cmp8Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp8Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp8Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/datastore/module0/cmp8/cmp8.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp8',
templateUrl: './cmp8.component.html',
styleUrls: ['./cmp8.component.scss']
})
export class Cmp8Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/datastore/module0/cmp9/cmp9.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/datastore/module0/cmp9/cmp9.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/datastore/module0/cmp9/cmp9.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp9Component} from './cmp9.component';
describe('Cmp9Component', () => {
let component: Cmp9Component;
let fixture: ComponentFixture<Cmp9Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp9Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp9Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/datastore/module0/cmp9/cmp9.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp9',
templateUrl: './cmp9.component.html',
styleUrls: ['./cmp9.component.scss']
})
export class Cmp9Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/datastore/module0/module0.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp8Component} from './cmp8/cmp8.component';
import {Cmp9Component} from './cmp9/cmp9.component';
@NgModule({
declarations: [Cmp8Component, Cmp9Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp8Component, Cmp9Component]
})
export class Module0Module {
}
================================================
FILE: src/app/datastore/module1/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp10/cmp10.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp11/cmp11.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module1",
srcs = [
"cmp10/cmp10.component.ts",
"cmp11/cmp11.component.ts",
"module1.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp10/cmp10.component.html",
"cmp11/cmp11.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_library(
name = "test_lib",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
tsconfig = "//src:tsconfig-test",
deps = [
":module1",
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
"@npm//@types/node",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_web_test_suite(
name = "test",
# do not sort
bootstrap = [
"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
],
browsers = [
"@io_bazel_rules_webtesting//browsers:chromium-local",
"@io_bazel_rules_webtesting//browsers:firefox-local",
],
runtime_deps = [
"//src:initialize_testbed",
],
deps = [
":test_lib",
"//src:rxjs_umd_modules",
],
)
================================================
FILE: src/app/datastore/module1/cmp10/cmp10.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/datastore/module1/cmp10/cmp10.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/datastore/module1/cmp10/cmp10.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp10Component} from './cmp10.component';
describe('Cmp10Component', () => {
let component: Cmp10Component;
let fixture: ComponentFixture<Cmp10Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp10Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp10Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/datastore/module1/cmp10/cmp10.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp10',
templateUrl: './cmp10.component.html',
styleUrls: ['./cmp10.component.scss']
})
export class Cmp10Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/datastore/module1/cmp11/cmp11.component.html
================================================
<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Billing</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Company" formControlName="company">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="First name" formControlName="firstName">
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Last name" formControlName="lastName">
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address" formControlName="address"></textarea>
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
Address is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" *ngIf="!hasUnitNumber">
<div class="col">
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
+ Add C/O, Apt, Suite, Unit
</button>
</div>
</div>
<div class="row" *ngIf="hasUnitNumber">
<div class="col">
<mat-form-field class="full-width">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="City" formControlName="city">
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
City is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
{{ state.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
State is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number"
formControlName="postalCode">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
<mat-radio-button value="free">Free Shipping</mat-radio-button>
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>
================================================
FILE: src/app/datastore/module1/cmp11/cmp11.component.scss
================================================
.full-width {
width: 100%;
}
.shipping-card {
min-width: 120px;
margin: 20px auto;
}
.mat-radio-button {
display: block;
margin: 5px 0;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
================================================
FILE: src/app/datastore/module1/cmp11/cmp11.component.spec.ts
================================================
import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Cmp11Component} from './cmp11.component';
describe('Cmp11Component', () => {
let component: Cmp11Component;
let fixture: ComponentFixture<Cmp11Component>;
beforeEach(async(() => {
TestBed
.configureTestingModule({
declarations: [Cmp11Component],
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Cmp11Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
// Make the test more realistic by doing lots of assertions
for (let i = 0; i < 50; i++) {
it('should compile', () => {
expect(component).toBeTruthy();
});
}
});
================================================
FILE: src/app/datastore/module1/cmp11/cmp11.component.ts
================================================
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-cmp11',
templateUrl: './cmp11.component.html',
styleUrls: ['./cmp11.component.scss']
})
export class Cmp11Component {
addressForm: FormGroup = this.fb.group({
company: null,
firstName: [null, Validators.required],
lastName: [null, Validators.required],
address: [null, Validators.required],
address2: null,
city: [null, Validators.required],
state: [null, Validators.required],
postalCode:
[
null,
Validators.compose(
[Validators.required, Validators.minLength(5), Validators.maxLength(5)])
],
shipping: ['free', Validators.required]
});
hasUnitNumber = false;
states = [
{name: 'Alabama', abbreviation: 'AL'},
{name: 'Alaska', abbreviation: 'AK'},
{name: 'American Samoa', abbreviation: 'AS'},
{name: 'Arizona', abbreviation: 'AZ'},
{name: 'Arkansas', abbreviation: 'AR'},
{name: 'California', abbreviation: 'CA'},
{name: 'Colorado', abbreviation: 'CO'},
{name: 'Connecticut', abbreviation: 'CT'},
{name: 'Delaware', abbreviation: 'DE'},
{name: 'District Of Columbia', abbreviation: 'DC'},
{name: 'Federated States Of Micronesia', abbreviation: 'FM'},
{name: 'Florida', abbreviation: 'FL'},
{name: 'Georgia', abbreviation: 'GA'},
{name: 'Guam', abbreviation: 'GU'},
{name: 'Hawaii', abbreviation: 'HI'},
{name: 'Idaho', abbreviation: 'ID'},
{name: 'Illinois', abbreviation: 'IL'},
{name: 'Indiana', abbreviation: 'IN'},
{name: 'Iowa', abbreviation: 'IA'},
{name: 'Kansas', abbreviation: 'KS'},
{name: 'Kentucky', abbreviation: 'KY'},
{name: 'Louisiana', abbreviation: 'LA'},
{name: 'Maine', abbreviation: 'ME'},
{name: 'Marshall Islands', abbreviation: 'MH'},
{name: 'Maryland', abbreviation: 'MD'},
{name: 'Massachusetts', abbreviation: 'MA'},
{name: 'Michigan', abbreviation: 'MI'},
{name: 'Minnesota', abbreviation: 'MN'},
{name: 'Mississippi', abbreviation: 'MS'},
{name: 'Missouri', abbreviation: 'MO'},
{name: 'Montana', abbreviation: 'MT'},
{name: 'Nebraska', abbreviation: 'NE'},
{name: 'Nevada', abbreviation: 'NV'},
{name: 'New Hampshire', abbreviation: 'NH'},
{name: 'New Jersey', abbreviation: 'NJ'},
{name: 'New Mexico', abbreviation: 'NM'},
{name: 'New York', abbreviation: 'NY'},
{name: 'North Carolina', abbreviation: 'NC'},
{name: 'North Dakota', abbreviation: 'ND'},
{name: 'Northern Mariana Islands', abbreviation: 'MP'},
{name: 'Ohio', abbreviation: 'OH'},
{name: 'Oklahoma', abbreviation: 'OK'},
{name: 'Oregon', abbreviation: 'OR'},
{name: 'Palau', abbreviation: 'PW'},
{name: 'Pennsylvania', abbreviation: 'PA'},
{name: 'Puerto Rico', abbreviation: 'PR'},
{name: 'Rhode Island', abbreviation: 'RI'},
{name: 'South Carolina', abbreviation: 'SC'},
{name: 'South Dakota', abbreviation: 'SD'},
{name: 'Tennessee', abbreviation: 'TN'},
{name: 'Texas', abbreviation: 'TX'},
{name: 'Utah', abbreviation: 'UT'},
{name: 'Vermont', abbreviation: 'VT'},
{name: 'Virgin Islands', abbreviation: 'VI'},
{name: 'Virginia', abbreviation: 'VA'},
{name: 'Washington', abbreviation: 'WA'},
{name: 'West Virginia', abbreviation: 'WV'},
{name: 'Wisconsin', abbreviation: 'WI'},
{name: 'Wyoming', abbreviation: 'WY'}
];
constructor(private fb: FormBuilder) {}
onSubmit() {
alert('Thanks!');
}
}
================================================
FILE: src/app/datastore/module1/module1.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '../../../shared/material/material.module';
import {Cmp10Component} from './cmp10/cmp10.component';
import {Cmp11Component} from './cmp11/cmp11.component';
@NgModule({
declarations: [Cmp10Component, Cmp11Component],
imports: [CommonModule, ReactiveFormsModule, MaterialModule],
exports: [Cmp10Component, Cmp11Component]
})
export class Module1Module {
}
================================================
FILE: src/app/functions/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@npm_angular_bazel//:index.bzl", "ng_module")
package(default_visibility = ["//:__subpackages__"])
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "functions",
srcs = [
"functions.module.ts",
"index/index.component.ts",
],
assets = [
"index/index.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = NG_FACTORY_ADDED_IMPORTS + [
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//@angular/router",
"//src/app/functions/module0",
"//src/app/functions/module1",
],
)
================================================
FILE: src/app/functions/functions.module.ts
================================================
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {IndexComponent} from './index/index.component';
import {Module0Module} from './module0/module0.module';
import {Module1Module} from './module1/module1.module';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule, RouterModule.forChild([{path: '', component: IndexComponent}]), Module0Module,
Module1Module
]
})
export class FunctionsModule {
}
================================================
FILE: src/app/functions/index/index.component.html
================================================
<app-cmp12></app-cmp12>
<app-cmp13></app-cmp13>
<app-cmp14></app-cmp14>
<app-cmp15></app-cmp15>
================================================
FILE: src/app/functions/index/index.component.spec.ts
================================================
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {IndexComponent} from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({declarations: [IndexComponent]}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: src/app/functions/index/index.component.ts
================================================
import {Component, OnInit} from '@angular/core';
@Component({selector: 'app-index', templateUrl: './index.component.html', styles: []})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
================================================
FILE: src/app/functions/module0/BUILD.bazel
================================================
# Generated BUILD file, see /tools/generator
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_angular_bazel//:index.bzl", "ng_module")
load("@npm_bazel_typescript//:defs.bzl", "ts_library")
load("//tools:defaults.bzl", "ts_web_test_suite")
package(default_visibility = ["//:__subpackages__"])
sass_binary(
name = "module0_styles",
src = "cmp12/cmp12.component.scss",
)
sass_binary(
name = "module1_styles",
src = "cmp13/cmp13.component.scss",
)
# We don't import from these, but the generated ngfactory code will
NG_FACTORY_ADDED_IMPORTS = [
"@npm//@angular/cdk",
"@npm//@angular/material",
"@npm//@angular/forms",
]
ng_module(
name = "module0",
srcs = [
"cmp12/cmp12.component.ts",
"cmp13/cmp13.component.ts",
"module0.module.ts",
],
assets = [
":module0_styles",
":module1_styles",
"cmp12/cmp12.component.html",
"cmp13/cmp13.component.html",
],
tsconfig = "//src:tsconfig.json",
deps = [
"@npm//@angular/common",
"@npm//@angular/core",
"//src/shared/material",
] + NG_FACTORY_ADDED_IMPORTS,
)
ts_l
gitextract_yf405e50/
├── .bazelignore
├── .bazelrc
├── .circleci/
│ ├── bazel.rc
│ └── config.yml
├── .clang-format
├── .firebaserc
├── .gitignore
├── BUILD.bazel
├── LICENSE
├── README.md
├── WORKSPACE
├── angular-metadata.tsconfig.json
├── angular.json
├── deployment.yaml
├── e2e/
│ ├── BUILD.bazel
│ ├── protractor.on-prepare.js
│ └── src/
│ ├── app.e2e-spec.ts
│ └── app.po.ts
├── firebase.json
├── package.json
├── renovate.json
├── src/
│ ├── BUILD.bazel
│ ├── app/
│ │ ├── BUILD.bazel
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── billing/
│ │ │ ├── BUILD.bazel
│ │ │ ├── billing.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp0/
│ │ │ │ │ ├── cmp0.component.html
│ │ │ │ │ ├── cmp0.component.scss
│ │ │ │ │ ├── cmp0.component.spec.ts
│ │ │ │ │ └── cmp0.component.ts
│ │ │ │ ├── cmp1/
│ │ │ │ │ ├── cmp1.component.html
│ │ │ │ │ ├── cmp1.component.scss
│ │ │ │ │ ├── cmp1.component.spec.ts
│ │ │ │ │ └── cmp1.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp2/
│ │ │ │ ├── cmp2.component.html
│ │ │ │ ├── cmp2.component.scss
│ │ │ │ ├── cmp2.component.spec.ts
│ │ │ │ └── cmp2.component.ts
│ │ │ ├── cmp3/
│ │ │ │ ├── cmp3.component.html
│ │ │ │ ├── cmp3.component.scss
│ │ │ │ ├── cmp3.component.spec.ts
│ │ │ │ └── cmp3.component.ts
│ │ │ └── module1.module.ts
│ │ ├── compute/
│ │ │ ├── BUILD.bazel
│ │ │ ├── compute.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp4/
│ │ │ │ │ ├── cmp4.component.html
│ │ │ │ │ ├── cmp4.component.scss
│ │ │ │ │ ├── cmp4.component.spec.ts
│ │ │ │ │ └── cmp4.component.ts
│ │ │ │ ├── cmp5/
│ │ │ │ │ ├── cmp5.component.html
│ │ │ │ │ ├── cmp5.component.scss
│ │ │ │ │ ├── cmp5.component.spec.ts
│ │ │ │ │ └── cmp5.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp6/
│ │ │ │ ├── cmp6.component.html
│ │ │ │ ├── cmp6.component.scss
│ │ │ │ ├── cmp6.component.spec.ts
│ │ │ │ └── cmp6.component.ts
│ │ │ ├── cmp7/
│ │ │ │ ├── cmp7.component.html
│ │ │ │ ├── cmp7.component.scss
│ │ │ │ ├── cmp7.component.spec.ts
│ │ │ │ └── cmp7.component.ts
│ │ │ └── module1.module.ts
│ │ ├── datastore/
│ │ │ ├── BUILD.bazel
│ │ │ ├── datastore.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp8/
│ │ │ │ │ ├── cmp8.component.html
│ │ │ │ │ ├── cmp8.component.scss
│ │ │ │ │ ├── cmp8.component.spec.ts
│ │ │ │ │ └── cmp8.component.ts
│ │ │ │ ├── cmp9/
│ │ │ │ │ ├── cmp9.component.html
│ │ │ │ │ ├── cmp9.component.scss
│ │ │ │ │ ├── cmp9.component.spec.ts
│ │ │ │ │ └── cmp9.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp10/
│ │ │ │ ├── cmp10.component.html
│ │ │ │ ├── cmp10.component.scss
│ │ │ │ ├── cmp10.component.spec.ts
│ │ │ │ └── cmp10.component.ts
│ │ │ ├── cmp11/
│ │ │ │ ├── cmp11.component.html
│ │ │ │ ├── cmp11.component.scss
│ │ │ │ ├── cmp11.component.spec.ts
│ │ │ │ └── cmp11.component.ts
│ │ │ └── module1.module.ts
│ │ ├── functions/
│ │ │ ├── BUILD.bazel
│ │ │ ├── functions.module.ts
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp12/
│ │ │ │ │ ├── cmp12.component.html
│ │ │ │ │ ├── cmp12.component.scss
│ │ │ │ │ ├── cmp12.component.spec.ts
│ │ │ │ │ └── cmp12.component.ts
│ │ │ │ ├── cmp13/
│ │ │ │ │ ├── cmp13.component.html
│ │ │ │ │ ├── cmp13.component.scss
│ │ │ │ │ ├── cmp13.component.spec.ts
│ │ │ │ │ └── cmp13.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp14/
│ │ │ │ ├── cmp14.component.html
│ │ │ │ ├── cmp14.component.scss
│ │ │ │ ├── cmp14.component.spec.ts
│ │ │ │ └── cmp14.component.ts
│ │ │ ├── cmp15/
│ │ │ │ ├── cmp15.component.html
│ │ │ │ ├── cmp15.component.scss
│ │ │ │ ├── cmp15.component.spec.ts
│ │ │ │ └── cmp15.component.ts
│ │ │ └── module1.module.ts
│ │ ├── hello-world/
│ │ │ ├── BUILD.bazel
│ │ │ ├── hello-world.component.html
│ │ │ ├── hello-world.component.scss
│ │ │ ├── hello-world.component.spec.ts
│ │ │ ├── hello-world.component.ts
│ │ │ └── hello-world.module.ts
│ │ ├── home/
│ │ │ ├── BUILD.bazel
│ │ │ ├── home.html
│ │ │ └── home.ts
│ │ ├── logging/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── logging.module.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp16/
│ │ │ │ │ ├── cmp16.component.html
│ │ │ │ │ ├── cmp16.component.scss
│ │ │ │ │ ├── cmp16.component.spec.ts
│ │ │ │ │ └── cmp16.component.ts
│ │ │ │ ├── cmp17/
│ │ │ │ │ ├── cmp17.component.html
│ │ │ │ │ ├── cmp17.component.scss
│ │ │ │ │ ├── cmp17.component.spec.ts
│ │ │ │ │ └── cmp17.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ └── module1/
│ │ │ ├── BUILD.bazel
│ │ │ ├── cmp18/
│ │ │ │ ├── cmp18.component.html
│ │ │ │ ├── cmp18.component.scss
│ │ │ │ ├── cmp18.component.spec.ts
│ │ │ │ └── cmp18.component.ts
│ │ │ ├── cmp19/
│ │ │ │ ├── cmp19.component.html
│ │ │ │ ├── cmp19.component.scss
│ │ │ │ ├── cmp19.component.spec.ts
│ │ │ │ └── cmp19.component.ts
│ │ │ └── module1.module.ts
│ │ ├── monitoring/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp20/
│ │ │ │ │ ├── cmp20.component.html
│ │ │ │ │ ├── cmp20.component.scss
│ │ │ │ │ ├── cmp20.component.spec.ts
│ │ │ │ │ └── cmp20.component.ts
│ │ │ │ ├── cmp21/
│ │ │ │ │ ├── cmp21.component.html
│ │ │ │ │ ├── cmp21.component.scss
│ │ │ │ │ ├── cmp21.component.spec.ts
│ │ │ │ │ └── cmp21.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp22/
│ │ │ │ │ ├── cmp22.component.html
│ │ │ │ │ ├── cmp22.component.scss
│ │ │ │ │ ├── cmp22.component.spec.ts
│ │ │ │ │ └── cmp22.component.ts
│ │ │ │ ├── cmp23/
│ │ │ │ │ ├── cmp23.component.html
│ │ │ │ │ ├── cmp23.component.scss
│ │ │ │ │ ├── cmp23.component.spec.ts
│ │ │ │ │ └── cmp23.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── monitoring.module.ts
│ │ ├── networking/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp24/
│ │ │ │ │ ├── cmp24.component.html
│ │ │ │ │ ├── cmp24.component.scss
│ │ │ │ │ ├── cmp24.component.spec.ts
│ │ │ │ │ └── cmp24.component.ts
│ │ │ │ ├── cmp25/
│ │ │ │ │ ├── cmp25.component.html
│ │ │ │ │ ├── cmp25.component.scss
│ │ │ │ │ ├── cmp25.component.spec.ts
│ │ │ │ │ └── cmp25.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp26/
│ │ │ │ │ ├── cmp26.component.html
│ │ │ │ │ ├── cmp26.component.scss
│ │ │ │ │ ├── cmp26.component.spec.ts
│ │ │ │ │ └── cmp26.component.ts
│ │ │ │ ├── cmp27/
│ │ │ │ │ ├── cmp27.component.html
│ │ │ │ │ ├── cmp27.component.scss
│ │ │ │ │ ├── cmp27.component.spec.ts
│ │ │ │ │ └── cmp27.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── networking.module.ts
│ │ ├── registry/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp28/
│ │ │ │ │ ├── cmp28.component.html
│ │ │ │ │ ├── cmp28.component.scss
│ │ │ │ │ ├── cmp28.component.spec.ts
│ │ │ │ │ └── cmp28.component.ts
│ │ │ │ ├── cmp29/
│ │ │ │ │ ├── cmp29.component.html
│ │ │ │ │ ├── cmp29.component.scss
│ │ │ │ │ ├── cmp29.component.spec.ts
│ │ │ │ │ └── cmp29.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp30/
│ │ │ │ │ ├── cmp30.component.html
│ │ │ │ │ ├── cmp30.component.scss
│ │ │ │ │ ├── cmp30.component.spec.ts
│ │ │ │ │ └── cmp30.component.ts
│ │ │ │ ├── cmp31/
│ │ │ │ │ ├── cmp31.component.html
│ │ │ │ │ ├── cmp31.component.scss
│ │ │ │ │ ├── cmp31.component.spec.ts
│ │ │ │ │ └── cmp31.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── registry.module.ts
│ │ ├── storage/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp32/
│ │ │ │ │ ├── cmp32.component.html
│ │ │ │ │ ├── cmp32.component.scss
│ │ │ │ │ ├── cmp32.component.spec.ts
│ │ │ │ │ └── cmp32.component.ts
│ │ │ │ ├── cmp33/
│ │ │ │ │ ├── cmp33.component.html
│ │ │ │ │ ├── cmp33.component.scss
│ │ │ │ │ ├── cmp33.component.spec.ts
│ │ │ │ │ └── cmp33.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp34/
│ │ │ │ │ ├── cmp34.component.html
│ │ │ │ │ ├── cmp34.component.scss
│ │ │ │ │ ├── cmp34.component.spec.ts
│ │ │ │ │ └── cmp34.component.ts
│ │ │ │ ├── cmp35/
│ │ │ │ │ ├── cmp35.component.html
│ │ │ │ │ ├── cmp35.component.scss
│ │ │ │ │ ├── cmp35.component.spec.ts
│ │ │ │ │ └── cmp35.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── storage.module.ts
│ │ ├── support/
│ │ │ ├── BUILD.bazel
│ │ │ ├── index/
│ │ │ │ ├── index.component.html
│ │ │ │ ├── index.component.spec.ts
│ │ │ │ └── index.component.ts
│ │ │ ├── module0/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp36/
│ │ │ │ │ ├── cmp36.component.html
│ │ │ │ │ ├── cmp36.component.scss
│ │ │ │ │ ├── cmp36.component.spec.ts
│ │ │ │ │ └── cmp36.component.ts
│ │ │ │ ├── cmp37/
│ │ │ │ │ ├── cmp37.component.html
│ │ │ │ │ ├── cmp37.component.scss
│ │ │ │ │ ├── cmp37.component.spec.ts
│ │ │ │ │ └── cmp37.component.ts
│ │ │ │ └── module0.module.ts
│ │ │ ├── module1/
│ │ │ │ ├── BUILD.bazel
│ │ │ │ ├── cmp38/
│ │ │ │ │ ├── cmp38.component.html
│ │ │ │ │ ├── cmp38.component.scss
│ │ │ │ │ ├── cmp38.component.spec.ts
│ │ │ │ │ └── cmp38.component.ts
│ │ │ │ ├── cmp39/
│ │ │ │ │ ├── cmp39.component.html
│ │ │ │ │ ├── cmp39.component.scss
│ │ │ │ │ ├── cmp39.component.spec.ts
│ │ │ │ │ └── cmp39.component.ts
│ │ │ │ └── module1.module.ts
│ │ │ └── support.module.ts
│ │ └── todos/
│ │ ├── BUILD.bazel
│ │ ├── reducers/
│ │ │ ├── BUILD.bazel
│ │ │ └── reducers.ts
│ │ ├── todos.component.html
│ │ ├── todos.component.scss
│ │ ├── todos.component.ts
│ │ └── todos.module.ts
│ ├── assets/
│ │ ├── BUILD.bazel
│ │ └── landing.css
│ ├── example/
│ │ ├── BUILD.bazel
│ │ └── index.html
│ ├── index.html
│ ├── initialize_testbed.ts
│ ├── lib/
│ │ └── shorten/
│ │ ├── BUILD.bazel
│ │ ├── README.md
│ │ └── shorten.ts
│ ├── main.dev.ts
│ ├── main.prod.ts
│ ├── main.ts
│ ├── rxjs_shims.js
│ ├── shared/
│ │ └── material/
│ │ ├── BUILD.bazel
│ │ └── material.module.ts
│ ├── styles.scss
│ ├── tsconfig-test.json
│ └── tsconfig.json
├── third_party/
│ └── github.com/
│ └── bazelbuild/
│ └── bazel-toolchains/
│ └── bazelrc/
│ └── bazel-0.24.0.bazelrc
└── tools/
├── BUILD.bazel
├── defaults.bzl
└── generator/
├── index.js
├── src/
│ ├── build-file.js
│ ├── clean.js
│ ├── create-feature-module.js
│ ├── feature-names.js
│ ├── generate.js
│ ├── ng-module.js
│ ├── ng.js
│ ├── reference-components.js
│ └── utils.js
└── templates/
├── dashboard/
│ ├── component.html
│ ├── component.scss
│ ├── component.spec.ts
│ └── component.ts
├── form/
│ ├── component.html
│ ├── component.scss
│ ├── component.spec.ts
│ └── component.ts
└── table/
├── component.html
├── component.scss
├── component.spec.ts
└── component.ts
SYMBOL INDEX (224 symbols across 95 files)
FILE: e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | async navigateTo() {
method waitForElement (line 9) | async waitForElement(el, timeout = 10000) {
method getParagraphText (line 15) | async getParagraphText() {
method typeInInput (line 19) | async typeInInput(s: string) {
FILE: src/app/app-routing.module.ts
class AppRoutingModule (line 96) | class AppRoutingModule {
FILE: src/app/app.component.ts
class AppComponent (line 4) | class AppComponent {
FILE: src/app/app.module.ts
class AppModule (line 35) | class AppModule {
FILE: src/app/billing/billing.module.ts
class BillingModule (line 16) | class BillingModule {
FILE: src/app/billing/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/billing/module0/cmp0/cmp0.component.ts
class Cmp0Component (line 9) | class Cmp0Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/billing/module0/cmp1/cmp1.component.ts
class Cmp1Component (line 9) | class Cmp1Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/billing/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/billing/module1/cmp2/cmp2.component.ts
class Cmp2Component (line 9) | class Cmp2Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/billing/module1/cmp3/cmp3.component.ts
class Cmp3Component (line 9) | class Cmp3Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/billing/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/compute/compute.module.ts
class ComputeModule (line 16) | class ComputeModule {
FILE: src/app/compute/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/compute/module0/cmp4/cmp4.component.ts
class Cmp4Component (line 9) | class Cmp4Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/compute/module0/cmp5/cmp5.component.ts
class Cmp5Component (line 9) | class Cmp5Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/compute/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/compute/module1/cmp6/cmp6.component.ts
class Cmp6Component (line 9) | class Cmp6Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/compute/module1/cmp7/cmp7.component.ts
class Cmp7Component (line 9) | class Cmp7Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/compute/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/datastore/datastore.module.ts
class DatastoreModule (line 16) | class DatastoreModule {
FILE: src/app/datastore/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/datastore/module0/cmp8/cmp8.component.ts
class Cmp8Component (line 9) | class Cmp8Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/datastore/module0/cmp9/cmp9.component.ts
class Cmp9Component (line 9) | class Cmp9Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/datastore/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/datastore/module1/cmp10/cmp10.component.ts
class Cmp10Component (line 9) | class Cmp10Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/datastore/module1/cmp11/cmp11.component.ts
class Cmp11Component (line 9) | class Cmp11Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/datastore/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/functions/functions.module.ts
class FunctionsModule (line 16) | class FunctionsModule {
FILE: src/app/functions/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/functions/module0/cmp12/cmp12.component.ts
class Cmp12Component (line 9) | class Cmp12Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/functions/module0/cmp13/cmp13.component.ts
class Cmp13Component (line 9) | class Cmp13Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/functions/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/functions/module1/cmp14/cmp14.component.ts
class Cmp14Component (line 9) | class Cmp14Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/functions/module1/cmp15/cmp15.component.ts
class Cmp15Component (line 9) | class Cmp15Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/functions/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/hello-world/hello-world.component.ts
class HelloWorldComponent (line 10) | class HelloWorldComponent {
FILE: src/app/hello-world/hello-world.module.ts
class HelloWorldModule (line 16) | class HelloWorldModule {
FILE: src/app/home/home.ts
class Home (line 8) | class Home {
class HomeModule (line 17) | class HomeModule {
FILE: src/app/logging/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/logging/logging.module.ts
class LoggingModule (line 16) | class LoggingModule {
FILE: src/app/logging/module0/cmp16/cmp16.component.ts
class Cmp16Component (line 9) | class Cmp16Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/logging/module0/cmp17/cmp17.component.ts
class Cmp17Component (line 9) | class Cmp17Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/logging/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/logging/module1/cmp18/cmp18.component.ts
class Cmp18Component (line 9) | class Cmp18Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/logging/module1/cmp19/cmp19.component.ts
class Cmp19Component (line 9) | class Cmp19Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/logging/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/monitoring/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/monitoring/module0/cmp20/cmp20.component.ts
class Cmp20Component (line 9) | class Cmp20Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/monitoring/module0/cmp21/cmp21.component.ts
class Cmp21Component (line 9) | class Cmp21Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/monitoring/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/monitoring/module1/cmp22/cmp22.component.ts
class Cmp22Component (line 9) | class Cmp22Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/monitoring/module1/cmp23/cmp23.component.ts
class Cmp23Component (line 9) | class Cmp23Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/monitoring/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/monitoring/monitoring.module.ts
class MonitoringModule (line 16) | class MonitoringModule {
FILE: src/app/networking/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/networking/module0/cmp24/cmp24.component.ts
class Cmp24Component (line 9) | class Cmp24Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/networking/module0/cmp25/cmp25.component.ts
class Cmp25Component (line 9) | class Cmp25Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/networking/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/networking/module1/cmp26/cmp26.component.ts
class Cmp26Component (line 9) | class Cmp26Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/networking/module1/cmp27/cmp27.component.ts
class Cmp27Component (line 9) | class Cmp27Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/networking/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/networking/networking.module.ts
class NetworkingModule (line 16) | class NetworkingModule {
FILE: src/app/registry/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/registry/module0/cmp28/cmp28.component.ts
class Cmp28Component (line 9) | class Cmp28Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/registry/module0/cmp29/cmp29.component.ts
class Cmp29Component (line 9) | class Cmp29Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/registry/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/registry/module1/cmp30/cmp30.component.ts
class Cmp30Component (line 9) | class Cmp30Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/registry/module1/cmp31/cmp31.component.ts
class Cmp31Component (line 9) | class Cmp31Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/registry/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/registry/registry.module.ts
class RegistryModule (line 16) | class RegistryModule {
FILE: src/app/storage/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/storage/module0/cmp32/cmp32.component.ts
class Cmp32Component (line 9) | class Cmp32Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/storage/module0/cmp33/cmp33.component.ts
class Cmp33Component (line 9) | class Cmp33Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/storage/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/storage/module1/cmp34/cmp34.component.ts
class Cmp34Component (line 9) | class Cmp34Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/storage/module1/cmp35/cmp35.component.ts
class Cmp35Component (line 9) | class Cmp35Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/storage/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/storage/storage.module.ts
class StorageModule (line 16) | class StorageModule {
FILE: src/app/support/index/index.component.ts
class IndexComponent (line 4) | class IndexComponent implements OnInit {
method constructor (line 5) | constructor() {}
method ngOnInit (line 7) | ngOnInit() {}
FILE: src/app/support/module0/cmp36/cmp36.component.ts
class Cmp36Component (line 9) | class Cmp36Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/support/module0/cmp37/cmp37.component.ts
class Cmp37Component (line 9) | class Cmp37Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/support/module0/module0.module.ts
class Module0Module (line 15) | class Module0Module {
FILE: src/app/support/module1/cmp38/cmp38.component.ts
class Cmp38Component (line 9) | class Cmp38Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/support/module1/cmp39/cmp39.component.ts
class Cmp39Component (line 9) | class Cmp39Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: src/app/support/module1/module1.module.ts
class Module1Module (line 15) | class Module1Module {
FILE: src/app/support/support.module.ts
class SupportModule (line 16) | class SupportModule {
FILE: src/app/todos/reducers/reducers.ts
constant ADD_TODO (line 3) | const ADD_TODO = 'ADD_TODO';
constant DELETE_TODO (line 4) | const DELETE_TODO = 'DELETE_TODO';
constant UPDATE_TODO (line 5) | const UPDATE_TODO = 'UPDATE_TODO';
constant TOGGLE_DONE (line 6) | const TOGGLE_DONE = 'TOGGLE_DONE';
type ActionWithPayload (line 8) | interface ActionWithPayload<T> extends Action {
type TodoPayload (line 12) | interface TodoPayload {
function todoReducer (line 19) | function todoReducer(state = [], action: ActionWithPayload<TodoPayload>) {
FILE: src/app/todos/todos.component.ts
class TodosComponent (line 12) | class TodosComponent implements OnInit {
method constructor (line 18) | constructor(private store: Store<any>) {}
method ngOnInit (line 20) | ngOnInit() {
method addTodo (line 24) | addTodo(value) {
method deleteTodo (line 29) | deleteTodo(index) {
method editTodo (line 33) | editTodo(todo, index) {
method cancelEdit (line 39) | cancelEdit() {
method updateTodo (line 45) | updateTodo(updatedTodo) {
method toggleDone (line 53) | toggleDone(todo, index) {
FILE: src/app/todos/todos.module.ts
class TodosModule (line 17) | class TodosModule {
FILE: src/lib/shorten/shorten.ts
function shorten (line 1) | function shorten(s: string, length: number) {
FILE: src/shared/material/material.module.ts
class MaterialModule (line 40) | class MaterialModule {
FILE: tools/generator/templates/dashboard/component.ts
class __Name__Component (line 11) | class __Name__Component {
method constructor (line 28) | constructor(private breakpointObserver: BreakpointObserver) {}
FILE: tools/generator/templates/form/component.ts
class __Name__Component (line 9) | class __Name__Component {
method constructor (line 91) | constructor(private fb: FormBuilder) {}
method onSubmit (line 93) | onSubmit() {
FILE: tools/generator/templates/table/component.ts
type UserData (line 6) | interface UserData {
constant COLORS (line 14) | const COLORS: string[] = [
constant NAMES (line 18) | const NAMES: string[] = [
class __Name__Component (line 31) | class __Name__Component implements OnInit {
method constructor (line 38) | constructor() {
method ngOnInit (line 46) | ngOnInit() {
method applyFilter (line 51) | applyFilter(filterValue: string) {
function createNewUser (line 61) | function createNewUser(id: number): UserData {
Condensed preview — 336 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (646K chars).
[
{
"path": ".bazelignore",
"chars": 13,
"preview": "node_modules\n"
},
{
"path": ".bazelrc",
"chars": 3325,
"preview": "# Make TypeScript and Angular compilation fast, by keeping a few copies of the\n# compiler running as daemons, and cache "
},
{
"path": ".circleci/bazel.rc",
"chars": 1394,
"preview": "# These options are enabled when running on CI\n# We do this by copying this file to /etc/bazel.bazelrc at the start of t"
},
{
"path": ".circleci/config.yml",
"chars": 5499,
"preview": "# This file configures the build at https://circleci.com/gh/alexeagle/angular-bazel-example\n# Complete documentation is "
},
{
"path": ".clang-format",
"chars": 73,
"preview": "Language: JavaScript\nBasedOnStyle: Google\nColumnLimit: 100\n"
},
{
"path": ".firebaserc",
"chars": 58,
"preview": "{\n \"projects\": {\n \"default\": \"bazel-angular-io\"\n }\n}\n"
},
{
"path": ".gitignore",
"chars": 62,
"preview": "node_modules\nbazel-out\ndist\n.firebase\n.DS_Store\n.bazelrc.user\n"
},
{
"path": "BUILD.bazel",
"chars": 469,
"preview": "load(\"@k8s_deploy//:defaults.bzl\", \"k8s_deploy\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n# ts_library and"
},
{
"path": "LICENSE",
"chars": 1096,
"preview": "The MIT License\n\nCopyright (c) 2014-2017 Google, Inc. http://angular.io\n\nPermission is hereby granted, free of charge, t"
},
{
"path": "README.md",
"chars": 7562,
"preview": "[](https://circleci.com/gh/angular/angul"
},
{
"path": "WORKSPACE",
"chars": 5113,
"preview": "# The WORKSPACE file tells Bazel that this directory is a \"workspace\", which is like a project root.\n# The content of th"
},
{
"path": "angular-metadata.tsconfig.json",
"chars": 1262,
"preview": "// WORKAROUND https://github.com/angular/angular/issues/18810\n//\n// This file is required to run ngc on 3rd party librar"
},
{
"path": "angular.json",
"chars": 2395,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "deployment.yaml",
"chars": 429,
"preview": "# Configuration for deployment to kubernetes\n\napiVersion: apps/v1beta1\nkind: Deployment\nmetadata:\n name: angular-bazel-"
},
{
"path": "e2e/BUILD.bazel",
"chars": 669,
"preview": "load(\"@npm_bazel_protractor//:index.bzl\", \"protractor_web_test_suite\")\nload(\"@npm_bazel_typescript//:defs.bzl\", \"ts_libr"
},
{
"path": "e2e/protractor.on-prepare.js",
"chars": 1320,
"preview": "// The function exported from this file is used by the protractor_web_test_suite.\n// It is passed to the `onPrepare` con"
},
{
"path": "e2e/src/app.e2e-spec.ts",
"chars": 437,
"preview": "import { AppPage } from './app.po';\n\ndescribe('angular example application', () => {\n let page: AppPage;\n\n beforeEach("
},
{
"path": "e2e/src/app.po.ts",
"chars": 603,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n async navigateTo() {\n await browser.get("
},
{
"path": "firebase.json",
"chars": 267,
"preview": "{\n \"hosting\": {\n \"public\": \"dist/bin/src/prodapp\",\n \"ignore\": [\n \"firebase.json\",\n \"**/.*\",\n \"**/n"
},
{
"path": "package.json",
"chars": 2961,
"preview": "{\n \"name\": \"angular-bazel-example\",\n \"private\": true,\n \"description\": \"Demo of building Angular apps with Bazel"
},
{
"path": "renovate.json",
"chars": 381,
"preview": "{\n \"extends\": [\n \"config:base\"\n ],\n \"pinVersions\": false,\n \"packageRules\": [\n {\n \"packagePatterns\": [\n "
},
{
"path": "src/BUILD.bazel",
"chars": 6555,
"preview": "load(\"@build_bazel_rules_nodejs//:defs.bzl\", \"history_server\", \"rollup_bundle\")\nload(\"@build_bazel_rules_nodejs//interna"
},
{
"path": "src/app/BUILD.bazel",
"chars": 1061,
"preview": "load(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n# We don't im"
},
{
"path": "src/app/app-routing.module.ts",
"chars": 2776,
"preview": "import {NgModule} from '@angular/core';\nimport {PreloadAllModules, RouterModule, Routes} from '@angular/router';\n\n// The"
},
{
"path": "src/app/app.component.html",
"chars": 2202,
"preview": "<nav>\n <mat-toolbar class=\"mat-secondary\">\n <p class=\"show-small\"><button mat-button (click)=\"drawer.toggle()\">\n "
},
{
"path": "src/app/app.component.ts",
"chars": 147,
"preview": "import {Component} from '@angular/core';\n\n@Component({selector: 'app-component', templateUrl: 'app.component.html'})\nexp"
},
{
"path": "src/app/app.module.ts",
"chars": 1522,
"preview": "\nimport {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {BrowserAnimati"
},
{
"path": "src/app/billing/BUILD.bazel",
"chars": 773,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/billing/billing.module.ts",
"chars": 514,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/billing/index/index.component.html",
"chars": 87,
"preview": "<app-cmp0></app-cmp0>\n<app-cmp1></app-cmp1>\n<app-cmp2></app-cmp2>\n<app-cmp3></app-cmp3>"
},
{
"path": "src/app/billing/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/billing/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/billing/module0/BUILD.bazel",
"chars": 2025,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/billing/module0/cmp0/cmp0.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/billing/module0/cmp0/cmp0.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/billing/module0/cmp0/cmp0.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/billing/module0/cmp0/cmp0.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/billing/module0/cmp1/cmp1.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/billing/module0/cmp1/cmp1.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/billing/module0/cmp1/cmp1.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/billing/module0/cmp1/cmp1.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/billing/module0/module0.module.ts",
"chars": 520,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/billing/module1/BUILD.bazel",
"chars": 2025,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/billing/module1/cmp2/cmp2.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/billing/module1/cmp2/cmp2.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/billing/module1/cmp2/cmp2.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/billing/module1/cmp2/cmp2.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/billing/module1/cmp3/cmp3.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/billing/module1/cmp3/cmp3.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/billing/module1/cmp3/cmp3.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/billing/module1/cmp3/cmp3.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/billing/module1/module1.module.ts",
"chars": 520,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/compute/BUILD.bazel",
"chars": 773,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/compute/compute.module.ts",
"chars": 514,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/compute/index/index.component.html",
"chars": 87,
"preview": "<app-cmp4></app-cmp4>\n<app-cmp5></app-cmp5>\n<app-cmp6></app-cmp6>\n<app-cmp7></app-cmp7>"
},
{
"path": "src/app/compute/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/compute/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/compute/module0/BUILD.bazel",
"chars": 2025,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/compute/module0/cmp4/cmp4.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/compute/module0/cmp4/cmp4.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/compute/module0/cmp4/cmp4.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/compute/module0/cmp4/cmp4.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/compute/module0/cmp5/cmp5.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/compute/module0/cmp5/cmp5.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/compute/module0/cmp5/cmp5.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/compute/module0/cmp5/cmp5.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/compute/module0/module0.module.ts",
"chars": 520,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/compute/module1/BUILD.bazel",
"chars": 2025,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/compute/module1/cmp6/cmp6.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/compute/module1/cmp6/cmp6.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/compute/module1/cmp6/cmp6.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/compute/module1/cmp6/cmp6.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/compute/module1/cmp7/cmp7.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/compute/module1/cmp7/cmp7.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/compute/module1/cmp7/cmp7.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/compute/module1/cmp7/cmp7.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/compute/module1/module1.module.ts",
"chars": 520,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/datastore/BUILD.bazel",
"chars": 781,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/datastore/datastore.module.ts",
"chars": 516,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/datastore/index/index.component.html",
"chars": 91,
"preview": "<app-cmp8></app-cmp8>\n<app-cmp9></app-cmp9>\n<app-cmp10></app-cmp10>\n<app-cmp11></app-cmp11>"
},
{
"path": "src/app/datastore/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/datastore/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/datastore/module0/BUILD.bazel",
"chars": 2025,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/datastore/module0/cmp8/cmp8.component.html",
"chars": 3959,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/datastore/module0/cmp8/cmp8.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/datastore/module0/cmp8/cmp8.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/datastore/module0/cmp8/cmp8.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/datastore/module0/cmp9/cmp9.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/datastore/module0/cmp9/cmp9.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/datastore/module0/cmp9/cmp9.component.spec.ts",
"chars": 1307,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/datastore/module0/cmp9/cmp9.component.ts",
"chars": 3582,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/datastore/module0/module0.module.ts",
"chars": 520,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/datastore/module1/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/datastore/module1/cmp10/cmp10.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/datastore/module1/cmp10/cmp10.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/datastore/module1/cmp10/cmp10.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/datastore/module1/cmp10/cmp10.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/datastore/module1/cmp11/cmp11.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/datastore/module1/cmp11/cmp11.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/datastore/module1/cmp11/cmp11.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/datastore/module1/cmp11/cmp11.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/datastore/module1/module1.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/functions/BUILD.bazel",
"chars": 781,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/functions/functions.module.ts",
"chars": 516,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/functions/index/index.component.html",
"chars": 95,
"preview": "<app-cmp12></app-cmp12>\n<app-cmp13></app-cmp13>\n<app-cmp14></app-cmp14>\n<app-cmp15></app-cmp15>"
},
{
"path": "src/app/functions/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/functions/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/functions/module0/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/functions/module0/cmp12/cmp12.component.html",
"chars": 3959,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/functions/module0/cmp12/cmp12.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/functions/module0/cmp12/cmp12.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/functions/module0/cmp12/cmp12.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/functions/module0/cmp13/cmp13.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/functions/module0/cmp13/cmp13.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/functions/module0/cmp13/cmp13.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/functions/module0/cmp13/cmp13.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/functions/module0/module0.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/functions/module1/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/functions/module1/cmp14/cmp14.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/functions/module1/cmp14/cmp14.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/functions/module1/cmp14/cmp14.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/functions/module1/cmp14/cmp14.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/functions/module1/cmp15/cmp15.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/functions/module1/cmp15/cmp15.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/functions/module1/cmp15/cmp15.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/functions/module1/cmp15/cmp15.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/functions/module1/module1.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/hello-world/BUILD.bazel",
"chars": 2221,
"preview": "load(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\nload(\"@npm_ba"
},
{
"path": "src/app/hello-world/hello-world.component.html",
"chars": 374,
"preview": "<h1>Home</h1>\n\n<mat-card>\n <mat-card-title>\n <div id=\"greeting\">Hello {{ name }}</div>\n </mat-card-title>\n\n <mat-c"
},
{
"path": "src/app/hello-world/hello-world.component.scss",
"chars": 31,
"preview": ".mood-icon {\n margin: 1rem;\n}\n"
},
{
"path": "src/app/hello-world/hello-world.component.spec.ts",
"chars": 1260,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\nimport {By} from '@angular/platform-browser';\nim"
},
{
"path": "src/app/hello-world/hello-world.component.ts",
"chars": 431,
"preview": "import {Component} from '@angular/core';\nimport {shorten} from '@bazel/shorten';\nimport {format} from 'date-fns';\n\n@Comp"
},
{
"path": "src/app/hello-world/hello-world.module.ts",
"chars": 522,
"preview": "import {NgModule} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {RouterModule} from '@angular"
},
{
"path": "src/app/home/BUILD.bazel",
"chars": 313,
"preview": "load(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\nng_module(\n "
},
{
"path": "src/app/home/home.html",
"chars": 695,
"preview": "<h1>Angular Bazel Example</h1>\n\nThis is an example of building an Angular app at scale.\nIt uses <code>BUILD.bazel</code>"
},
{
"path": "src/app/home/home.ts",
"chars": 329,
"preview": "import {Component, NgModule} from '@angular/core';\nimport {RouterModule} from '@angular/router';\n\n@Component({\n selecto"
},
{
"path": "src/app/logging/BUILD.bazel",
"chars": 773,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/logging/index/index.component.html",
"chars": 95,
"preview": "<app-cmp16></app-cmp16>\n<app-cmp17></app-cmp17>\n<app-cmp18></app-cmp18>\n<app-cmp19></app-cmp19>"
},
{
"path": "src/app/logging/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/logging/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/logging/logging.module.ts",
"chars": 514,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/logging/module0/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/logging/module0/cmp16/cmp16.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/logging/module0/cmp16/cmp16.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/logging/module0/cmp16/cmp16.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/logging/module0/cmp16/cmp16.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/logging/module0/cmp17/cmp17.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/logging/module0/cmp17/cmp17.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/logging/module0/cmp17/cmp17.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/logging/module0/cmp17/cmp17.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/logging/module0/module0.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/logging/module1/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/logging/module1/cmp18/cmp18.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/logging/module1/cmp18/cmp18.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/logging/module1/cmp18/cmp18.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/logging/module1/cmp18/cmp18.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/logging/module1/cmp19/cmp19.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/logging/module1/cmp19/cmp19.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/logging/module1/cmp19/cmp19.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/logging/module1/cmp19/cmp19.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/logging/module1/module1.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/monitoring/BUILD.bazel",
"chars": 785,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/monitoring/index/index.component.html",
"chars": 95,
"preview": "<app-cmp20></app-cmp20>\n<app-cmp21></app-cmp21>\n<app-cmp22></app-cmp22>\n<app-cmp23></app-cmp23>"
},
{
"path": "src/app/monitoring/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/monitoring/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/monitoring/module0/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/monitoring/module0/cmp20/cmp20.component.html",
"chars": 3960,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/monitoring/module0/cmp20/cmp20.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/monitoring/module0/cmp20/cmp20.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/monitoring/module0/cmp20/cmp20.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/monitoring/module0/cmp21/cmp21.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/monitoring/module0/cmp21/cmp21.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/monitoring/module0/cmp21/cmp21.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/monitoring/module0/cmp21/cmp21.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/monitoring/module0/module0.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/monitoring/module1/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/monitoring/module1/cmp22/cmp22.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/monitoring/module1/cmp22/cmp22.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/monitoring/module1/cmp22/cmp22.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/monitoring/module1/cmp22/cmp22.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/monitoring/module1/cmp23/cmp23.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/monitoring/module1/cmp23/cmp23.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/monitoring/module1/cmp23/cmp23.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/monitoring/module1/cmp23/cmp23.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/monitoring/module1/module1.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
},
{
"path": "src/app/monitoring/monitoring.module.ts",
"chars": 517,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterModule} from '@angul"
},
{
"path": "src/app/networking/BUILD.bazel",
"chars": 785,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibi"
},
{
"path": "src/app/networking/index/index.component.html",
"chars": 95,
"preview": "<app-cmp24></app-cmp24>\n<app-cmp25></app-cmp25>\n<app-cmp26></app-cmp26>\n<app-cmp27></app-cmp27>"
},
{
"path": "src/app/networking/index/index.component.spec.ts",
"chars": 598,
"preview": "import {async, ComponentFixture, TestBed} from '@angular/core/testing';\n\nimport {IndexComponent} from './index.component"
},
{
"path": "src/app/networking/index/index.component.ts",
"chars": 223,
"preview": "import {Component, OnInit} from '@angular/core';\n\n@Component({selector: 'app-index', templateUrl: './index.component.htm"
},
{
"path": "src/app/networking/module0/BUILD.bazel",
"chars": 2037,
"preview": "# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_b"
},
{
"path": "src/app/networking/module0/cmp24/cmp24.component.html",
"chars": 3960,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/networking/module0/cmp24/cmp24.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/networking/module0/cmp24/cmp24.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/networking/module0/cmp24/cmp24.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/networking/module0/cmp25/cmp25.component.html",
"chars": 3957,
"preview": "<form [formGroup]=\"addressForm\" novalidate (ngSubmit)=\"onSubmit()\">\n <mat-card class=\"shipping-card\">\n <mat-card-hea"
},
{
"path": "src/app/networking/module0/cmp25/cmp25.component.scss",
"chars": 273,
"preview": ".full-width {\n width: 100%;\n}\n\n.shipping-card {\n min-width: 120px;\n margin: 20px auto;\n}\n\n.mat-radio-button {\n display: "
},
{
"path": "src/app/networking/module0/cmp25/cmp25.component.spec.ts",
"chars": 1314,
"preview": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\n"
},
{
"path": "src/app/networking/module0/cmp25/cmp25.component.ts",
"chars": 3586,
"preview": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component("
},
{
"path": "src/app/networking/module0/module0.module.ts",
"chars": 530,
"preview": "import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ReactiveFormsModule} from "
}
]
// ... and 136 more files (download for full content)
About this extraction
This page contains the full source code of the alexeagle/angular-bazel-example GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 336 files (580.1 KB), approximately 163.7k tokens, and a symbol index with 224 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.