style(docs-infra): fix docs examples for tslint rule `import-spacing` (#38143)

This commit updates the docs examples to be compatible with the
`import-spacing` tslint rule.

This is in preparation of updating the docs examples `tslint.json` to
match the one generated for new Angular CLI apps in a future commit.

PR Close #38143

aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
 

aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts

@@ -1,8 +1,8 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [ BrowserModule ],

aio/content/examples/ajs-quick-reference/src/app/app.module.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
 import { MovieListComponent } from './movie-list.component';
 import { AppRoutingModule } from './app-routing.module';
 

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

@@ -1,15 +1,15 @@
-import { BrowserModule }       from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }         from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 // #docregion imports
-import { NgModule }     from '@angular/core';
+import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 // #enddocregion imports
 import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent }   from './hero-list.component';
+import { HeroListComponent } from './hero-list.component';
-import { SalesTaxComponent }   from './sales-tax.component';
+import { SalesTaxComponent } from './sales-tax.component';
-import { HeroService }         from './hero.service';
+import { HeroService } from './hero.service';
-import { BackendService }      from './backend.service';
+import { BackendService } from './backend.service';
-import { Logger }              from './logger.service';
+import { Logger } from './logger.service';
 
 @NgModule({
   imports: [

aio/content/examples/architecture/src/app/hero-list.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit }   from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
-import { Hero }                from './hero';
+import { Hero } from './hero';
-import { HeroService }         from './hero.service';
+import { HeroService } from './hero.service';
 
 // #docregion metadata, providers
 @Component({

aio/content/examples/architecture/src/app/mini-app.ts

@@ -22,7 +22,7 @@ export class AppComponent {
 }
 
 // #docregion module
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 // #docregion import-browser-module
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion import-browser-module

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -1,7 +1,7 @@
-import { Component }       from '@angular/core';
+import { Component } from '@angular/core';
 
 import { SalesTaxService } from './sales-tax.service';
-import { TaxRateService }  from './tax-rate.service';
+import { TaxRateService } from './tax-rate.service';
 
 @Component({
   selector:    'app-sales-tax',

aio/content/examples/attribute-directives/src/app/dummy.module.1.ts

@@ -3,7 +3,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent }               from './app.component.1';
+import { AppComponent } from './app.component.1';
 import { HighlightDirective as HLD1 } from './highlight.directive.1';
 import { HighlightDirective as HLD2 } from './highlight.directive.2';
 import { HighlightDirective as HLD3 } from './highlight.directive.3';

aio/content/examples/component-interaction/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { AstronautComponent } from './astronaut.component';

aio/content/examples/component-interaction/src/app/astronaut.component.ts

@@ -2,7 +2,7 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 
 import { MissionService } from './mission.service';
-import { Subscription }   from 'rxjs';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-astronaut',

aio/content/examples/component-interaction/src/app/countdown-parent.component.ts

@@ -2,8 +2,8 @@
 // #docregion vc
 import { AfterViewInit, ViewChild } from '@angular/core';
 // #docregion lv
-import { Component }                from '@angular/core';
+import { Component } from '@angular/core';
-import { CountdownTimerComponent }  from './countdown-timer.component';
+import { CountdownTimerComponent } from './countdown-timer.component';
 
 // #enddocregion lv
 // #enddocregion vc

aio/content/examples/component-interaction/src/app/mission.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Subject }    from 'rxjs';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class MissionService {

aio/content/examples/component-interaction/src/app/missioncontrol.component.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { Component }          from '@angular/core';
+import { Component } from '@angular/core';
 
-import { MissionService }     from './mission.service';
+import { MissionService } from './mission.service';
 
 @Component({
   selector: 'app-mission-control',

aio/content/examples/component-interaction/src/app/votetaker.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component }      from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-vote-taker',

aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [];
 

aio/content/examples/dependency-injection-in-action/src/app/app.component.ts

@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 
 // #docregion import-services
-import { LoggerService }      from './logger.service';
+import { LoggerService } from './logger.service';
 import { UserContextService } from './user-context.service';
-import { UserService }        from './user.service';
+import { UserService } from './user.service';
 
 @Component({
   selector: 'app-root',

aio/content/examples/dependency-injection-in-action/src/app/app.module.ts

@@ -1,26 +1,26 @@
 // #docregion
-import { BrowserModule }                from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }                  from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { HttpClientModule }             from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 
-// import { AppRoutingModule }             from './app-routing.module';
+// import { AppRoutingModule } from './app-routing.module';
 import { LocationStrategy,
-         HashLocationStrategy }         from '@angular/common';
+         HashLocationStrategy } from '@angular/common';
-import { NgModule }                     from '@angular/core';
+import { NgModule } from '@angular/core';
 
-import { HeroData }                     from './hero-data';
+import { HeroData } from './hero-data';
-import { InMemoryWebApiModule }         from 'angular-in-memory-web-api';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 
 
-import { AppComponent }                 from './app.component';
+import { AppComponent } from './app.component';
-import { HeroBioComponent }             from './hero-bio.component';
+import { HeroBioComponent } from './hero-bio.component';
 import { HeroBiosComponent,
          HeroBiosAndContactsComponent } from './hero-bios.component';
-import { HeroOfTheMonthComponent }      from './hero-of-the-month.component';
+import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
-import { HeroContactComponent }         from './hero-contact.component';
+import { HeroContactComponent } from './hero-contact.component';
 import { HeroesBaseComponent,
-         SortedHeroesComponent }        from './sorted-heroes.component';
+         SortedHeroesComponent } from './sorted-heroes.component';
-import { HighlightDirective }           from './highlight.directive';
+import { HighlightDirective } from './highlight.directive';
 import { ParentFinderComponent,
          AlexComponent,
          AliceComponent,
@@ -30,8 +30,8 @@ import { ParentFinderComponent,
          CathyComponent,
          BarryComponent,
          BethComponent,
-         BobComponent }                 from './parent-finder.component';
+         BobComponent } from './parent-finder.component';
-import { StorageComponent }             from './storage.component';
+import { StorageComponent } from './storage.component';
 
 const declarations = [
     AppComponent,

aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:one-line*/
 // #docregion
-import { Injectable }    from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { LoggerService } from './logger.service';
 

aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component, Input, OnInit } from '@angular/core';
 
-import { HeroCacheService }         from './hero-cache.service';
+import { HeroCacheService } from './hero-cache.service';
 
 // #docregion component
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion
-import { Component }             from '@angular/core';
+import { Component } from '@angular/core';
 
-import { HeroService }          from './hero.service';
+import { HeroService } from './hero.service';
-import { LoggerService }        from './logger.service';
+import { LoggerService } from './logger.service';
 
 //////// HeroBiosComponent ////
 // #docregion simple

aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { Injectable }  from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import { Hero }        from './hero';
+import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 // #docregion service

aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts

@@ -3,7 +3,7 @@
 import { Component, Host, Optional } from '@angular/core';
 
 import { HeroCacheService } from './hero-cache.service';
-import { LoggerService }    from './logger.service';
+import { LoggerService } from './logger.service';
 
 // #docregion component
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts

@@ -1,8 +1,8 @@
 // Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
 // Injecting with the MinimalLogger "interface-class"
 import { Component, NgModule } from '@angular/core';
-import { LoggerService }       from './logger.service';
+import { LoggerService } from './logger.service';
-import { MinimalLogger }       from './minimal-logger.service';
+import { MinimalLogger } from './minimal-logger.service';
 
 // #docregion
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts

@@ -10,12 +10,12 @@ export const TITLE = new InjectionToken<string>('title');
 import { Component, Inject } from '@angular/core';
 
 import { DateLoggerService } from './date-logger.service';
-import { Hero }              from './hero';
+import { Hero } from './hero';
-import { HeroService }       from './hero.service';
+import { HeroService } from './hero.service';
-import { LoggerService }     from './logger.service';
+import { LoggerService } from './logger.service';
-import { MinimalLogger }     from './minimal-logger.service';
+import { MinimalLogger } from './minimal-logger.service';
 import { RUNNERS_UP,
-         runnersUpFactory }  from './runners-up';
+         runnersUpFactory } from './runners-up';
 
 // #enddocregion hero-of-the-month
 // #docregion some-hero

aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Hero }       from './hero';
+import { Hero } from './hero';
 
 @Injectable({
   providedIn: 'root'

aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { InjectionToken } from '@angular/core';
 
-import { Hero }        from './hero';
+import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 // #docregion runners-up

aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts

@@ -2,8 +2,8 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
-import { Hero }              from './hero';
+import { Hero } from './hero';
-import { HeroService }       from './hero.service';
+import { HeroService } from './hero.service';
 
 /////// HeroesBaseComponent /////
 // #docregion heroes-base, injection

aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion
-import { Injectable }    from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { LoggerService } from './logger.service';
-import { UserService }   from './user.service';
+import { UserService } from './user.service';
 
 // #docregion injectables, injectable
 @Injectable({

aio/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -2,7 +2,7 @@
 // #docregion imports
 import { Component, Inject } from '@angular/core';
 
-import { APP_CONFIG, AppConfig }    from './app.config';
+import { APP_CONFIG, AppConfig } from './app.config';
 // #enddocregion imports
 
 @Component({

aio/content/examples/dependency-injection/src/app/app.module.ts

@@ -1,8 +1,8 @@
 // #docplaster
 import { NgModule } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
-import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
+import { APP_CONFIG, HERO_DI_CONFIG } from './app.config';
 import { AppComponent } from './app.component';
 import { CarComponent } from './car/car.component';
 import { HeroesComponent } from './heroes/heroes.component';

aio/content/examples/dependency-injection/src/app/car/car-injector.ts

@@ -1,7 +1,7 @@
 import { Injector } from '@angular/core';
 
 import { Car, Engine, Tires } from './car';
-import { Logger }             from '../logger.service';
+import { Logger } from '../logger.service';
 
 // #docregion injector
 export function useInjector() {

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -1,15 +1,15 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { Car, Engine, Tires }  from './car';
+import { Car, Engine, Tires } from './car';
-import { Car as CarNoDi }      from './car-no-di';
+import { Car as CarNoDi } from './car-no-di';
-import { CarFactory }          from './car-factory';
+import { CarFactory } from './car-factory';
 
 import { testCar,
          simpleCar,
-         superCar }           from './car-creations';
+         superCar } from './car-creations';
 
-import { useInjector }        from './car-injector';
+import { useInjector } from './car-injector';
 
 
 @Component({

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts

@@ -1,6 +1,6 @@
 // #docregion
-import { Component }   from '@angular/core';
+import { Component } from '@angular/core';
-import { HEROES }      from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Component({
   selector: 'app-hero-list',

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { Component }   from '@angular/core';
+import { Component } from '@angular/core';
-import { Hero }        from './hero';
+import { Hero } from './hero';
 // #enddocregion
 import { HeroService } from './hero.service.1';
 /*

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:one-line */
 // #docregion
-import { Component }   from '@angular/core';
+import { Component } from '@angular/core';
-import { Hero }        from './hero';
+import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 @Component({

aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Injectable({
   providedIn: 'root',

aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
-import { Logger }     from '../logger.service';
+import { Logger } from '../logger.service';
 
 @Injectable({
   providedIn: 'root',

aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:one-line */
 // #docregion
 import { HeroService } from './hero.service';
-import { Logger }      from '../logger.service';
+import { Logger } from '../logger.service';
 import { UserService } from '../user.service';
 
 // #docregion factory

aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
-import { Logger }     from '../logger.service';
+import { Logger } from '../logger.service';
 import { UserService } from '../user.service';
 
 @Injectable({

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component }          from '@angular/core';
+import { Component } from '@angular/core';
 import { heroServiceProvider } from './hero.service.provider';
 
 @Component({

aio/content/examples/dependency-injection/src/app/injector.component.ts

@@ -2,11 +2,11 @@
 // #docregion
 import { Component, Injector, OnInit } from '@angular/core';
 
-import { Car, Engine, Tires }   from './car/car';
+import { Car, Engine, Tires } from './car/car';
-import { Hero }                 from './heroes/hero';
+import { Hero } from './heroes/hero';
-import { HeroService }          from './heroes/hero.service';
+import { HeroService } from './heroes/hero.service';
-import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { heroServiceProvider } from './heroes/hero.service.provider';
-import { Logger }               from './logger.service';
+import { Logger } from './logger.service';
 
 // #docregion injector
 @Component({

aio/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts

@@ -1,6 +1,6 @@
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule }  from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { ServiceModule } from './service-and-module';
 
 // #docregion

aio/content/examples/displaying-data/src/app/app.module.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { NgModule } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 

aio/content/examples/docs-style-guide/src/app/app.module.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
 
 // #docregion class
 @NgModule({

aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts

@@ -2,7 +2,7 @@
 import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
 
 import { AdDirective } from './ad.directive';
-import { AdItem }      from './ad-item';
+import { AdItem } from './ad-item';
 import { AdComponent } from './ad.component';
 
 @Component({

aio/content/examples/dynamic-component-loader/src/app/ad.service.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { Injectable }           from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { HeroJobAdComponent } from './hero-job-ad.component';
 import { HeroProfileComponent } from './hero-profile.component';
-import { AdItem }               from './ad-item';
+import { AdItem } from './ad-item';
 
 @Injectable()
 export class AdService {

aio/content/examples/dynamic-component-loader/src/app/app.component.ts

@@ -1,8 +1,8 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
-import { AdService }         from './ad.service';
+import { AdService } from './ad.service';
-import { AdItem }            from './ad-item';
+import { AdItem } from './ad-item';
 
 @Component({
   selector: 'app-root',

aio/content/examples/dynamic-component-loader/src/app/app.module.ts

@@ -1,12 +1,12 @@
 // #docregion
-import { BrowserModule }        from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
-import { AppComponent }         from './app.component';
+import { AppComponent } from './app.component';
-import { HeroJobAdComponent }   from './hero-job-ad.component';
+import { HeroJobAdComponent } from './hero-job-ad.component';
-import { AdBannerComponent }    from './ad-banner.component';
+import { AdBannerComponent } from './ad-banner.component';
 import { HeroProfileComponent } from './hero-profile.component';
-import { AdDirective }          from './ad.directive';
+import { AdDirective } from './ad.directive';
-import { AdService }            from './ad.service';
+import { AdService } from './ad.service';
 
 @NgModule({
   imports: [ BrowserModule ],

aio/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component, Input } from '@angular/core';
 
-import { AdComponent }      from './ad.component';
+import { AdComponent } from './ad.component';
 
 @Component({
   template: `

aio/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { Component, Input }  from '@angular/core';
+import { Component, Input } from '@angular/core';
 
-import { AdComponent }       from './ad.component';
+import { AdComponent } from './ad.component';
 
 @Component({
   template: `

aio/content/examples/dynamic-form/src/app/app.component.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { Component }       from '@angular/core';
+import { Component } from '@angular/core';
 
 import { QuestionService } from './question.service';
-import { QuestionBase }    from './question-base';
+import { QuestionBase } from './question-base';
-import { Observable }      from 'rxjs';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

aio/content/examples/dynamic-form/src/app/app.module.ts

@@ -1,10 +1,10 @@
 // #docregion
-import { BrowserModule }                from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule }          from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
-import { NgModule }                     from '@angular/core';
+import { NgModule } from '@angular/core';
 
-import { AppComponent }                 from './app.component';
+import { AppComponent } from './app.component';
-import { DynamicFormComponent }         from './dynamic-form.component';
+import { DynamicFormComponent } from './dynamic-form.component';
 import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
 
 @NgModule({

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts

@@ -1,8 +1,8 @@
 // #docregion
 import { Component, Input } from '@angular/core';
-import { FormGroup }        from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 
-import { QuestionBase }     from './question-base';
+import { QuestionBase } from './question-base';
 
 @Component({
   selector: 'app-question',

aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { Component, Input, OnInit }  from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup }                 from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 
-import { QuestionBase }              from './question-base';
+import { QuestionBase } from './question-base';
-import { QuestionControlService }    from './question-control.service';
+import { QuestionControlService } from './question-control.service';
 
 @Component({
   selector: 'app-dynamic-form',

aio/content/examples/dynamic-form/src/app/question-control.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Injectable }   from '@angular/core';
+import { Injectable } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 import { QuestionBase } from './question-base';

aio/content/examples/dynamic-form/src/app/question.service.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { Injectable }       from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { DropdownQuestion } from './question-dropdown';
-import { QuestionBase }     from './question-base';
+import { QuestionBase } from './question-base';
-import { TextboxQuestion }  from './question-textbox';
+import { TextboxQuestion } from './question-textbox';
 import { of } from 'rxjs';
 
 @Injectable()

aio/content/examples/form-validation/src/app/app.module.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent }           from './app.component';
+import { AppComponent } from './app.component';
 import { HeroFormTemplateComponent } from './template/hero-form-template.component';
 import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
 import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts

@@ -1,7 +1,7 @@
 /* tslint:disable: member-ordering forin */
 // #docplaster
 // #docregion
-import { Component, OnInit }                  from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 

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

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }      from './app.component';
+import { AppComponent } from './app.component';
 import { HeroFormComponent } from './hero-form/hero-form.component';
 
 @NgModule({

aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts

@@ -1,12 +1,12 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-import { AppComponent }           from './app.component';
+import { AppComponent } from './app.component';
 import { HeroTaxReturnComponent } from './hero-tax-return.component';
-import { HeroesListComponent }    from './heroes-list.component';
+import { HeroesListComponent } from './heroes-list.component';
-import { VillainsListComponent }  from './villains-list.component';
+import { VillainsListComponent } from './villains-list.component';
 
 import { carComponents } from './car.components';
 

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { HeroTaxReturn }        from './hero';
+import { HeroTaxReturn } from './hero';
 import { HeroTaxReturnService } from './hero-tax-return.service';
 
 @Component({

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Injectable }    from '@angular/core';
+import { Injectable } from '@angular/core';
 import { HeroTaxReturn } from './hero';
 import { HeroesService } from './heroes.service';
 

aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { Component }  from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { Hero, HeroTaxReturn } from './hero';
-import { HeroesService }       from './heroes.service';
+import { HeroesService } from './heroes.service';
 
 @Component({
   selector: 'app-heroes-list',

aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component }  from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { Villain, VillainsService } from './villains.service';

aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { of }         from 'rxjs';
+import { of } from 'rxjs';
 
 export interface Villain { id: number; name: string; }
 

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

@@ -1,29 +1,29 @@
 // #docplaster
 // #docregion sketch
-import { NgModule }         from '@angular/core';
+import { NgModule } from '@angular/core';
-import { BrowserModule }    from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion sketch
-import { FormsModule }      from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 // #docregion sketch
 import { HttpClientModule } from '@angular/common/http';
 // #enddocregion sketch
 import { HttpClientXsrfModule } from '@angular/common/http';
 
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService }  from './in-memory-data.service';
+import { InMemoryDataService } from './in-memory-data.service';
 
 import { RequestCache, RequestCacheWithMap } from './request-cache.service';
 
-import { AppComponent }         from './app.component';
+import { AppComponent } from './app.component';
-import { AuthService }          from './auth.service';
+import { AuthService } from './auth.service';
-import { ConfigComponent }      from './config/config.component';
+import { ConfigComponent } from './config/config.component';
-import { DownloaderComponent }  from './downloader/downloader.component';
+import { DownloaderComponent } from './downloader/downloader.component';
-import { HeroesComponent }      from './heroes/heroes.component';
+import { HeroesComponent } from './heroes/heroes.component';
-import { HttpErrorHandler }     from './http-error-handler.service';
+import { HttpErrorHandler } from './http-error-handler.service';
-import { MessageService }       from './message.service';
+import { MessageService } from './message.service';
-import { MessagesComponent }    from './messages/messages.component';
+import { MessagesComponent } from './messages/messages.component';
 import { PackageSearchComponent } from './package-search/package-search.component';
-import { UploaderComponent }    from './uploader/uploader.component';
+import { UploaderComponent } from './uploader/uploader.component';
 
 import { httpInterceptorProviders } from './http-interceptors/index';
 // #docregion sketch

aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
 
-import { LoggerService }  from './logger.service';
+import { LoggerService } from './logger.service';
 
 //////////////////
 @Component({

aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
 
-import { LoggerService }  from './logger.service';
+import { LoggerService } from './logger.service';
 
 //////////////////
 // #docregion child-view

aio/content/examples/lifecycle-hooks/src/app/counter.component.ts

@@ -4,7 +4,7 @@ import {
   OnChanges, SimpleChanges,
 } from '@angular/core';
 
-import { LoggerService }  from './logger.service';
+import { LoggerService } from './logger.service';
 
 @Component({
   selector: 'app-counter',

aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts

@@ -11,7 +11,7 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { Component, Input } from '@angular/core';
-import { LoggerService }    from './logger.service';
+import { LoggerService } from './logger.service';
 
 let nextId = 1;
 

aio/content/examples/lifecycle-hooks/src/app/spy.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { LoggerService }  from './logger.service';
+import { LoggerService } from './logger.service';
 
 @Component({
   selector: 'spy-parent',

aio/content/examples/ngmodules/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [

aio/content/examples/ngmodules/src/app/contact/contact-routing.module.ts

@@ -1,7 +1,7 @@
-import { NgModule }            from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule }        from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { ContactComponent }    from './contact.component';
+import { ContactComponent } from './contact.component';
 
 const routes = [
   { path: 'contact', component: ContactComponent}

aio/content/examples/ngmodules/src/app/contact/contact.component.ts

@@ -1,9 +1,9 @@
 // Exact copy except import UserService from greeting
-import { Component, OnInit }      from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
 import { Contact, ContactService } from './contact.service';
-import { UserService }             from '../greeting/user.service';
+import { UserService } from '../greeting/user.service';
 
 @Component({
   selector: 'app-contact',

aio/content/examples/ngmodules/src/app/contact/contact.module.ts

@@ -1,9 +1,9 @@
-import { NgModule }           from '@angular/core';
+import { NgModule } from '@angular/core';
-import { SharedModule }       from '../shared/shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { ContactComponent }     from './contact.component';
+import { ContactComponent } from './contact.component';
-import { ContactService }       from './contact.service';
+import { ContactService } from './contact.service';
 import { ContactRoutingModule } from './contact-routing.module';
 
 @NgModule({

aio/content/examples/ngmodules/src/app/contact/contact.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
 import { Observable, of } from 'rxjs';
-import { delay }      from 'rxjs/operators';
+import { delay } from 'rxjs/operators';
 
 export class Contact {
   constructor(public id: number, public name: string) { }

aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 import { Customer,
-         CustomersService }    from './customers.service';
+         CustomersService } from './customers.service';
 
 @Component({
   template: `

aio/content/examples/ngmodules/src/app/customers/customers-routing.module.ts

@@ -1,9 +1,9 @@
-import { NgModule }     from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
-import { CustomersComponent }       from './customers.component';
+import { CustomersComponent } from './customers.component';
-import { CustomersListComponent }   from './customers-list.component';
+import { CustomersListComponent } from './customers-list.component';
 import { CustomersDetailComponent } from './customers-detail.component';
 
 const routes: Routes = [

aio/content/examples/ngmodules/src/app/customers/customers.component.ts

@@ -1,4 +1,4 @@
-import { Component }   from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CustomersService } from './customers.service';
 import { UserService } from '../greeting/user.service';

aio/content/examples/ngmodules/src/app/customers/customers.module.ts

@@ -1,12 +1,12 @@
-import { NgModule }            from '@angular/core';
+import { NgModule } from '@angular/core';
 
-import { SharedModule }        from '../shared/shared.module';
+import { SharedModule } from '../shared/shared.module';
 
-import { CustomersComponent }       from './customers.component';
+import { CustomersComponent } from './customers.component';
 import { CustomersDetailComponent } from './customers-detail.component';
-import { CustomersListComponent }   from './customers-list.component';
+import { CustomersListComponent } from './customers-list.component';
-import { CustomersRoutingModule }   from './customers-routing.module';
+import { CustomersRoutingModule } from './customers-routing.module';
-import { CustomersService }   from './customers.service';
+import { CustomersService } from './customers.service';
 
 
 @NgModule({

aio/content/examples/ngmodules/src/app/customers/customers.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
 import { Observable, of } from 'rxjs';
-import { delay }      from 'rxjs/operators';
+import { delay } from 'rxjs/operators';
 
 export class Customer {
   constructor(public id: number, public name: string) { }

aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { UserService }      from '../greeting/user.service';
+import { UserService } from '../greeting/user.service';
 
 @Component({
   selector: 'app-greeting',

aio/content/examples/ngmodules/src/app/items/items-detail.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 import { Item,
-  ItemService }     from './items.service';
+  ItemService } from './items.service';
 
 @Component({
   template: `

aio/content/examples/ngmodules/src/app/items/items-list.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable }from 'rxjs';
+import { Observable } from 'rxjs';
 
-import { Item,
+import { Item, ItemService } from './items.service';
-         ItemService }     from './items.service';
 
 @Component({
   template: `

aio/content/examples/ngmodules/src/app/items/items-routing.module.ts

@@ -1,9 +1,9 @@
-import { NgModule }            from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes,
-         RouterModule }        from '@angular/router';
+         RouterModule } from '@angular/router';
 
-import { ItemsListComponent }    from './items-list.component';
+import { ItemsListComponent } from './items-list.component';
-import { ItemsDetailComponent }  from './items-detail.component';
+import { ItemsDetailComponent } from './items-detail.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'list', pathMatch: 'full'},

aio/content/examples/ngmodules/src/app/items/items.module.ts

@@ -1,11 +1,11 @@
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
-import { CommonModule }  from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 import { ItemsComponent } from './items.component';
-import { ItemsListComponent }    from './items-list.component';
+import { ItemsListComponent } from './items-list.component';
-import { ItemsDetailComponent }  from './items-detail.component';
+import { ItemsDetailComponent } from './items-detail.component';
-import { ItemService }          from './items.service';
+import { ItemService } from './items.service';
-import { ItemsRoutingModule }    from './items-routing.module';
+import { ItemsRoutingModule } from './items-routing.module';
 
 @NgModule({
   imports:      [ CommonModule, ItemsRoutingModule ],

aio/content/examples/ngmodules/src/app/items/items.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
 import { Observable, of } from 'rxjs';
-import { delay }      from 'rxjs/operators';
+import { delay } from 'rxjs/operators';
 
 export class Item {
   constructor(public id: number, public name: string) { }

aio/content/examples/ngmodules/src/app/shared/shared.module.ts

@@ -1,9 +1,9 @@
-import { NgModule }            from '@angular/core';
+import { NgModule } from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-import { AwesomePipe }         from './awesome.pipe';
+import { AwesomePipe } from './awesome.pipe';
-import { HighlightDirective }  from './highlight.directive';
+import { HighlightDirective } from './highlight.directive';
 
 @NgModule({
   imports:      [ CommonModule ],

aio/content/examples/pipes/src/app/fetch-json.pipe.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { HttpClient }          from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Pipe, PipeTransform } from '@angular/core';
 
 // #docregion pipe-metadata

aio/content/examples/pipes/src/app/flying-heroes.component.ts

@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { Component }              from '@angular/core';
+import { Component } from '@angular/core';
 
-import { HEROES }                 from './heroes';
+import { HEROES } from './heroes';
 
 @Component({
   selector: 'app-flying-heroes',

aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts

@@ -1,8 +1,8 @@
 // #docregion
-import { Component, OnInit }  from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }     from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
-import { Observable }         from 'rxjs';
+import { Observable } from 'rxjs';
-import { map }                from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-admin-dashboard',

aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts

@@ -1,8 +1,8 @@
 // #docregion
-import { Component, OnInit }    from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }       from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
-import { Observable }           from 'rxjs';
+import { Observable } from 'rxjs';
-import { map }                  from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 import { SelectivePreloadingStrategyService } from '../../selective-preloading-strategy.service';
 

aio/content/examples/router/src/app/admin/admin-routing.module.1.ts

@@ -1,12 +1,12 @@
 // #docplaster
 // #docregion
-import { NgModule }              from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import { AdminComponent }           from './admin/admin.component';
+import { AdminComponent } from './admin/admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard/admin-dashboard.component';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises/manage-crises.component';
+import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes/manage-heroes.component';
+import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
 // #docregion admin-routes
 const adminRoutes: Routes = [

aio/content/examples/router/src/app/admin/admin-routing.module.2.ts

@@ -1,15 +1,15 @@
 // #docplaster
 // #docregion
-import { NgModule }              from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import { AdminComponent }           from './admin/admin.component';
+import { AdminComponent } from './admin/admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard/admin-dashboard.component';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises/manage-crises.component';
+import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes/manage-heroes.component';
+import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
 // #docregion admin-route
-import { AuthGuard }                from '../auth/auth.guard';
+import { AuthGuard } from '../auth/auth.guard';
 
 const adminRoutes: Routes = [
   {

aio/content/examples/router/src/app/admin/admin-routing.module.3.ts

@@ -1,15 +1,15 @@
 // #docplaster
 // #docregion
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { AdminComponent }           from './admin/admin.component';
+import { AdminComponent } from './admin/admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard/admin-dashboard.component';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises/manage-crises.component';
+import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes/manage-heroes.component';
+import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
 // #docregion admin-route
-import { AuthGuard }                from '../auth/auth.guard';
+import { AuthGuard } from '../auth/auth.guard';
 
 // #docregion can-activate-child
 const adminRoutes: Routes = [

aio/content/examples/router/src/app/admin/admin-routing.module.ts

@@ -1,14 +1,14 @@
 // #docplaster
 // #docregion
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { AdminComponent }           from './admin/admin.component';
+import { AdminComponent } from './admin/admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard/admin-dashboard.component';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises/manage-crises.component';
+import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes/manage-heroes.component';
+import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
-import { AuthGuard }                from '../auth/auth.guard';
+import { AuthGuard } from '../auth/auth.guard';
 
 const adminRoutes: Routes = [
   {

aio/content/examples/router/src/app/admin/admin.module.ts

@@ -1,13 +1,13 @@
 // #docregion
-import { NgModule }       from '@angular/core';
+import { NgModule } from '@angular/core';
-import { CommonModule }   from '@angular/common';
+import { CommonModule } from '@angular/common';
 
-import { AdminComponent }           from './admin/admin.component';
+import { AdminComponent } from './admin/admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard/admin-dashboard.component';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises/manage-crises.component';
+import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes/manage-heroes.component';
+import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
-import { AdminRoutingModule }       from './admin-routing.module';
+import { AdminRoutingModule } from './admin-routing.module';
 
 @NgModule({
   imports: [

aio/content/examples/router/src/app/app-routing.module.1.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule }              from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import { CrisisListComponent }   from './crisis-list/crisis-list.component';
+import { CrisisListComponent } from './crisis-list/crisis-list.component';
-import { HeroListComponent }     from './hero-list/hero-list.component';
+import { HeroListComponent } from './hero-list/hero-list.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 // #docregion appRoutes

aio/content/examples/router/src/app/app-routing.module.2.ts

@@ -1,11 +1,11 @@
 // #docregion
 // #docregion milestone3
-import { NgModule }              from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import { CrisisListComponent }   from './crisis-list/crisis-list.component';
+import { CrisisListComponent } from './crisis-list/crisis-list.component';
 // #enddocregion milestone3
-// import { HeroListComponent }  from './hero-list/hero-list.component';  // <-- delete this line
+// import { HeroListComponent } from './hero-list/hero-list.component';  // <-- delete this line
 // #docregion milestone3
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 

aio/content/examples/router/src/app/app-routing.module.3.ts

@@ -1,12 +1,12 @@
 // #docplaster
 // #docregion , v3
-import { NgModule }                from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule, Routes }    from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 // #enddocregion v3
 import { ComposeMessageComponent } from './compose-message/compose-message.component';
 // #docregion v3
-import { PageNotFoundComponent }  from './page-not-found/page-not-found.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const appRoutes: Routes = [
 // #enddocregion v3