diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md
index c74758e1ea..799be7fda7 100644
--- a/aio/content/guide/setup-local.md
+++ b/aio/content/guide/setup-local.md
@@ -59,7 +59,7 @@ You use the Angular CLI to create projects, generate application and library cod
To install the Angular CLI, open a terminal window and run the following command:
- npm install -g @angular/cli
+ npm install -g @angular/cli
{@a create-proj}
diff --git a/aio/src/app/custom-elements/dist-tag/dist-tag.component.spec.ts b/aio/src/app/custom-elements/dist-tag/dist-tag.component.spec.ts
new file mode 100644
index 0000000000..da0ad8012d
--- /dev/null
+++ b/aio/src/app/custom-elements/dist-tag/dist-tag.component.spec.ts
@@ -0,0 +1,47 @@
+import { VERSION } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { environment } from 'environments/environment';
+import { DistTagComponent } from './dist-tag.component';
+
+describe('DistTagComponent', () => {
+ let actualMode: string;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({ declarations: [DistTagComponent] });
+ actualMode = environment.mode;
+ });
+
+ afterEach(() => {
+ (environment.mode as any) = actualMode;
+ });
+
+ describe('rendering', () => {
+ it('should display nothing (for stable versions)', () => {
+ environment.mode = 'stable';
+ const fixture = TestBed.createComponent(DistTagComponent);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('');
+ });
+
+ it('should display the current major version (for archive versions)', () => {
+ environment.mode = 'archive';
+ const fixture = TestBed.createComponent(DistTagComponent);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('@' + VERSION.major);
+ });
+
+ it('should display "@next" (for rc versions)', () => {
+ environment.mode = 'rc';
+ const fixture = TestBed.createComponent(DistTagComponent);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('@next');
+ });
+
+ it('should display "@next" (for next versions)', () => {
+ environment.mode = 'next';
+ const fixture = TestBed.createComponent(DistTagComponent);
+ fixture.detectChanges();
+ expect(fixture.nativeElement.innerHTML).toEqual('@next');
+ });
+ });
+});
diff --git a/aio/src/app/custom-elements/dist-tag/dist-tag.component.ts b/aio/src/app/custom-elements/dist-tag/dist-tag.component.ts
new file mode 100644
index 0000000000..143aad039f
--- /dev/null
+++ b/aio/src/app/custom-elements/dist-tag/dist-tag.component.ts
@@ -0,0 +1,27 @@
+import { Component, VERSION } from '@angular/core';
+import { environment } from 'environments/environment';
+
+/**
+ * Display the dist-tag of Angular for installing from npm at the point these docs are generated.
+ */
+@Component({
+ selector: 'aio-angular-dist-tag',
+ template: '{{tag}}',
+})
+export class DistTagComponent {
+ tag: string;
+
+ constructor() {
+ switch (environment.mode) {
+ case 'stable':
+ this.tag = '';
+ break;
+ case 'next':
+ case 'rc':
+ this.tag = '@next';
+ break;
+ default:
+ this.tag = `@${VERSION.major}`;
+ }
+ }
+}
diff --git a/aio/src/app/custom-elements/dist-tag/dist-tag.module.ts b/aio/src/app/custom-elements/dist-tag/dist-tag.module.ts
new file mode 100644
index 0000000000..e945dbfcfe
--- /dev/null
+++ b/aio/src/app/custom-elements/dist-tag/dist-tag.module.ts
@@ -0,0 +1,12 @@
+import { NgModule, Type } from '@angular/core';
+import { WithCustomElementComponent } from '../element-registry';
+
+import { DistTagComponent } from './dist-tag.component';
+
+@NgModule({
+ declarations: [ DistTagComponent ],
+ entryComponents: [ DistTagComponent ],
+})
+export class DistTagModule implements WithCustomElementComponent {
+ customElementComponent: Type = DistTagComponent;
+}
diff --git a/aio/src/app/custom-elements/element-registry.ts b/aio/src/app/custom-elements/element-registry.ts
index be4036687f..776a60d165 100644
--- a/aio/src/app/custom-elements/element-registry.ts
+++ b/aio/src/app/custom-elements/element-registry.ts
@@ -21,6 +21,10 @@ export const ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES = [
selector: 'aio-file-not-found-search',
loadChildren: () => import('./search/file-not-found-search.module').then(m => m.FileNotFoundSearchModule)
},
+ {
+ selector: 'aio-angular-dist-tag',
+ loadChildren: () => import('./dist-tag/dist-tag.module').then(m => m.DistTagModule)
+ },
{
selector: 'aio-resource-list',
loadChildren: () => import('./resource/resource-list.module').then(m => m.ResourceListModule)
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index 88ff53d285..f98024bf21 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/goldens/size-tracking/aio-payloads.json
@@ -2,18 +2,18 @@
"aio": {
"master": {
"uncompressed": {
- "runtime-es2015": 4444,
- "main-es2015": 451200,
- "polyfills-es2015": 55283
+ "runtime-es2015": 4538,
+ "main-es2015": 451314,
+ "polyfills-es2015": 55210
}
}
},
"aio-local": {
"master": {
"uncompressed": {
- "runtime-es2015": 4444,
- "main-es2015": 451200,
- "polyfills-es2015": 55283
+ "runtime-es2015": 4538,
+ "main-es2015": 451493,
+ "polyfills-es2015": 55291
}
}
}