angular · atscott · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/aio/content/examples/upgrade-module/BUILD.bazel b/aio/content/examples/upgrade-module/BUILD.bazel
@@ -8,9 +8,5 @@ docs_example(
     flaky = True,  # TODO: figure out why this is flaky or times out
     # This example downloads and inlines resources
     test_exec_properties = ENABLE_NETWORK,
-    test_tags = [
-        "requires-network",
-        # This is currently broken due to usage of ESM2022 which does not work out-of-the-box with system.js.
-        "broken",
-    ],
+    test_tags = ["requires-network"],
 )
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/BUILD.bazel b/aio/content/examples/upgrade-phonecat-2-hybrid/BUILD.bazel
@@ -8,9 +8,5 @@ docs_example(
     flaky = True,  # TODO: figure out why this is flaky or times out
     # This example downloads and inlines resources
     test_exec_properties = ENABLE_NETWORK,
-    test_tags = [
-        "requires-network",
-        # This is currently broken due to usage of ESM2022 which does not work out-of-the-box with system.js.
-        "broken",
-    ],
+    test_tags = ["requires-network"],
 )
diff --git a/aio/content/examples/upgrade-phonecat-3-final/BUILD.bazel b/aio/content/examples/upgrade-phonecat-3-final/BUILD.bazel
@@ -5,5 +5,4 @@ package(default_visibility = ["//visibility:public"])
 docs_example(
     name = "upgrade-phonecat-3-final",
     flaky = True,  # TODO: figure out why this is flaky or times out
-    test_tags = ["broken"],  # This is currently broken due to usage of ESM2022 which does not work out-of-the-box with system.js.
 )
diff --git a/aio/package.json b/aio/package.json
@@ -12,10 +12,10 @@
     "build-prod": "yarn build --config=release",
     "build-local": "yarn build --config=aio_local_deps",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint && yarn security-lint",
-    "test": "bazel test //aio:test --test_output=streamed --test_tag_filters=-broken",
-    "test-and-watch": "ibazel test //aio:test-and-watch --test_output=streamed --test_tag_filters=-broken",
+    "test": "bazel test //aio:test --test_output=streamed",
+    "test-and-watch": "ibazel test //aio:test-and-watch --test_output=streamed",
     "test-local": "yarn test --config=aio_local_deps",
-    "test:ci": "bazel test //aio/... --test_tag_filters=-broken",
+    "test:ci": "bazel test //aio/...",
     "test-local:ci": "yarn test:ci --config=aio_local_deps",
     "e2e": "bazel test //aio:e2e",
     "e2e-local": "yarn e2e --config=aio_local_deps",

