[pull] master from angular:master

.circleci/config.yml

@@ -609,6 +609,14 @@ jobs:
           command: 'openssl aes-256-cbc -d -in .circleci/github_token -md md5 -k "${KEY}" -out ~/.git_credentials'
       - run: ./scripts/ci/publish-build-artifacts.sh
 
+  aio_misc:
+    executor: default-executor
+    steps:
+      - custom_attach_workspace
+      - run:
+          name: Check website provided in contributors.json file
+          command: yarn node aio/scripts/test-external-urls.js
+
   aio_monitoring_stable:
     executor: default-executor
     steps:
@@ -879,6 +887,9 @@ workflows:
   monitoring:
     jobs:
       - setup
+      - aio_misc:
+          requires:
+            - setup
       - aio_monitoring_stable:
           requires:
             - setup

.github/workflows/feature-requests.yml

@@ -1,13 +1,15 @@
 name: Feature request triage bot
 
-on: [workflow_dispatch]
+on:
+  schedule:
+    # Run at 14:00 every day
+    - cron: '0 14 * * *'
 
 jobs:
   feature_triage:
     if: github.repository == 'angular/angular'
     runs-on: ubuntu-latest
     steps:
-      - uses: angular/dev-infra/github-actions/feature-request@698f598d8a5ebc6917989512e8a3defc830ac06f
+      - uses: angular/dev-infra/github-actions/feature-request@a3fb5e24b659411f1163461a778a1fa79e119d2f
         with:
           angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
-          limit: 50

CHANGELOG.md

