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 } } }