[ { "path": ".bazelignore", "content": "node_modules\n" }, { "path": ".bazelrc", "content": "# Make TypeScript and Angular compilation fast, by keeping a few copies of the\n# compiler running as daemons, and cache SourceFile AST's to reduce parse time.\nbuild --strategy=TypeScriptCompile=worker\nbuild --strategy=AngularTemplateCompile=worker\n\n# Don't create bazel-* symlinks in the WORKSPACE directory.\n# These require .gitignore and may scare users.\n# Also, it's a workaround for https://github.com/bazelbuild/rules_typescript/issues/12\n# which affects the common case of having `tsconfig.json` in the WORKSPACE directory.\n#\n# Instead, you should run `bazel info bazel-bin` to find out where the outputs went.\nbuild --symlink_prefix=dist/\n\ntest --test_output=errors\n\n# Use the Angular 6 compiler\nbuild --define=compile=legacy\n\n# Turn off legacy external runfiles\nrun --nolegacy_external_runfiles\ntest --nolegacy_external_runfiles\n\n# Turn on --incompatible_strict_action_env which was on by default\n# in Bazel 0.21.0 but turned off again in 0.22.0. Follow\n# https://github.com/bazelbuild/bazel/issues/7026 for more details.\n# This flag is needed to so that the bazel cache is not invalidated\n# when running bazel via `yarn bazel`.\n# See https://github.com/angular/angular/issues/27514.\nbuild --incompatible_strict_action_env\nrun --incompatible_strict_action_env\ntest --incompatible_strict_action_env\n\n# Turn on managed directories feature in Bazel\n# This allows us to avoid installing a second copy of node_modules\nbuild --experimental_allow_incremental_repository_updates\nquery --experimental_allow_incremental_repository_updates\n\n###############################\n# Remote Build Execution support\n# Turn on these settings with\n# --config=remote\n###############################\n\n# Load default settings for Remote Build Execution\n# When updating, the URLs of bazel_toolchains in packages/bazel/package.bzl\n# may also need to be updated (see https://github.com/angular/angular/pull/27935)\nimport %workspace%/third_party/github.com/bazelbuild/bazel-toolchains/bazelrc/bazel-0.24.0.bazelrc\n\n# Point to our custom execution platform; see tools/BUILD.bazel\nbuild:remote --extra_execution_platforms=//tools:rbe_ubuntu1604-angular\nbuild:remote --host_platform=//tools:rbe_ubuntu1604-angular\nbuild:remote --platforms=//tools:rbe_ubuntu1604-angular\n\n# Remote instance.\n# rbe-shared-demo has 500 2-core workers\n# rbe-shared-demo2 has 100 8-core workers\nbuild:remote --remote_instance_name=projects/rbe-shared-demo2/instances/default_instance\n# Allow Bazel to consume all the workers\nbuild:remote --jobs=100\n\n# Schedule actions both locally and remote, take the faster one\n# See https://blog.bazel.build/2019/02/01/dynamic-spawn-scheduler.html\n# NB: this setting is experimental and can cause obscure build failures.\n# The Bazel team does not recommend using this in all projects.\n# We can observe failures like Remote connection/protocol failed\n# build:remote --experimental_spawn_scheduler\n\n##################################################\n# Load any settings specific to the current user.\n##################################################\n\n# Needs to be last statement in this\n# config, as the user configuration should be able to overwrite flags from this file.\n# To use Remote Build Execution, this file should contain a line like\n# build --google_credentials=[path to the .json credentials file]\ntry-import .bazelrc.user\n" }, { "path": ".circleci/bazel.rc", "content": "# These options are enabled when running on CI\n# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.\n# See remote cache documentation in /docs/BAZEL.md\n\n# Don't be spammy in the logs\n# TODO: re-enable after we deal with 10m timeout on circleci\n#build --noshow_progress\n\n# Don't run tests that are not meant to be run on circleci\ntest --test_tag_filters=-no-circleci\n\n# Print all the options that apply to the build.\n# This helps us diagnose which options override others\n# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)\nbuild --announce_rc\n\n# Prevent unstable environment variables from tainting cache keys\nbuild --experimental_strict_action_env\n\n# Save downloaded repositories such as the go toolchain\n# This directory can then be included in the CircleCI cache\n# It should save time running the first build\nbuild --experimental_repository_cache=/home/circleci/bazel_repository_cache\n\n# Workaround https://github.com/bazelbuild/bazel/issues/3645\n# Bazel doesn't calculate the memory ceiling correctly when running under Docker.\n# Limit Bazel to consuming resources that fit in CircleCI \"xlarge\" class\n# https://circleci.com/docs/2.0/configuration-reference/#resource_class\nbuild --local_resources=14336,8.0,1.0\n\n# Use fixed chunk names for code-split bundles in CI\n# so that GitHub buildsize bot reports are accurate\nbuild --define=ROLLUP_BUNDLE_FIXED_CHUNK_NAMES=1\n" }, { "path": ".circleci/config.yml", "content": "# This file configures the build at https://circleci.com/gh/alexeagle/angular-bazel-example\n# Complete documentation is at https://circleci.com/docs/2.0/\n\n# CircleCI lets us pick the key for storing one or more caches, to speed up subsequent builds.\n# We can use this to avoid re-fetching our dependencies from npm on every build.\n# To ensure we don't load a stale cache, we invalidate it based on the entries in the key:\n# - the checksum of Yarn's lock file\n# - the branch we are on, which really shouldn't be needed since the yarn lock file should be hermetic\n# - the docker image tag, working around an issue we saw where changing docker images causes permission\n# errors when restoring the cache, like when the user we run as changes\nvar_1: &default_docker_image circleci/node:10.16\nvar_2: &cache_key node-0.16-{{ .Branch }}-{{ checksum \"yarn.lock\" }}-0.8.0\n\n# Each job will inherit these defaults\nvar_3: &job_defaults\n working_directory: ~/angular-bazel-example\n docker:\n - image: *default_docker_image\n\n# After checkout, rebase on top of master, because we want to test the proposed merge of a\n# onto the target branch, not just test what's on the user's fork.\n# Similar to travis behavior, but not quite the same.\n# See https://discuss.circleci.com/t/1662\nvar_4: &post_checkout\n post: git pull --ff-only origin \"refs/pull/${CI_PULL_REQUEST//*pull\\//}/merge\"\n\nvar_5: &restore_cache\n restore_cache:\n keys:\n - *cache_key\n\nvar_6: &init_environment\n run:\n name: Initializing environment\n command: |\n sudo apt-get update\n # Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)\n # and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)\n # which are dependendies of chrome & needed for karma & protractor headless chrome tests.\n # This is a very small install with the whole init_environment step taking less than 8 seconds.\n # TODO(gregmagolan): switch rules_webtesting to use a chrome headless_shell binary which does\n # not depend on any dynamically linked libs\n sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1\n # Also install libraries required for firefox\n sudo apt-get -y install libdbus-glib-1-2\n\n # Setup /etc/bazel.bazelrc\n sudo cp .circleci/bazel.rc /etc/bazel.bazelrc\n\nvar_7: &yarn_install\n run:\n name: Run yarn install\n command: yarn install\n\nvar_8: &init_bazel\n run:\n name: Initializing Bazel\n command: |\n # Symlink fetched bazel to /usr/local/bin/bazel\n pathToBazel=$(ls $(realpath ./node_modules/@bazel/bazel-linux_x64)/bazel-*)\n sudo ln -fs $pathToBazel /usr/local/bin/bazel\n echo \"Bazel version:\"\n bazel version\n\nvar_9: &attach_workspace\n attach_workspace:\n at: ~/\n\nversion: 2\n\n# These jobs will run in parallel, and report separate statuses to GitHub PRs\njobs:\n setup:\n <<: *job_defaults\n steps:\n - checkout:\n <<: *post_checkout\n - *restore_cache\n - *init_environment\n - *yarn_install\n - *init_bazel\n\n # Save all node_modules to the cache\n - save_cache:\n key: *cache_key\n paths:\n - \"node_modules\"\n\n # Persist any changes at this point to be reused by further jobs.\n - persist_to_workspace:\n root: ~/\n paths:\n - ./angular-bazel-example\n\n lint:\n <<: *job_defaults\n steps:\n - *attach_workspace\n - *init_environment\n - *init_bazel\n\n # Run the Buildifier to check our Bazel rules for format issues.\n - run: 'yarn bazel:format --mode=check ||\n (echo \"BUILD files not formatted. Please run ''yarn bazel:format --mode=fix''\" ; exit 1)'\n\n # Run the Buildifier to check our Bazel rules for lint issues.\n # Note: The `--lint=warn` will auto fixe (re-write) the affected files. \n - run: 'yarn bazel:format --lint=warn ||\n (echo \"BUILD files contain unresolved lint errors. Please fix manually the remaining errors.\" ; exit 1)'\n\n build_and_test:\n <<: *job_defaults\n resource_class: xlarge\n steps:\n - *attach_workspace\n - *init_environment\n - *init_bazel\n\n # Build and Test\n - run: yarn ng test\n - run: yarn ng e2e\n\n # Also run prodserver test which is not covered by `ng e2e`\n - run: bazel test //e2e:prodserver_test\n\n - store_artifacts:\n path: dist/bin/src/bundle.min.js\n destination: bundle.min.js\n\n - store_artifacts:\n path: dist/bin/src/bundle.cs.min\n destination: bundle.cs.min\n\n benchmark:\n <<: *job_defaults\n resource_class: xlarge\n steps:\n - *attach_workspace\n - *init_environment\n - *init_bazel\n\n # Run `bazel build` first as a temporary workaround to unexpected\n # benchmark failure when entire build runs withing ibazel-benchmark-runner\n # ```\n # Error running Bazel unexpected EOF\n # [ibazel-benchmark-runner] iBazel process exited unexpectedly 4 null\n # error Command failed with exit code 1.\n # ```\n # TODO(gregmagolan): remove this once issue is resolved\n - run: bazel build ...\n\n # Run the benchmark\n - run: yarn benchmark\n\n\nworkflows:\n version: 2\n default_workflow:\n jobs:\n - setup\n - lint:\n requires:\n - setup\n - build_and_test:\n requires:\n - setup\n - benchmark:\n requires:\n - setup\n" }, { "path": ".clang-format", "content": "Language: JavaScript\nBasedOnStyle: Google\nColumnLimit: 100\n" }, { "path": ".firebaserc", "content": "{\n \"projects\": {\n \"default\": \"bazel-angular-io\"\n }\n}\n" }, { "path": ".gitignore", "content": "node_modules\nbazel-out\ndist\n.firebase\n.DS_Store\n.bazelrc.user\n" }, { "path": "BUILD.bazel", "content": "load(\"@k8s_deploy//:defaults.bzl\", \"k8s_deploy\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n# ts_library and ng_module use the `//:tsconfig.json` target\n# by default. This alias allows omitting explicit tsconfig\n# attribute.\nalias(\n name = \"tsconfig.json\",\n actual = \"//src:tsconfig.json\",\n)\n\nk8s_deploy(\n name = \"deploy\",\n images = {\n \"gcr.io/internal-200822/src:nodejs_image\": \"//src:image\",\n },\n template = \":deployment.yaml\",\n)\n" }, { "path": "LICENSE", "content": "The MIT License\n\nCopyright (c) 2014-2017 Google, Inc. http://angular.io\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "[![CircleCI](https://circleci.com/gh/angular/angular-bazel-example.svg?style=svg)](https://circleci.com/gh/angular/angular-bazel-example)\n\n# Moved to rules_nodejs monorepo: https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular\n\n**Readme content is preserved below to avoid breaking links**\n\n**This is experimental, as part of Angular Labs! There may be breaking changes.**\n\nThis is part of the ABC project. The overall goal is to make it possible to\ndevelop Angular applications the same way we do at Google.\n\nLearn more about Bazel and Angular at https://bazel.angular.io\n\nThis example is deployed at https://bazel.angular.io/example\n\n## Guide to the example\n\nThis example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.\n\n- **Angular CLI**: you can use the `ng` command to run build, serve, test, and e2e\n- **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.\n- **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.\n- **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).\n- **Material design**: see `src/material` where we collect the material modules we use.\n- **Redux-style state management**: see `src/reducers` where we use the [NgRx Store](https://ngrx.io/guide/store).\n- **Lazy loading**: in production mode, the application is served in chunks. Run `ng serve --prod`\n- **Differential loading**: in production mode, we load a pair of `\n \n \n\n" }, { "path": "src/index.html", "content": "\n \n \n \n \n\n \n ABC: Angular Buildtools Convergence\n \n \n \n \n \n\n \n \n\n \n \n \n
\n
\n
\n

Angular and Bazel

\n

\n Build and test Angular applications at scale like Google\n

\n
\n
\n Subscribe for Updates\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n

Incremental re-builds

\n

\n A small change to your app should require a small re-build.\n

\n
\n
\n \n
\n \n \n \n \n cli\n \n \n \n \n \n \n \n \n \n \n
\n
\n

Works with Angular CLI

\n

\n Use the same ng commands you're used to.\n

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n

Cloud Ready

\n

\n Expand your build and test to run in parallel on a cluster of\n workers.\n

\n
\n
\n \n
\n \n \n \n \n labs\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n

Part of Angular Labs

\n

\n Not a stable, supported API, so use Bazel with caution in\n production applications. We expect to promote it to stable for\n Angular version 9.\n

\n
\n \n \n

📚 Resources

\n

Projects

\n \n\n

Talks

\n
    \n
  • \n Building Apps Like Google with Angular, Bazel, and GCP\n Video\n (Google Cloud Next, April 2019)\n
    • \n\n
  • \n Layering in JS tooling\n Slides\n Video\n (ModernWeb Meetup, March 2019)\n
    • \n\n
  • \n Angular, Bazel, and CLI\n Slides\n (AngularSF Meetup, January 2019)\n
    • \n\n
  • \n Bazel in Angular CLI\n Video\n Slides\n (AngularNYC Meetup, January 2019)\n
    • \n\n
  • \n The CLI Roadmap\n Video\n (AngularConnect, November 2018)\n
    • \n\n
  • \n Develop Angular like Google Does\n Slides\n (AngularMIX, October 2018)\n
    • \n\n
  • \n Building large Angular apps with Bazel\n Slides\n Video\n (BazelCon, October 2018)\n
    • \n\n
  • \n How I love being ejected\n Slides\n Video\n (ng-conf, April 2018)\n
    • \n
  • \n Angular Libraries in Bazel\n Slides\n (AngularSF Meetup, April 2018)\n
    • \n\n
  • \n Bazel for building Angular Applications\n Video\n (St. Louis Angular Lunch, February 2018)\n
    • \n\n
  • \n Building Angular Applications like Google\n Slides\n Video\n (AngularConnect, November 2017)\n
    • \n\n
  • \n Bazel for Web Frontends\n Slides\n Video\n (BazelCon November 2017)\n
    • \n\n
  • \n Angular with Bazel and Closure\n Slides\n Video\n (AngularMIX October 2017)\n
    • \n
\n

Articles

\n
    \n
  • \n \n Automated testing of each commit != CI\n \n (January 2019)\n
    • \n
  • \n \n Running tools under Bazel\n \n (November 2018)\n
    • \n\n
  • \n \n Multiple npm packages in a Bazel monorepo\n \n (March 2018)\n
    • \n\n
  • \n \n Deploying an Angular app to Kubernetes using Bazel (preview)\n \n (January 2018)\n
    • \n\n
  • \n \n Building Angular apps at Scale\n (August 2017)\n
    • \n\n
  • \n What Angular is doing with Bazel and Closure\n (April 2017)\n
    • \n
\n\n

Trainings

\n
    \n
  • \n LiveCoding a Bazel rule for Stylus\n Video\n (July 2019)\n
    • \n \n
  • \n Bazel Training for Angular Team\n Slides\n (January 2019)\n
    • \n\n
  • \n Full Stack development with Nx and Bazel\n Slides\n Video\n (ng-conf, April 2018)\n
    • \n\n
  • \n ABC Deep Dive tech talk\n Slides\n Video\n (February 2018)\n
    • \n
\n\n

Examples

\n \n \n \n \n \n\n" }, { "path": "src/initialize_testbed.ts", "content": "/**\n * @fileoverview Provides a script to initialize TestBed before tests are run.\n * This file should be included in the \"runtime_deps\" of a \"ts_web_test_suite\"\n * rule.\n */\nimport {TestBed} from '@angular/core/testing';\nimport {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';\n\nTestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n" }, { "path": "src/lib/shorten/BUILD.bazel", "content": "load(\"@npm_bazel_typescript//:defs.bzl\", \"ts_library\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\nts_library(\n name = \"shorten\",\n srcs = [\"shorten.ts\"],\n module_name = \"@bazel/shorten\",\n module_root = \"shorten\",\n)\n\n# TODO(alexeagle): show how it can be deployed to npm\n" }, { "path": "src/lib/shorten/README.md", "content": "# A simple example TS-only library\n\nThis shows how a TypeScript library looks in a Bazel monorepo.\n" }, { "path": "src/lib/shorten/shorten.ts", "content": "export function shorten(s: string, length: number) {\n if (s.length < length) return s;\n return s.substr(0, length - 3) + '...';\n}" }, { "path": "src/main.dev.ts", "content": "/**\n * Used to launch the application under Bazel development mode.\n */\nimport {platformBrowser} from '@angular/platform-browser';\nimport {AppModuleNgFactory} from './app/app.module.ngfactory';\n\nplatformBrowser().bootstrapModuleFactory(AppModuleNgFactory);\n" }, { "path": "src/main.prod.ts", "content": "/**\n * Used to launch the application under Bazel production mode.\n */\nimport {enableProdMode} from '@angular/core';\nimport {platformBrowser} from '@angular/platform-browser';\nimport {AppModuleNgFactory} from './app/app.module.ngfactory';\n\nenableProdMode();\nplatformBrowser().bootstrapModuleFactory(AppModuleNgFactory);\n" }, { "path": "src/main.ts", "content": "/**\n * This main entry point is used to launch the app under the\n * @angular-devkit/build-angular, which is the default CLI\n * builder. Note that for AOT, the CLI will magically replace\n * the bootstrap by switching platform-browser-dynamic with\n * platform-browser.\n * This file is completely unused in the Bazel build.\n */\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.log(err));" }, { "path": "src/rxjs_shims.js", "content": "/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n /**\n * @fileoverview these provide named UMD modules so that we can bundle\n * the application along with rxjs using the concatjs bundler.\n */\n\n// rxjs/operators\n(function(factory) {\nif (typeof module === 'object' && typeof module.exports === 'object') {\n var v = factory(require, exports);\n if (v !== undefined) module.exports = v;\n} else if (typeof define === 'function' && define.amd) {\n define('rxjs/operators', ['exports', 'rxjs'], factory);\n}\n})(function(exports, rxjs) {\n'use strict';\nObject.keys(rxjs.operators).forEach(function(key) {\n exports[key] = rxjs.operators[key];\n});\nObject.defineProperty(exports, '__esModule', {value: true});\n});\n\n// rxjs/testing\n(function(factory) {\nif (typeof module === 'object' && typeof module.exports === 'object') {\n var v = factory(require, exports);\n if (v !== undefined) module.exports = v;\n} else if (typeof define === 'function' && define.amd) {\n define('rxjs/testing', ['exports', 'rxjs'], factory);\n}\n})(function(exports, rxjs) {\n'use strict';\nObject.keys(rxjs.testing).forEach(function(key) {\n exports[key] = rxjs.testing[key];\n});\nObject.defineProperty(exports, '__esModule', {value: true});\n});\n" }, { "path": "src/shared/material/BUILD.bazel", "content": "load(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n# We don't import from these, but the generated ngfactory code will\nNG_FACTORY_ADDED_IMPORTS = [\n \"@npm//@angular/forms\",\n \"@npm//@angular/platform-browser\",\n]\n\nng_module(\n name = \"material\",\n srcs = glob([\"*.ts\"]),\n tsconfig = \"//src:tsconfig.json\",\n deps = NG_FACTORY_ADDED_IMPORTS + [\n \"@npm//@angular/core\",\n \"@npm//@angular/material\",\n ],\n)\n" }, { "path": "src/shared/material/material.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatListModule } from '@angular/material/list';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatGridListModule } from '@angular/material/grid-list';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatTableModule } from '@angular/material/table';\nimport { MatPaginatorModule } from '@angular/material/paginator';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nconst matModules = [\n MatButtonModule,\n MatCardModule,\n MatFormFieldModule,\n MatIconModule,\n MatInputModule,\n MatListModule,\n MatToolbarModule,\n MatSidenavModule,\n MatRadioModule,\n MatSelectModule,\n MatGridListModule,\n MatMenuModule,\n MatTableModule,\n MatPaginatorModule,\n MatTooltipModule\n];\n\n@NgModule({\n imports: matModules,\n exports: matModules,\n})\nexport class MaterialModule {\n}" }, { "path": "src/styles.scss", "content": "$theme-primary: #3e236e;\n$theme-secondary: #43a047;\n\n$default-font-stack: Cambria, \"Hoefler Text\", Utopia, \"Liberation Serif\", \"Nimbus Roman No9 L Regular\", Times, \"Times New Roman\", serif;\n$modern-font-stack: Constantia, \"Lucida Bright\", Lucidabright, \"Lucida Serif\", Lucida, \"DejaVu Serif\", \"Bitstream Vera Serif\", \"Liberation Serif\", Georgia, serif;\n\nhtml, body {\n font-family: $default-font-stack;\n padding: 0;\n margin: 0;\n\n .content {\n margin: 2rem;\n }\n}\n\napp-component {\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n\tbottom: 0;\n}\n\nmat-drawer-container {\n\tflex: 1;\n}\n\nnav > .mat-toolbar {\n\tbackground: $theme-secondary;\n\tcolor: #fff;\n\n\t.nav-logo {\n\t\theight: 28px;\n\t}\n\n\t.flex-spacer {\n\t\tflex: 1 1 auto;\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n}\n\n.mobile-nav > a {\n\tflex: 1 1 auto;\n}\n\n.hide-small {\n\t@media screen and (max-width: 720px) {\n\t\tdisplay: none !important;\n\t}\n}\n\n.show-small {\n\t@media screen and (min-width: 720px) {\n\t\tdisplay: none !important;\n\t}\n}\n\n.mat-card {\n\tmargin: 1em;\n}\n\nmat-drawer mat-nav-list .mat-icon {\n\tmargin-right: 0.5em;\n}\n\nh1 {\n\tfont-family: $modern-font-stack;\n\tcolor: $theme-primary;\n }\n \n " }, { "path": "src/tsconfig-test.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"types\": [\"jasmine\"]\n }\n}" }, { "path": "src/tsconfig.json", "content": "{\n \"compilerOptions\": {\n // Allow uses of these JS APIs\n \"lib\": [\n \"dom\",\n \"es5\",\n \"es2015.collection\",\n \"es2015.iterable\",\n \"es2015.promise\"\n ],\n // Allow type-checking to succeed when we import from generated files\n // This lets us write out Angular AOT bootstrap by importing the\n // ngfactory file.\n // Under Angular Ivy, this is unneeded.\n \"rootDirs\": [\n \".\",\n \"../dist/bin/src\",\n ],\n // Permit decorator syntax\n \"experimentalDecorators\": true,\n // Don't scan the node_modules/@types folder for ambient types.\n // This would force us to have all the types in the dependencies of\n // each library.\n // Instead we'll be explicit about declaring ambient type dependencies\n // using the /// syntax.\n \"types\": []\n }\n}" }, { "path": "third_party/github.com/bazelbuild/bazel-toolchains/bazelrc/bazel-0.24.0.bazelrc", "content": "# Copyright 2016 The Bazel Authors. All rights reserved.\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# http://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n\n# This file is auto-generated from release/bazelrc.tpl and should not be\n# modified directly.\n\n# This .bazelrc file contains all of the flags required for the provided\n# toolchain with Remote Build Execution.\n#\n# This .bazelrc file also contains all of the flags required for the local\n# docker sandboxing.\n\n# Depending on how many machines are in the remote execution instance, setting\n# this higher can make builds faster by allowing more jobs to run in parallel.\n# Setting it too high can result in jobs that timeout, however, while waiting\n# for a remote machine to execute them.\nbuild:remote --jobs=50\n\n# Set several flags related to specifying the platform, toolchain and java\n# properties.\n# These flags are duplicated rather than imported from (for example)\n# %workspace%/configs/ubuntu16_04_clang/1.2/toolchain.bazelrc to make this\n# bazelrc a standalone file that can be copied more easily.\n# These flags should only be used as is for the rbe-ubuntu16-04 container\n# and need to be adapted to work with other toolchain containers.\nbuild:remote --host_javabase=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:jdk8\nbuild:remote --javabase=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:jdk8\nbuild:remote --host_java_toolchain=@bazel_tools//tools/jdk:toolchain_hostjdk8\nbuild:remote --java_toolchain=@bazel_tools//tools/jdk:toolchain_hostjdk8\nbuild:remote --crosstool_top=@bazel_toolchains//configs/ubuntu16_04_clang/1.2/bazel_0.24.0/default:toolchain\nbuild:remote --action_env=BAZEL_DO_NOT_DETECT_CPP_TOOLCHAIN=1\n# Platform flags:\n# The toolchain container used for execution is defined in the target indicated\n# by \"extra_execution_platforms\", \"host_platform\" and \"platforms\".\n# If you are using your own toolchain container, you need to create a platform\n# target with \"constraint_values\" that allow for the toolchain specified with\n# \"extra_toolchains\" to be selected (given constraints defined in\n# \"exec_compatible_with\").\n# More about platforms: https://docs.bazel.build/versions/master/platforms.html\nbuild:remote --extra_toolchains=@bazel_toolchains//configs/ubuntu16_04_clang/1.2/bazel_0.24.0/cpp:cc-toolchain-clang-x86_64-default\nbuild:remote --extra_execution_platforms=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:rbe_ubuntu1604\nbuild:remote --host_platform=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:rbe_ubuntu1604\nbuild:remote --platforms=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:rbe_ubuntu1604\n\n# Set various strategies so that all actions execute remotely. Mixing remote\n# and local execution will lead to errors unless the toolchain and remote\n# machine exactly match the host machine.\nbuild:remote --spawn_strategy=remote\nbuild:remote --strategy=Javac=remote\nbuild:remote --strategy=Closure=remote\nbuild:remote --strategy=Genrule=remote\nbuild:remote --define=EXECUTOR=remote\n\n# Enable the remote cache so action results can be shared across machines,\n# developers, and workspaces.\nbuild:remote --remote_cache=remotebuildexecution.googleapis.com\n\n# Enable remote execution so actions are performed on the remote systems.\nbuild:remote --remote_executor=remotebuildexecution.googleapis.com\n\n# Enable encryption.\nbuild:remote --tls_enabled=true\n\n# Set a higher timeout value, just in case.\nbuild:remote --remote_timeout=3600\n\n# Enable authentication. This will pick up application default credentials by\n# default. You can use --auth_credentials=some_file.json to use a service\n# account credential instead.\nbuild:remote --auth_enabled=true\n\n# The following flags are only necessary for local docker sandboxing\n# with the rbe-ubuntu16-04 container. Use of these flags is still experimental.\nbuild:docker-sandbox --host_javabase=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:jdk8\nbuild:docker-sandbox --javabase=@bazel_toolchains//configs/ubuntu16_04_clang/1.2:jdk8\nbuild:docker-sandbox --crosstool_top=@bazel_toolchains//configs/ubuntu16_04_clang/1.2/bazel_0.24.0/default:toolchain\nbuild:docker-sandbox --experimental_docker_image=gcr.io/cloud-marketplace/google/rbe-ubuntu16-04@sha256:da0f21c71abce3bbb92c3a0c44c3737f007a82b60f8bd2930abc55fe64fc2729\nbuild:docker-sandbox --spawn_strategy=docker\nbuild:docker-sandbox --strategy=Javac=docker\nbuild:docker-sandbox --strategy=Closure=docker\nbuild:docker-sandbox --strategy=Genrule=docker\nbuild:docker-sandbox --define=EXECUTOR=remote\nbuild:docker-sandbox --experimental_docker_verbose\nbuild:docker-sandbox --experimental_enable_docker_sandbox\n\n# The following flags enable the remote cache so action results can be shared\n# across machines, developers, and workspaces.\nbuild:remote-cache --remote_cache=remotebuildexecution.googleapis.com\nbuild:remote-cache --tls_enabled=true\nbuild:remote-cache --remote_timeout=3600\nbuild:remote-cache --auth_enabled=true\nbuild:remote-cache --spawn_strategy=standalone\nbuild:remote-cache --strategy=Javac=standalone\nbuild:remote-cache --strategy=Closure=standalone\nbuild:remote-cache --strategy=Genrule=standalone\n" }, { "path": "tools/BUILD.bazel", "content": "# The toolchain container used for execution is defined in the target indicated\n# by \"extra_execution_platforms\", \"host_platform\" and \"platforms\".\n# If you are using your own toolchain container, you need to create a platform\n# target with \"constraint_values\" that allow for the toolchain specified with\n# \"extra_toolchains\" to be selected (given constraints defined in\n# \"exec_compatible_with\").\n# More about platforms: https://docs.bazel.build/versions/master/platforms.html\n# Note: we are working to remove the need for this custom platform and image\nplatform(\n name = \"rbe_ubuntu1604-angular\",\n constraint_values = [\n \"@bazel_tools//platforms:x86_64\",\n \"@bazel_tools//platforms:linux\",\n \"@bazel_tools//tools/cpp:clang\",\n \"@bazel_toolchains//constraints:xenial\",\n ],\n # RBE team maintains this Docker image for the angular/angular project.\n remote_execution_properties = \"\"\"\n properties: {\n name: \"container-image\"\n value:\"docker://gcr.io/asci-toolchain/nosla-ubuntu16_04-webtest@sha256:e874885f5e3d9ac0c0d3176e5369cb5969467dbf9ad8d42b862829cec8d84b9b\"\n }\n properties: {\n name: \"dockerAddCapabilities\"\n value: \"SYS_ADMIN\"\n }\n \"\"\",\n)\n" }, { "path": "tools/defaults.bzl", "content": "load(\"@npm_bazel_karma//:defs.bzl\", _ts_web_test_suite = \"ts_web_test_suite\")\n\ndef ts_web_test_suite(name, browsers = [], tags = [], **kwargs):\n _ts_web_test_suite(\n name = name,\n tags = tags + [\"native\", \"no-bazelci\"],\n browsers = browsers,\n **kwargs\n )\n\n # BazelCI docker images are missing shares libs to run a subset browser tests:\n # mac: firefox does not work, chrome works\n # ubuntu: firefox and chrome do not work --- there are 0 tests to run\n _ts_web_test_suite(\n name = \"bazelci_\" + name,\n tags = tags + [\"native\", \"no-circleci\"],\n browsers = [\n \"@io_bazel_rules_webtesting//browsers:chromium-local\",\n ],\n **kwargs\n )\n" }, { "path": "tools/generator/index.js", "content": "if (process.argv[2] === '--clean') {\n require('./src/clean')();\n}\nelse {\n require('./src/generate')(process.argv);\n}\n" }, { "path": "tools/generator/src/build-file.js", "content": "\nconst fs = require('fs');\n\nmodule.exports.writeModuleBuildFile =\n function writeModuleBuildFile(file, {modIdx, scssFileAcc, tsFileAcc, htmlFileAcc}) {\n fs.writeFileSync(\n file,\n // Make Buildifier happy, don't format line below.\n `# Generated BUILD file, see /tools/generator\nload(\"@io_bazel_rules_sass//:defs.bzl\", \"sass_binary\")\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\nload(\"@npm_bazel_typescript//:defs.bzl\", \"ts_library\")\nload(\"//tools:defaults.bzl\", \"ts_web_test_suite\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n${\n scssFileAcc\n .map(\n (s, idx) =>\n // Make Buildifier happy, don't format line below.\n `sass_binary(\n name = \"module${idx}_styles\",\n src = \"${s}\",\n)`).join('\\n\\n')}\n\n# We don't import from these, but the generated ngfactory code will\nNG_FACTORY_ADDED_IMPORTS = [\n \"@npm//@angular/cdk\",\n \"@npm//@angular/material\",\n \"@npm//@angular/forms\",\n]\n\nng_module(\n name = \"module${modIdx}\",\n srcs = [\n ${tsFileAcc.map(s => `\"${s}\"`).join(',\\n ')},\n \"module${modIdx}.module.ts\",\n ],\n assets = [\n ${scssFileAcc.map((_, idx) => `\":module${idx}_styles\"`).join(`,\\n `)},\n ${htmlFileAcc.map(s => `\"${s}\"`).join(',\\n ')},\n ],\n tsconfig = \"//src:tsconfig.json\",\n deps = [\n \"@npm//@angular/common\",\n \"@npm//@angular/core\",\n \"//src/shared/material\",\n ] + NG_FACTORY_ADDED_IMPORTS,\n)\n\nts_library(\n name = \"test_lib\",\n testonly = 1,\n srcs = glob([\"**/*.spec.ts\"]),\n tsconfig = \"//src:tsconfig-test\",\n deps = [\n \":module${modIdx}\",\n \"@npm//@angular/core\",\n \"@npm//@angular/platform-browser\",\n \"@npm//@angular/platform-browser-dynamic\",\n \"@npm//@types/jasmine\",\n \"@npm//@types/node\",\n ] + NG_FACTORY_ADDED_IMPORTS,\n)\n\nts_web_test_suite(\n name = \"test\",\n # do not sort\n bootstrap = [\n \"@npm//:node_modules/zone.js/dist/zone-testing-bundle.js\",\n \"@npm//:node_modules/reflect-metadata/Reflect.js\",\n ],\n browsers = [\n \"@io_bazel_rules_webtesting//browsers:chromium-local\",\n \"@io_bazel_rules_webtesting//browsers:firefox-local\",\n ],\n runtime_deps = [\n \"//src:initialize_testbed\",\n ],\n deps = [\n \":test_lib\",\n \"//src:rxjs_umd_modules\",\n ],\n)\n `);\n}\n\n module.exports.writeFeatureModuleBuildFile = function writeFeatureModuleBuildFile(\n file, {name, featureModuleDeps}) {\n fs.writeFileSync(\n file,\n // Make Buildifier happy, don't format line below.\n `# Generated BUILD file, see /tools/generator\nload(\"@npm_angular_bazel//:index.bzl\", \"ng_module\")\n\npackage(default_visibility = [\"//:__subpackages__\"])\n\n# We don't import from these, but the generated ngfactory code will\nNG_FACTORY_ADDED_IMPORTS = [\n \"@npm//@angular/cdk\",\n \"@npm//@angular/material\",\n \"@npm//@angular/forms\",\n]\n\nng_module(\n name = \"${name}\",\n srcs = [\n \"${name}.module.ts\",\n \"index/index.component.ts\",\n ],\n assets = [\n \"index/index.component.html\",\n ],\n tsconfig = \"//src:tsconfig.json\",\n deps = NG_FACTORY_ADDED_IMPORTS + [\n \"@npm//@angular/common\",\n \"@npm//@angular/core\",\n \"@npm//@angular/router\",\n ${featureModuleDeps.map(s => `\"${s}\"`).join(',\\n ')},\n ],\n)\n `);\n}\n" }, { "path": "tools/generator/src/clean.js", "content": "const rimraf = require('rimraf');\nconst { FEATURES } = require('./feature-names');\nconst { updateNgModule, removeRoutesFromNgModule, removeRoutesFromAppComponentHtml } = require('./ng-module');\n\nmodule.exports = function() {\n FEATURES.map(feature => `src/app/${feature.path}`).forEach(featPath => {\n console.log(`DELETE ${featPath}`);\n rimraf.sync(featPath);\n });\n\n updateNgModule('src/app/app.module.ts');\n removeRoutesFromNgModule('src/app/app-routing.module.ts');\n removeRoutesFromAppComponentHtml('src/app/app.component.html');\n}" }, { "path": "tools/generator/src/create-feature-module.js", "content": "/**\n * Generate lots of \"feature\" code to bulk out this example to a given size.\n * By default we generate 40 components and check that in.\n * You can generate more by passing arguments, for example\n * yarn generate 10 10\n * will make 1000 components total: for each of the ten \"features\", it will have 10 modules, each\n * has 10 components.\n */\nconst { ng, ngFromTemplate } = require('./ng');\nconst { writeModuleBuildFile, writeFeatureModuleBuildFile } = require('./build-file');\nconst { referenceComponents } = require('./reference-components');\nconst { updateNgModuleWithExtraDeps, updateRoutesInFeatureModule } = require('./ng-module');\n\nlet globalCmpIdx = 0;\n\nmodule.exports.makeFeatureModule = function makeFeatureModule(argv) {\n return function (feature) {\n const modulesPerFeature = argv[2] || 2;\n const componentsPerModule = argv[3] || 2;\n\n console.log('INFO ', `Feature: ${feature.path}, Modules: ${modulesPerFeature}, Components: ${componentsPerModule}`);\n\n ng('generate', 'module', feature.path, '--module', 'app');\n ng('generate', 'component', `${feature.path}/index`, '--module', `${feature.path}`, '--inlineStyle=true');\n\n const featureModuleDeps = [];\n const featureRootModuleDeps = [];\n const selectorAcc = [];\n\n for (let modIdx = 0; modIdx < modulesPerFeature; modIdx++) {\n ng('generate', 'module', `${feature.path}/module${modIdx}`, '--module', feature.path);\n\n featureRootModuleDeps.push(`//src/app/${feature.path}`);\n featureModuleDeps.push(`//src/app/${feature.path}/module${modIdx}`);\n const tsFileAcc = [];\n const scssFileAcc = [];\n const htmlFileAcc = [];\n\n for (let cmpIdx = 0; cmpIdx < componentsPerModule; cmpIdx++) {\n ngFromTemplate('generate', 'component', `${feature.path}/module${modIdx}/cmp${globalCmpIdx}`, '--module',\n `${feature.path}/module${modIdx}`, '--export=true', { componentName: `cmp${globalCmpIdx}`, featureName: feature.path});\n\n tsFileAcc.push(`cmp${globalCmpIdx}/cmp${globalCmpIdx}.component.ts`);\n scssFileAcc.push(`cmp${globalCmpIdx}/cmp${globalCmpIdx}.component.scss`);\n htmlFileAcc.push(`cmp${globalCmpIdx}/cmp${globalCmpIdx}.component.html`);\n selectorAcc.push(`app-cmp${globalCmpIdx}`);\n globalCmpIdx++;\n }\n\n // Write a BUILD file to build the module\n writeModuleBuildFile(`src/app/${feature.path}/module${modIdx}/BUILD.bazel`, { modIdx, scssFileAcc, tsFileAcc, htmlFileAcc });\n\n // Update feature modules with extra dependencies ie, MaterialModule, FormsModule...\n updateNgModuleWithExtraDeps(`src/app/${feature.path}/module${modIdx}/module${modIdx}.module.ts`, {\n className: `Module${modIdx}Module`\n });\n }\n\n // Reference all the component selectors in the feature module's index component\n referenceComponents(`src/app/${feature.path}/index/index.component.html`, { selectorAcc });\n\n // Wire up routing for the feature module\n updateRoutesInFeatureModule(`src/app/${feature.path}/${feature.path}.module.ts`);\n\n // Write a BUILD file to build the feature module\n writeFeatureModuleBuildFile(`src/app/${feature.path}/BUILD.bazel`, { name: feature.path, featureModuleDeps });\n }\n}" }, { "path": "tools/generator/src/feature-names.js", "content": "module.exports.FEATURES = [\n { path: 'billing', icon: 'credit_card' },\n { path: 'compute', icon: 'memory' },\n { path: 'datastore', icon: 'view_agenda' },\n { path: 'functions', icon: 'functions' },\n { path: 'logging', icon: 'format_align_left' },\n { path: 'monitoring', icon: 'device_unknown' },\n { path: 'networking', icon: 'settings_ethernet' },\n { path: 'registry', icon: 'ballot' },\n { path: 'storage', icon: 'folder' },\n { path: 'support', icon: 'headset_mic' }\n];\n" }, { "path": "tools/generator/src/generate.js", "content": "\nconst { makeFeatureModule } = require('./create-feature-module');\nconst { updateRoutesInAppComponentHtml, updateRoutesInNgModule } = require('./ng-module');\nconst { FEATURES } = require('./feature-names');\n\nmodule.exports = function(argv) {\n // Create all feature modules and update BUILD files\n FEATURES.forEach(makeFeatureModule(argv));\n\n // Update routing module with routes definition\n updateRoutesInNgModule(\n `src/app/app-routing.module.ts`, {routes: FEATURES.map(_feature => _feature.path)});\n\n // Update src/app/app.component.html with links to the new generated modules\n updateRoutesInAppComponentHtml('src/app/app.component.html', {features: FEATURES});\n}" }, { "path": "tools/generator/src/ng-module.js", "content": "const fs = require('fs');\nconst { Project, ts } = require('ts-morph');\nconst { FEATURES } = require('./feature-names');\nconst { humanize, routeLinkRegex } = require('./utils');\n\nmodule.exports.updateNgModule = function updateNgModule(ngAppModulePath = 'src/app/app.module.ts') {\n // 0-setup\n const project = new Project();\n project.addExistingSourceFiles(ngAppModulePath);\n const importedFeautreModules = [];\n\n // 1-clean import statements in app.module.ts\n const ngAppModuleFile = project.getSourceFile(ngAppModulePath);\n ngAppModuleFile.getImportDeclarations().forEach(importDeclaration => {\n\n // get the import statment:\n // eg: import {LoggingModule} from './logging/logging.module';\n\n const imp = importDeclaration.print();\n FEATURES.forEach(feature => {\n if (imp.includes(feature.path)) {\n\n // we assume there is only one import, eg: {LoggingModule}\n // not many: {LoggingModule, BillingModule, UserModule}\n const moduleName = importDeclaration.getNamedImports().pop();\n importedFeautreModules.push(moduleName.print());\n importDeclaration.remove();\n }\n });\n\n });\n\n\n // 2-clean the @NgModule.imports array in app.module.ts\n const ngAppModuleClass = ngAppModuleFile.getClass('AppModule');\n const ngModuleDecorator = ngAppModuleClass.getDecorator('NgModule');\n const ngModuleDecoratorArgs = ngModuleDecorator.getArguments().pop();\n\n const cleanImportedFeatureModules = ngModuleDecoratorArgs.getProperty('imports').getDescendantsOfKind(ts.SyntaxKind.ArrayLiteralExpression).pop();\n importedFeautreModules.forEach(featureName => {\n cleanImportedFeatureModules.getElements().forEach(element => {\n if (featureName === element.getText()) {\n cleanImportedFeatureModules.removeElement(element);\n }\n });\n });\n\n console.log(`\u001dUPDATE ${ngAppModulePath}`);\n\n project.saveSync();\n};\n\nmodule.exports.removeRoutesFromNgModule = function removeRoutesFromNgModule(\n ngAppRoutingModulePath = 'src/app/app-routing.module.ts') {\n // 0-setup\n const project = new Project();\n project.addExistingSourceFiles(ngAppRoutingModulePath);\n\n // 1- clean the route statements in app-routing.module.ts\n const ngAppRoutingModuleFile = project.getSourceFile(ngAppRoutingModulePath);\n\n try {\n var routesArray = ngAppRoutingModuleFile.getVariableDeclaration('routes').getDescendantsOfKind(ts.SyntaxKind.ArrayLiteralExpression).pop();\n } catch (error) {\n console.error('ERROR', `couldn't find declaration 'routes' in '${ngAppRoutingModulePath}'.`);\n process.exit(1);\n }\n\n const featureRoutePaths = FEATURES.map(feature => feature.path);\n\n routesArray.getElements().forEach(route => {\n\n // route is:\n // {\n // path: 'billing',\n // pathMatch: 'full',\n // loadChildren: () => import('./billing/billing.module.ngfactory').then(m => m.BillingModuleNgFactory)\n // }\n\n const path = route.getProperty('path').getInitializer().getLiteralValue();\n if (featureRoutePaths.includes(path)) {\n routesArray.removeElement(route);\n }\n\n });\n\n console.log(`\u001dUPDATE ${ngAppRoutingModulePath}`);\n\n project.saveSync();\n};\n\nmodule.exports.removeRoutesFromAppComponentHtml = function removeRoutesFromAppComponentHtml(\n file = 'src/app/app.component.html') {\n const appComponent = fs.readFileSync(file, { encoding: 'utf-8' });\n\n fs.writeFileSync(file, appComponent.replace(routeLinkRegex, ''));\n\n console.log(`UPDATE ${file}`);\n};\n\nmodule.exports.updateRoutesInNgModule = function updateRoutesInNgModule(\n ngAppRoutingModulePath = 'src/app/app-routing.module.ts', {routes}) {\n // 0-setup\n const project = new Project();\n project.addExistingSourceFiles(ngAppRoutingModulePath);\n\n // 1- add route statements in app-routing.module.ts\n const ngAppRoutingModuleFile = project.getSourceFile(ngAppRoutingModulePath);\n\n try {\n var routesArray = ngAppRoutingModuleFile.getVariableDeclaration('routes').getDescendantsOfKind(ts.SyntaxKind.ArrayLiteralExpression).pop();\n } catch (error) {\n console.error('ERROR', `couldn't find declaration 'routes' in '${ngAppRoutingModulePath}'.`);\n process.exit(1);\n }\n\n routes.forEach(route => {\n // write a route definition, eg:\n // {\n // path: '${route}',\n // pathMatch: 'full',\n // loadChildren: () =>\n // import('./${route}/${route}.module.ngfactory').then(m => m.HelloWorldModuleNgFactory)\n // }\n\n if (routesArray.print().includes(route)) {\n console.log(`SKIP ${ngAppRoutingModulePath} (${route})`);\n }\n else {\n routesArray.addElement(writer =>\n writer.writeLine('{')\n .writeLine(`path: '${route}',`)\n .writeLine(`pathMatch: 'full',`)\n .writeLine(`loadChildren: () => import('./${route}/${route}.module.ngfactory').then(m => m.${humanize(route, true)}ModuleNgFactory)`)\n .writeLine('}')\n );\n }\n });\n\n console.log(`\u001dUPDATE ${ngAppRoutingModulePath}`);\n project.saveSync();\n};\n\nmodule.exports.updateRoutesInFeatureModule = function updateRoutesInFeatureModule(file) {\n const originalFeatureModuleContent =\n fs.readFileSync(file, { encoding: 'utf-8' });\n\n if (originalFeatureModuleContent.includes('RouterModule')) {\n console.log(`SKIP ${file} (RouterModule)`);\n return true;\n }\n\n fs.writeFileSync(\n file,\n originalFeatureModuleContent\n .replace('CommonModule,', `CommonModule,\nRouterModule.forChild([{path: '', component: IndexComponent}]),`)\n .replace(\n `from '@angular/common';`,\n `from '@angular/common';\\nimport { RouterModule } from '@angular/router';`));\n};\n\n\nmodule.exports.updateRoutesInAppComponentHtml = function updateRoutesInAppComponentHtml(\n file = 'src/app/app.component.html', {features}) {\n let appComponent =\n fs.readFileSync(file, { encoding: 'utf-8' });\n\n const linkTemplate = (feature) => ` ${feature.icon} ${humanize(feature.path)} `;\n\n features.forEach(feature => {\n if (!appComponent.includes(`routerLink=\"/${feature.path}\"`)) {\n appComponent = appComponent.replace('', `${linkTemplate(feature)}\\n `);\n }\n });\n\n fs.writeFileSync(file, appComponent);\n\n console.log(`UPDATE ${file}`);\n};\n\nmodule.exports.updateNgModuleWithExtraDeps = function updateNgModuleWithExtraDeps(\n featureNgModule, {className}) {\n // 0-setup\n const project = new Project();\n project.addExistingSourceFiles(featureNgModule);\n\n // 1- add extra imports required by this module\n // eg: import { MaterialModule } from '../../../shared/material/material.module';\n const featureNgModuleFile = project.getSourceFile(featureNgModule);\n\n if (featureNgModuleFile.print().includes('MaterialModule')) {\n console.log(`SKIP ${featureNgModule} (${className})`);\n return true;\n }\n\n featureNgModuleFile.addImportDeclarations([{\n defaultImport: '{ ReactiveFormsModule }',\n moduleSpecifier: '@angular/forms'\n }, {\n defaultImport: '{ MaterialModule }',\n // TODO(manekinekko): use TS path aliases\n moduleSpecifier: '../../../shared/material/material.module'\n }]);\n\n // 2-add MaterialModule to @NgModule.imports\n const ngAppModuleClass = featureNgModuleFile.getClass(className);\n const ngModuleDecorator = ngAppModuleClass.getDecorator('NgModule');\n const ngModuleDecoratorArgs = ngModuleDecorator.getArguments().pop();\n const importedModules = ngModuleDecoratorArgs.getProperty('imports').getDescendantsOfKind(ts.SyntaxKind.ArrayLiteralExpression).pop();\n importedModules.addElements(['ReactiveFormsModule', 'MaterialModule']);\n\n console.log(`\u001dUPDATE ${featureNgModule}`);\n\n project.saveSync();\n};" }, { "path": "tools/generator/src/ng.js", "content": "\nconst { spawnSync } = require('child_process');\nconst fs = require('fs');\nconst { humanize } = require('./utils');\n\nmodule.exports.ng = function ng(...args) {\n spawnSync('ng', args, {stdio: 'inherit'});\n};\n\nconst cmpIdx = 0;\nmodule.exports.ngFromTemplate = function ngFromTemplate(...args) {\n const {featureName, componentName} = args.pop();\n\n // reconstruct the final component filepath\n // NOTE: args[2] = billing/module0/cmp0\n const componentDestinationFile = `src/app/${args[2]}/${componentName}.component`;\n const templateDir = 'tools/generator/templates';\n const templateTypes = ['form', 'dashboard', 'table'];\n const copyFromTemplate = (destinationFile, templateName, fileType) => {\n destinationFile = `${destinationFile}.${fileType}`;\n\n let content = fs.readFileSync(\n `${templateDir}/${templateName}/component.${fileType}`, {encoding: 'utf-8'});\n\n content = content.replace(/__name__/g, componentName)\n .replace(/__Feature__/g, humanize(featureName, true))\n .replace(/__Name__/g, humanize(componentName, true));\n\n fs.writeFileSync(destinationFile, content);\n\n console.log('UPDATE', destinationFile, `(${templateName})`);\n };\n\n // run ng and generate the component\n spawnSync('ng', args, {stdio: 'inherit'});\n\n // cycle through template directories (so the generation is stable)\n const templateName = templateTypes[cmpIdx % templateTypes.length];\n // copy template contents\n copyFromTemplate(componentDestinationFile, templateName, 'ts');\n copyFromTemplate(componentDestinationFile, templateName, 'spec.ts');\n copyFromTemplate(componentDestinationFile, templateName, 'scss');\n copyFromTemplate(componentDestinationFile, templateName, 'html');\n};\n" }, { "path": "tools/generator/src/reference-components.js", "content": "const fs = require('fs');\n\nmodule.exports.referenceComponents = function referenceComponents(file, {selectorAcc}) {\n fs.writeFileSync(\n file,\n selectorAcc.map(s => `<${s}>`).join('\\n'));\n};" }, { "path": "tools/generator/src/utils.js", "content": "const { FEATURES } = require('./feature-names');\n\n// This will match\"\n// folder Storage \nmodule.exports.routeLinkRegex = new RegExp(` feature.path).join('|')})\">[\\\\w\\\\W\\\\s'\"<>]+?<\\/a>`, 'mg');\n\n// Transforms \"word-word\" to \"Word Word\" or \"WordWord\"\nmodule.exports.humanize = function humanize(str, removeSpaces = false) {\n str = str.replace(/\\-/g, ' ')\n .trim()\n // lowercase all word blocks\n .replace(/\\b[A-Za-z]+\\b/g, (word) => word.toLowerCase())\n // uppercase first letter of each block\n .replace(/(^[a-z]|\\s[a-z])/g, (first) => first.toUpperCase())\n\n if (removeSpaces) {\n str = str.replace(/\\s*/g, '');\n }\n\n return str;\n};" }, { "path": "tools/generator/templates/dashboard/component.html", "content": "
\n

__Feature__ – Dashboard

\n \n \n \n \n \n {{card.title}}\n \n \n \n \n \n \n \n \n
Card Content Here
\n \n \n \n \n
\n" }, { "path": "tools/generator/templates/dashboard/component.scss", "content": ".grid-container {\n margin: 20px;\n}\n\n.dashboard-card {\n position: absolute;\n top: 15px;\n left: 15px;\n right: 15px;\n bottom: 15px;\n}\n\n.more-button {\n position: absolute;\n top: 5px;\n right: 10px;\n}\n\n.dashboard-card-content {\n text-align: center;\n}\n" }, { "path": "tools/generator/templates/dashboard/component.spec.ts", "content": "import {LayoutModule} from '@angular/cdk/layout';\nimport {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\nimport {MatButtonModule, MatCardModule, MatGridListModule, MatIconModule, MatMenuModule,} from '@angular/material';\nimport {NoopAnimationsModule} from '@angular/platform-browser/animations';\n\nimport {__Name__Component} from './__name__.component';\n\ndescribe('__Name__Component', () => {\n let component: __Name__Component;\n let fixture: ComponentFixture<__Name__Component>;\n\n beforeEach(async(() => {\n TestBed\n .configureTestingModule({\n declarations: [__Name__Component],\n imports: [\n NoopAnimationsModule,\n LayoutModule,\n MatButtonModule,\n MatCardModule,\n MatGridListModule,\n MatIconModule,\n MatMenuModule,\n ],\n schemas: [NO_ERRORS_SCHEMA]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(__Name__Component);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n // Make the test more realistic by doing lots of assertions\n for (let i = 0; i < 50; i++) {\n it(`should compile ${i}`, () => {\n expect(component).toBeTruthy();\n });\n }\n});\n" }, { "path": "tools/generator/templates/dashboard/component.ts", "content": "import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';\nimport {Component} from '@angular/core';\nimport {Observable} from 'rxjs';\nimport {map} from 'rxjs/operators';\n\n@Component({\n selector: 'app-__name__',\n templateUrl: './__name__.component.html',\n styleUrls: ['./__name__.component.css']\n})\nexport class __Name__Component {\n /** Based on the screen size, switch from standard to one column per row */\n cards: Observable<{title: string; cols: number; rows: number;}[]> =\n this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(({matches}) => {\n if (matches) {\n return [\n {title: 'Card 1', cols: 1, rows: 1}, {title: 'Card 2', cols: 1, rows: 1},\n {title: 'Card 3', cols: 1, rows: 1}, {title: 'Card 4', cols: 1, rows: 1}\n ];\n }\n\n return [\n {title: 'Card 1', cols: 2, rows: 1}, {title: 'Card 2', cols: 1, rows: 1},\n {title: 'Card 3', cols: 1, rows: 2}, {title: 'Card 4', cols: 1, rows: 1}\n ];\n }));\n\n constructor(private breakpointObserver: BreakpointObserver) {}\n}\n" }, { "path": "tools/generator/templates/form/component.html", "content": "
\n \n \n Billing\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n First name is required\n \n \n
\n
\n \n \n \n Last name is required\n \n \n
\n
\n
\n
\n \n \n \n Address is required\n \n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n City is required\n \n \n
\n
\n \n \n \n {{ state.name }}\n \n \n \n State is required\n \n \n
\n
\n
\n
\n \n \n {{postalCode.value.length}} / 5\n \n
\n
\n
\n
\n \n Free Shipping\n Priority Shipping\n Next Day Shipping\n \n
\n
\n \n \n \n \n \n
" }, { "path": "tools/generator/templates/form/component.scss", "content": ".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: block;\n margin: 5px 0;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n}\n\n.col {\n flex: 1;\n margin-right: 20px;\n}\n\n.col:last-child {\n margin-right: 0;\n}\n" }, { "path": "tools/generator/templates/form/component.spec.ts", "content": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport { async, ComponentFixture, TestBed } from '@angular/core/testing';\nimport {ReactiveFormsModule} from '@angular/forms';\nimport {MatButtonModule, MatCardModule, MatInputModule, MatRadioModule, MatSelectModule,} from '@angular/material';\nimport {NoopAnimationsModule} from '@angular/platform-browser/animations';\n\nimport { __Name__Component } from './__name__.component';\n\ndescribe('__Name__Component', () => {\n let component: __Name__Component;\n let fixture: ComponentFixture<__Name__Component>;\n\n beforeEach(async(() => {\n TestBed\n .configureTestingModule({\n declarations: [__Name__Component],\n imports: [\n NoopAnimationsModule,\n ReactiveFormsModule,\n MatButtonModule,\n MatCardModule,\n MatInputModule,\n MatRadioModule,\n MatSelectModule,\n ],\n schemas: [NO_ERRORS_SCHEMA]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(__Name__Component);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n // Make the test more realistic by doing lots of assertions\n for (let i = 0; i < 50; i++) {\n it('should compile', () => {\n expect(component).toBeTruthy();\n });\n }\n});\n" }, { "path": "tools/generator/templates/form/component.ts", "content": "import {Component} from '@angular/core';\nimport {FormBuilder, FormGroup, Validators} from '@angular/forms';\n\n@Component({\n selector: 'app-__name__',\n templateUrl: './__name__.component.html',\n styleUrls: ['./__name__.component.scss']\n})\nexport class __Name__Component {\n addressForm: FormGroup = this.fb.group({\n company: null,\n firstName: [null, Validators.required],\n lastName: [null, Validators.required],\n address: [null, Validators.required],\n address2: null,\n city: [null, Validators.required],\n state: [null, Validators.required],\n postalCode:\n [\n null,\n Validators.compose(\n [Validators.required, Validators.minLength(5), Validators.maxLength(5)])\n ],\n shipping: ['free', Validators.required]\n });\n\n hasUnitNumber = false;\n\n states = [\n {name: 'Alabama', abbreviation: 'AL'},\n {name: 'Alaska', abbreviation: 'AK'},\n {name: 'American Samoa', abbreviation: 'AS'},\n {name: 'Arizona', abbreviation: 'AZ'},\n {name: 'Arkansas', abbreviation: 'AR'},\n {name: 'California', abbreviation: 'CA'},\n {name: 'Colorado', abbreviation: 'CO'},\n {name: 'Connecticut', abbreviation: 'CT'},\n {name: 'Delaware', abbreviation: 'DE'},\n {name: 'District Of Columbia', abbreviation: 'DC'},\n {name: 'Federated States Of Micronesia', abbreviation: 'FM'},\n {name: 'Florida', abbreviation: 'FL'},\n {name: 'Georgia', abbreviation: 'GA'},\n {name: 'Guam', abbreviation: 'GU'},\n {name: 'Hawaii', abbreviation: 'HI'},\n {name: 'Idaho', abbreviation: 'ID'},\n {name: 'Illinois', abbreviation: 'IL'},\n {name: 'Indiana', abbreviation: 'IN'},\n {name: 'Iowa', abbreviation: 'IA'},\n {name: 'Kansas', abbreviation: 'KS'},\n {name: 'Kentucky', abbreviation: 'KY'},\n {name: 'Louisiana', abbreviation: 'LA'},\n {name: 'Maine', abbreviation: 'ME'},\n {name: 'Marshall Islands', abbreviation: 'MH'},\n {name: 'Maryland', abbreviation: 'MD'},\n {name: 'Massachusetts', abbreviation: 'MA'},\n {name: 'Michigan', abbreviation: 'MI'},\n {name: 'Minnesota', abbreviation: 'MN'},\n {name: 'Mississippi', abbreviation: 'MS'},\n {name: 'Missouri', abbreviation: 'MO'},\n {name: 'Montana', abbreviation: 'MT'},\n {name: 'Nebraska', abbreviation: 'NE'},\n {name: 'Nevada', abbreviation: 'NV'},\n {name: 'New Hampshire', abbreviation: 'NH'},\n {name: 'New Jersey', abbreviation: 'NJ'},\n {name: 'New Mexico', abbreviation: 'NM'},\n {name: 'New York', abbreviation: 'NY'},\n {name: 'North Carolina', abbreviation: 'NC'},\n {name: 'North Dakota', abbreviation: 'ND'},\n {name: 'Northern Mariana Islands', abbreviation: 'MP'},\n {name: 'Ohio', abbreviation: 'OH'},\n {name: 'Oklahoma', abbreviation: 'OK'},\n {name: 'Oregon', abbreviation: 'OR'},\n {name: 'Palau', abbreviation: 'PW'},\n {name: 'Pennsylvania', abbreviation: 'PA'},\n {name: 'Puerto Rico', abbreviation: 'PR'},\n {name: 'Rhode Island', abbreviation: 'RI'},\n {name: 'South Carolina', abbreviation: 'SC'},\n {name: 'South Dakota', abbreviation: 'SD'},\n {name: 'Tennessee', abbreviation: 'TN'},\n {name: 'Texas', abbreviation: 'TX'},\n {name: 'Utah', abbreviation: 'UT'},\n {name: 'Vermont', abbreviation: 'VT'},\n {name: 'Virgin Islands', abbreviation: 'VI'},\n {name: 'Virginia', abbreviation: 'VA'},\n {name: 'Washington', abbreviation: 'WA'},\n {name: 'West Virginia', abbreviation: 'WV'},\n {name: 'Wisconsin', abbreviation: 'WI'},\n {name: 'Wyoming', abbreviation: 'WY'}\n ];\n\n constructor(private fb: FormBuilder) {}\n\n onSubmit() {\n alert('Thanks!');\n }\n}\n" }, { "path": "tools/generator/templates/table/component.html", "content": "\n \n\n\n
\n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n
ID {{row.id}} Progress {{row.progress}}% Name {{row.name}} Color {{row.color}}
\n\n \n
" }, { "path": "tools/generator/templates/table/component.scss", "content": "table {\n width: 100%;\n}\n\n.mat-form-field {\n font-size: 14px;\n width: 100%;\n}\n\ntd, th {\n width: 25%;\n}\n" }, { "path": "tools/generator/templates/table/component.spec.ts", "content": "import {NO_ERRORS_SCHEMA} from '@angular/core';\nimport {async, ComponentFixture, TestBed} from '@angular/core/testing';\nimport {ReactiveFormsModule} from '@angular/forms';\nimport {MatPaginatorModule, MatSortModule, MatTableModule} from '@angular/material';\nimport {NoopAnimationsModule} from '@angular/platform-browser/animations';\n\nimport {__Name__Component} from './__name__.component';\n\ndescribe('__Name__Component', () => {\n let component: __Name__Component;\n let fixture: ComponentFixture<__Name__Component>;\n\n beforeEach(async(() => {\n TestBed\n .configureTestingModule({\n declarations: [__Name__Component],\n imports: [\n NoopAnimationsModule,\n ReactiveFormsModule,\n MatTableModule,\n MatPaginatorModule,\n MatSortModule,\n ],\n schemas: [NO_ERRORS_SCHEMA]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(__Name__Component);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n // Make the test more realistic by doing lots of assertions\n for (let i = 0; i < 50; i++) {\n it('should compile', () => {\n expect(component).toBeTruthy();\n });\n }\n});\n" }, { "path": "tools/generator/templates/table/component.ts", "content": "import {Component, OnInit, ViewChild} from '@angular/core';\nimport {MatPaginator} from '@angular/material/paginator';\nimport {MatSort} from '@angular/material/sort';\nimport {MatTableDataSource} from '@angular/material/table';\n\nexport interface UserData {\n id: string;\n name: string;\n progress: string;\n color: string;\n}\n\n/** Constants used to fill up our data base. */\nconst COLORS: string[] = [\n 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',\n 'aqua', 'blue', 'navy', 'black', 'gray'\n];\nconst NAMES: string[] = [\n 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',\n 'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'\n];\n\n/**\n * @title Data table with sorting, pagination, and filtering.\n */\n@Component({\n selector: 'app-__name__',\n styleUrls: ['__name__.component.scss'],\n templateUrl: '__name__.component.html',\n})\nexport class __Name__Component implements OnInit {\n displayedColumns: string[] = ['id', 'name', 'progress', 'color'];\n dataSource: MatTableDataSource;\n\n @ViewChild(MatPaginator) paginator: MatPaginator;\n @ViewChild(MatSort) sort: MatSort;\n\n constructor() {\n // Create 1000 users\n const users = Array.from({length: 1000}, (_, k) => createNewUser(k + 1));\n\n // Assign the data to the data source for the table to render\n this.dataSource = new MatTableDataSource(users);\n }\n\n ngOnInit() {\n this.dataSource.paginator = this.paginator;\n this.dataSource.sort = this.sort;\n }\n\n applyFilter(filterValue: string) {\n this.dataSource.filter = filterValue.trim().toLowerCase();\n\n if (this.dataSource.paginator) {\n this.dataSource.paginator.firstPage();\n }\n }\n}\n\n/** Builds and returns a new User. */\nfunction createNewUser(id: number): UserData {\n const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +\n NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';\n\n return {\n id: id.toString(),\n name: name,\n progress: Math.round(Math.random() * 100).toString(),\n color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]\n };\n}" } ]