@@ -1,3 +1,38 @@
+<a name="12.0.2"></a>
+# 12.0.2 (2021-05-26)
+### forms
+| Commit | Description |
+| -- | -- |
+| 19d7bf4162 | fix(forms): Add float number support for min and max validator (#42223) |
+### migrations
+| Commit | Description |
+| -- | -- |
+| 11c7bec065 | fix(migrations): add migration to replace `/deep/` with `::ng-deep` (#42214) |
+### platform-browser
+| Commit | Description |
+| -- | -- |
+| 84ab81c286 | fix(platform-browser): update started state on reset (#41608) |
+## Special Thanks:
+Alan Agius, Andrew Scott, David Shevitz, George Kalpakas, Igor Minar, Joey Perrott, Kapunahele Wong, Madleina Scheidegger, Paul Gschwendtner, Pete Bacon Darwin, Sam Severance, Teri Glover, Zach Arend, chenyunhsin, iRealNirmal, mgechev and twerske
+
+<a name="12.1.0-next.3"></a>
+# 12.1.0-next.3 (2021-05-26)
+### forms
+| Commit | Description |
+| -- | -- |
+| 3d9062dad7 | fix(forms): Add float number support for min and max validator (#42223) |
+### migrations
+| Commit | Description |
+| -- | -- |
+| 7f6213a2f4 | fix(migrations): add migration to replace `/deep/` with `::ng-deep` (#42214) |
+### platform-browser
+| Commit | Description |
+| -- | -- |
+| 3a6af8e629 | fix(platform-browser): update started state on reset (#41608) |
+## Special Thanks:
+Alan Agius, Andrew Scott, David Shevitz, George Kalpakas, Igor Minar, Joey Perrott, Kapunahele Wong, Madleina Scheidegger, Paul Gschwendtner, Pete Bacon Darwin, Renovate Bot, Sam Severance, Teri Glover, Zach Arend, chenyunhsin, iRealNirmal, mgechev and twerske
+
+
 <a name="12.1.0-next.2"></a>
 # 12.1.0-next.2 (2021-05-19)
 ### common

aio/content/examples/animations/src/app/animations.1.ts

@@ -1,11 +1,29 @@
-// #docregion
-import { animation, style, animate } from '@angular/animations';
+// #docplaster
+// #docregion animation-const, trigger-const
+import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+// #enddocregion trigger-const
 
-export const transAnimation = animation([
+export const transitionAnimation = animation([
   style({
     height: '{{ height }}',
     opacity: '{{ opacity }}',
     backgroundColor: '{{ backgroundColor }}'
   }),
   animate('{{ time }}')
 ]);
+// #enddocregion animation-const
+
+// #docregion trigger-const
+export const triggerAnimation = trigger('openClose', [
+  transition('open => closed', [
+    useAnimation(transitionAnimation, {
+      params: {
+        height: 0,
+        opacity: 1,
+        backgroundColor: 'red',
+        time: '1s'
+      }
+    })
+  ])
+]);
+// #enddocregion trigger-const

aio/content/examples/animations/src/app/animations.ts

@@ -1,4 +1,3 @@
-// #docregion reusable
 import {
   animation, trigger, animateChild, group,
   transition, animate, style, query
@@ -12,7 +11,6 @@ export const transAnimation = animation([
   }),
   animate('{{ time }}')
 ]);
-// #enddocregion reusable
 
 // Routable animations
 // #docregion route-animations

aio/content/examples/elements/src/app/app.module.ts

@@ -6,16 +6,11 @@ import { AppComponent } from './app.component';
 import { PopupComponent } from './popup.component';
 import { PopupService } from './popup.service';
 
-// Include the `PopupService` provider,
-// but exclude `PopupComponent` from compilation,
-// because it will be added dynamically.
-
 @NgModule({
   imports: [BrowserModule, BrowserAnimationsModule],
   providers: [PopupService],
   declarations: [AppComponent, PopupComponent],
   bootstrap: [AppComponent],
-  entryComponents: [PopupComponent],
 })
 export class AppModule {
 }

aio/content/examples/forms/src/app/app.module.ts

@@ -1,6 +1,7 @@
 // #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
@@ -9,6 +10,7 @@ import { HeroFormComponent } from './hero-form/hero-form.component';
 @NgModule({
   imports: [
     BrowserModule,
+    CommonModule,
     FormsModule
   ],
   declarations: [

aio/content/examples/forms/src/app/hero-form/hero-form.component.html

@@ -147,7 +147,7 @@ <h1>Hero Form</h1>
       <form #heroForm="ngForm">
       <!-- #enddocregion template-variable-->
     <!-- #docregion ngModel-2-->
-        {{diagnostic}}
+        {{ model | json }}
         <div class="form-group">
           <label for="name">Name</label>
           <input type="text" class="form-control" id="name"

aio/content/examples/forms/src/app/hero-form/hero-form.component.ts

@@ -23,8 +23,6 @@ export class HeroFormComponent {
   // #enddocregion submitted
 
   // #enddocregion final
-  // TODO: Remove this when we're done
-  get diagnostic() { return JSON.stringify(this.model); }
   // #enddocregion v1
 
   // #docregion final, new-hero

aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts

@@ -10,14 +10,27 @@ describe('BannerComponent (external files)', () => {
   let fixture: ComponentFixture<BannerComponent>;
   let h1: HTMLElement;
 
+  describe('setup that may fail', () => {
+    // #docregion setup-may-fail
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      }); // missing call to compileComponents()
+      fixture = TestBed.createComponent(BannerComponent);
+    });
+    // #enddocregion setup-may-fail
+
+    it('should create', () => {
+      expect(fixture.componentInstance).toBeDefined();
+    });
+  });
+
   describe('Two beforeEach', () => {
     // #docregion async-before-each
     beforeEach(async () => {
-      TestBed
-          .configureTestingModule({
-            declarations: [BannerComponent],
-          })
-          .compileComponents();  // compile template and css
+      await TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      }).compileComponents();  // compile template and css
     });
     // #enddocregion async-before-each
 
@@ -37,7 +50,7 @@ describe('BannerComponent (external files)', () => {
     // #docregion one-before-each
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        declarations: [BannerComponent],
+        declarations: [ BannerComponent ],
       }).compileComponents();
       fixture = TestBed.createComponent(BannerComponent);
       component = fixture.componentInstance;

aio/content/examples/testing/src/app/banner/banner.component.spec.ts

@@ -11,18 +11,15 @@ describe('BannerComponent (inline template)', () => {
   let fixture: ComponentFixture<BannerComponent>;
   let h1: HTMLElement;
 
-  // #docregion configure-and-create
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() => {
+    TestBed.configureTestingModule({
       declarations: [ BannerComponent ],
     });
     fixture = TestBed.createComponent(BannerComponent);
-    // #enddocregion configure-and-create
     component = fixture.componentInstance; // BannerComponent test instance
     h1 = fixture.nativeElement.querySelector('h1');
-    // #docregion configure-and-create
   });
-  // #enddocregion setup, configure-and-create
+  // #enddocregion setup
 
   // #docregion test-w-o-detect-changes
   it('no title in the DOM after createComponent()', () => {

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -193,9 +193,9 @@ function heroModuleSetup() {
     // #docregion title-case-pipe
     it('should convert hero name to Title Case', () => {
       // get the name's input and display elements from the DOM
-      const hostElement = fixture.nativeElement;
-      const nameInput: HTMLInputElement = hostElement.querySelector('input');
-      const nameDisplay: HTMLElement = hostElement.querySelector('span');
+      const hostElement: HTMLElement = fixture.nativeElement;
+      const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
+      const nameDisplay: HTMLElement = hostElement.querySelector('span')!;
 
       // simulate user entering a new name into the input box
       nameInput.value = 'quick BROWN  fOx';

aio/content/examples/testing/src/app/hero/hero-detail.component.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:member-ordering */
 // #docplaster
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Hero } from '../model/hero';
@@ -23,7 +23,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ctor
 // #enddocregion prototype
 
-  @Input() hero!: Hero;
+  hero!: Hero;
 
   // #docregion ng-on-init
   ngOnInit(): void {

aio/content/guide/angular-compiler-options.md

@@ -221,3 +221,14 @@ When you use the CLI command `ng new --strict`, it is set to `true` in the gener
 ### `trace`
 
 When `true`, prints extra information while compiling templates. Default is `false`.
+
+
+{@a cli-options}
+## Command Line Options
+
+While most of the time you interact with the Angular Compiler indirectly using Angular CLI, when debugging certain issues, you might find it useful to invoke the Angular Compiler directly.
+You can use the `ngc` command provided by the `@angular/compiler-cli` npm package to call the compiler from the command line.
+
+The `ngc` command is just a wrapper around TypeScript's `tsc` compiler command and is primarily configured via the `tsconfig.json` configuration options documented in [the previous sections](#angular-compiler-options).
+
+In addition to the configuration file, you can also use [`tsc` command line options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) to configure `ngc`.

aio/content/guide/browser-support.md

@@ -49,6 +49,16 @@ using [Sauce Labs](https://saucelabs.com/) and
 
 </div>
 
+
+{@a ie11}
+## Configuring Angular CLI for compatibility with IE11
+
+While Angular supports all browsers listed above, in order to improve the build times and output,  Angular CLI applications don't support IE11 by default.
+
+Angular CLI uses [`browserlist`](https://github.com/browserslist/browserslist) to configure browser support for applications.
+
+You can enable the IE11 support by following the instructions in the `.browserslistrc` file at the root of your project.
+
 ## Polyfills
 
 Angular is built on the latest standards of the web platform.

aio/content/guide/build.md

@@ -291,63 +291,6 @@ To disable these warnings, you can add the CommonJS module name to `allowedCommo
 },
 </code-example>
 
-{@a browser-compat}
-
-## Configuring browser compatibility
-
-The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility with different browser and browser versions.
-You may find it necessary to target specific browsers or exclude certain browser versions from your build.
-
-Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing.
-Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`.
-Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS.
-
-* You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
-```
- "browserslist": [
-   "> 1%",
-   "last 2 versions"
- ]
-```
-
-* Alternatively, you can add a new file, `.browserslistrc`, to the project directory, that specifies browsers you want to support:
-```
- ### Supported Browsers
- > 1%
- last 2 versions
-```
-
-See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.
-
-### Backward compatibility with Lighthouse
-
-If you want to produce a progressive web app and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project, add the following `browserslist` entry to your `package.json` file, in order to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes:
-
-```
-"browserslist": [
-  "last 2 versions",
-  "not ie <= 10",
-  "not ie_mob <= 10"
-]
-```
-
-### Backward compatibility with CSS grid
-
-CSS grid layout support in Autoprefixer, which was previously on by default, is off by default in Angular 8 and higher.
-
-To use CSS grid with IE10/11, you must explicitly enable it using the `autoplace` option.
-To do this, add the following to the top of the global styles file (or within a specific css selector scope):
-
-```
-/* autoprefixer grid: autoplace */
-```
-or
-```
-/* autoprefixer grid: no-autoplace */
-```
-
-For more information, see [Autoprefixer documentation](https://autoprefixer.github.io/).
-
 
 {@a proxy}
 
@@ -534,3 +477,9 @@ function setupForCorporateProxy(proxyConfig) {
 
 module.exports = setupForCorporateProxy(proxyConfig);
 ```
+
+{@a browser-compat}
+
+## Configuring browser compatibility
+
+See [browser support guide](guide/browser-support).