diff --git a/integration/hello_world__closure/BUILD.bazel b/integration/hello_world__closure/BUILD.bazel
@@ -0,0 +1,11 @@
+load("//integration:index.bzl", "ng_integration_test")
+
+ng_integration_test(
+    name = "test",
+    # TODO: Re-enable size-tracking:
+    # We should define ngDevMode to false in Closure, but --define only works in the global scope.
+    # With ngDevMode not being set to false, this size tracking test provides little value but a lot of
+    # headache to continue updating the size.
+    # track_payload_size = "hello_world_closure",
+    setup_chromium = True,
+)
diff --git a/integration/hello_world__closure/closure.conf b/integration/hello_world__closure/closure.conf
@@ -0,0 +1,20 @@
+--compilation_level=SIMPLE
+--language_in=ECMASCRIPT_2020
+--language_out=ECMASCRIPT_2020
+--js_output_file=dist/bundle.js
+--output_manifest=dist/manifest.MF
+--variable_renaming_report=dist/variable_renaming_report
+--property_renaming_report=dist/property_renaming_report
+--create_source_map=%outname%.map
+
+--warning_level=QUIET
+--dependency_mode=PRUNE
+--rewrite_polyfills=false
+
+--module_resolution=node
+--package_json_entry_names es2020,module
+
+node_modules/zone.js/zone_externs.js
+
+--js built/bundle.js
+--entry_point=built/bundle.js
diff --git a/integration/hello_world__closure/e2e/app.e2e-spec.ts b/integration/hello_world__closure/e2e/app.e2e-spec.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+describe('Hello world E2E Tests', function () {
+  it('should display: Hello world!', function () {
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getText()).toEqual('Hello world!');
+    element(by.css('input')).sendKeys('!');
+    expect(div.getText()).toEqual('Hello world!!');
+  });
+});
diff --git a/integration/hello_world__closure/e2e/browser.config.json b/integration/hello_world__closure/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 4202,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
diff --git a/integration/hello_world__closure/e2e/protractor.config.js b/integration/hello_world__closure/e2e/protractor.config.js
@@ -0,0 +1,21 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  chromeDriver: process.env.CHROMEDRIVER_BIN,
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio']
+    }
+  },
+  directConnect: true,
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4202`
+  baseUrl: 'http://localhost:4202/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/hello_world__closure/e2e/tsconfig.json b/integration/hello_world__closure/e2e/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine", "jasminewd2"],
+  }
+}
diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "angular-integration",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/elements": "file:../../dist/packages-dist/elements",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "file:../../node_modules/typescript",
+    "tslib": "file:../../node_modules/tslib",
+    "zone.js": "file:../../dist/zone.js-dist/archive/zone.js.tgz"
+  },
+  "devDependencies": {
+    "@babel/core": "file:../../node_modules/@babel/core",
+    "@rollup/plugin-babel": "file:../../node_modules/@rollup/plugin-babel",
+    "@rollup/plugin-node-resolve": "file:../../node_modules/@rollup/plugin-node-resolve",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
+    "concurrently": "3.4.0",
+    "google-closure-compiler": "file:../../node_modules/google-closure-compiler",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor",
+    "rollup": "file:../../node_modules/rollup",
+    "tsickle": "file:../../node_modules/tsickle"
+  },
+  "scripts": {
+    "closure": "google-closure-compiler --flagfile closure.conf",
+    "build": "yarn ngc && yarn rollup -c rollup.config.mjs && yarn closure",
+    "test": "yarn build && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
+    "serve": "lite-server -c e2e/browser.config.json",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js"
+  }
+}
diff --git a/integration/hello_world__closure/rollup.config.mjs b/integration/hello_world__closure/rollup.config.mjs
@@ -0,0 +1,27 @@
+import {nodeResolve} from '@rollup/plugin-node-resolve';
+import {babel} from '@rollup/plugin-babel';
+import {ConsoleLogger, NodeJSFileSystem, LogLevel} from '@angular/compiler-cli';
+import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
+
+/** File system used by the Angular linker plugin. */
+const fileSystem = new NodeJSFileSystem();
+/** Logger used by the Angular linker plugin. */
+const logger = new ConsoleLogger(LogLevel.info);
+/** Linker babel plugin. */
+const linkerPlugin = createEs2015LinkerPlugin({
+  fileSystem,
+  logger,
+  linkerJitMode: false,
+});
+
+export default {
+  input: './built/src/main.js',
+  output: {
+    file: './built/bundle.js',
+    format: 'iife'
+  },
+  plugins: [
+    nodeResolve(),
+    babel({plugins: [linkerPlugin]}),
+  ]
+}
diff --git a/integration/hello_world__closure/src/app.ts b/integration/hello_world__closure/src/app.ts
@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}
diff --git a/integration/hello_world__closure/src/hello-world.component.ts b/integration/hello_world__closure/src/hello-world.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+    <input type="text" [value]="name" (input)="name = $event.target.value"/>
+  `,
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/hello_world__closure/src/index.html b/integration/hello_world__closure/src/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+</head>
+
+<body>
+  <hello-world-app>Loading...</hello-world-app>
+
+  <script src="node_modules/zone.js/bundles/zone.umd.min.js"></script>
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>
diff --git a/integration/hello_world__closure/src/main.ts b/integration/hello_world__closure/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModule} from './app';
+
+platformBrowser().bootstrapModule(AppModule);
diff --git a/integration/hello_world__closure/tsconfig.json b/integration/hello_world__closure/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+  },
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "types": []
+  },
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}
diff --git a/integration/i18n/BUILD.bazel b/integration/i18n/BUILD.bazel
@@ -0,0 +1,6 @@
+load("//integration:index.bzl", "ng_integration_test")
+
+ng_integration_test(
+    name = "test",
+    setup_chromium = True,
+)
diff --git a/integration/i18n/closure.conf b/integration/i18n/closure.conf
@@ -0,0 +1,20 @@
+--compilation_level=SIMPLE
+--language_in=ECMASCRIPT_2020
+--language_out=ECMASCRIPT_2020
+--js_output_file=dist/bundle.js
+--output_manifest=dist/manifest.MF
+--variable_renaming_report=dist/variable_renaming_report
+--property_renaming_report=dist/property_renaming_report
+--create_source_map=%outname%.map
+
+--warning_level=QUIET
+--dependency_mode=PRUNE
+--rewrite_polyfills=false
+
+--module_resolution=node
+--package_json_entry_names es2020,module
+
+node_modules/zone.js/zone_externs.js
+
+--js built/bundle.js
+--entry_point=built/bundle.js
diff --git a/integration/i18n/e2e/app.e2e-spec.ts b/integration/i18n/e2e/app.e2e-spec.ts
@@ -0,0 +1,10 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', function () {
+  it('remove i18n attributes', function () {
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getAttribute('title')).not.toBe(null);
+    expect(div.getAttribute('i18n')).toBe(null);
+  });
+});
diff --git a/integration/i18n/e2e/browser.config.json b/integration/i18n/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 4204,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
diff --git a/integration/i18n/e2e/protractor.config.js b/integration/i18n/e2e/protractor.config.js
@@ -0,0 +1,21 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  chromeDriver: process.env.CHROMEDRIVER_BIN,
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: process.env.CHROME_BIN,
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio']
+    }
+  },
+  directConnect: true,
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4204`
+  baseUrl: 'http://localhost:4204/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/i18n/e2e/tsconfig.json b/integration/i18n/e2e/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine", "jasminewd2"],
+  }
+}