Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<mat-toolbar color="primary" style="display: flex;justify-content: space-between;">
<div class="page-title">{{'Angular Update Guide'|i18n}}</div>
<div style="flex-grow:1"></div>
<div style="margin:16px;">
<a href="https://angular.io/guide/updating" style="color:white">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" >
<path fill="currentColor" d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</a>
</div>
<div style="margin:16px;">
<a href="https://github.com/StephenFluin/angular-update-guide" style="color:white">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>github-circle-white-transparent</title><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</div>
<div style="margin:16px">
<button mat-button style="margin:0;min-width: 0;padding:0;" [matMenuTriggerFor]="menu"><svg style="width:24px;height:24px;color:white;" viewBox="0 0 24 24">
<path fill="currentColor" d="M12.87,15.07L10.33,12.56L10.36,12.53C12.1,10.59 13.34,8.36 14.07,6H17V4H10V2H8V4H1V6H12.17C11.5,7.92 10.44,9.75 9,11.35C8.07,10.32 7.3,9.19 6.69,8H4.69C5.42,9.63 6.42,11.17 7.67,12.56L2.58,17.58L4,19L9,14L12.11,17.11L12.87,15.07M18.5,10H16.5L12,22H14L15.12,19H19.87L21,22H23L18.5,10M15.88,17L17.5,12.67L19.12,17H15.88Z" />
</svg>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="setLocale('en-US')">English</button>
<button mat-menu-item (click)="setLocale('es-CR')">Español</button>
<button mat-menu-item (click)="setLocale('ja-JP')">日本語</button>
<button mat-menu-item (click)="setLocale('pt-BR')">Português</button>
<button mat-menu-item (click)="setLocale('zh-CN')">简体中文</button>
<button mat-menu-item (click)="setLocale('vi-VN')">Tiếng Việt</button>
<button mat-menu-item (click)="setLocale('zh-TW')">正體中文</button>
<button mat-menu-item (click)="setLocale('ru-RU')">Русский</button>
</mat-menu>
</div>
</mat-toolbar>
<div class="page">
<div class="wizard">
<div>
<mat-card>
<h3>
{{'Select the options matching your project:'|i18n}}
</h3>
<mat-card-content>
<h4>{{'Angular Versions'|i18n}}</h4>
{{'From'|i18n}}:
<mat-form-field appearance="outline">
<select (change)="from = getVersion($event.target.value); track.send('setting-from','v'+$event.target.value); showUpdatePath()" placeholder="from" matNativeControl>
<option *ngFor="let version of versions" [value]="version.name" [selected]="version.name === from.name">{{version.name}}</option>
</select>
</mat-form-field>
<span style="white-space: nowrap">{{'To'|i18n}}:
<mat-form-field appearance="outline">
<select (change)="to = getVersion($event.target.value); track.send('setting-to','v'+$event.target.value); showUpdatePath()" placeholder="to" matNativeControl>
<option *ngFor="let version of versions" [value]="version.name" [selected]="version.name === to.name">{{version.name}}</option>
</select>
</mat-form-field>
</span>
<div *ngIf="from.number >= futureVersion || to.number >= futureVersion">
<br/>
<strong style="color:darkred">{{'Warning'|i18n}}:</strong> {{'Plans for releases after the current major release are not finalized and may change. These recommendations are based on scheduled deprecations.'|i18n}}
</div>
<div *ngIf="from.number > to.number">
<br/>
<strong style="color:darkred">{{'Warning'|i18n}}:</strong> {{'We do not currently support downgrading versions of Angular.'|i18n}}
</div>
<div *ngIf="(to.number - from.number > 150) && from.number > 240">
<br/>
<strong style="color:darkred">{{'Warning'|i18n}}:</strong> {{'We do not support migrating across multiple major versions at once. Please migrate each major version individually.'|i18n}}
</div>
<h4>{{'App Complexity'|i18n}}</h4>
<ng-container>
<mat-button-toggle-group (change)="level = $event.value; track.send('setting-complexity',$event.value); showUpdatePath()" [value]="level" style="margin-bottom:16px;">
<mat-button-toggle [value]="1">{{'Basic'|i18n}}</mat-button-toggle>
<mat-button-toggle [value]="2">{{'Medium'|i18n}}</mat-button-toggle>
<mat-button-toggle [value]="3">{{'Advanced'|i18n}}</mat-button-toggle>
</mat-button-toggle-group>
<p *ngIf="level === 1">{{'Show update information relevant to all Angular developers.'|i18n}}</p>
<p *ngIf="level === 2">{{'Show more specific update information relevant to around 10% of Angular developers.'|i18n}}</p>
<p *ngIf="level === 3">{{'Show all the information we have about the update.'|i18n}}</p>
</ng-container>
<h4>{{'Other Dependencies'|i18n}}</h4>
<ng-container *ngFor="let option of optionList">
<p>
<mat-checkbox (change)="options[option.id] = $event.checked; track.send('setting-'+option.name,$event.checked); showUpdatePath()" [value]="options[option.id]">{{'I use'|i18n}} {{option.name}} {{option.description}}</mat-checkbox>
</p>
<mat-grid-tile [colspan]="2"></mat-grid-tile>
</ng-container>
<ng-container *ngIf="from.number < 600">
<h4>{{'Package Manager'|i18n}}</h4>
<mat-button-toggle-group (change)="packageManager = $event.value; showUpdatePath()" [value]="packageManager">
<mat-button-toggle value="npm install">{{'npm'|i18n}}</mat-button-toggle>
<mat-button-toggle value="yarn add">{{'yarn'|i18n}}</mat-button-toggle>
</mat-button-toggle-group>
</ng-container>
</mat-card-content>
<mat-card-actions>
<button type="button" (click)="showUpdatePath()" mat-raised-button color="primary">{{'Show me how to update!'|i18n}}</button>
</mat-card-actions>
</mat-card>
</div>
</div>
<!-- RECOMMENDATIONS SECTION -->
<div class="recommendations" *ngIf="beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0">
<h2>{{title}}</h2>
<h3>{{'Before Updating'|i18n}}</h3>
<div *ngFor="let r of beforeRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="beforeRecommendations.length <= 0">
<em>{{"There aren't currently any changes needed before moving between these versions."|i18n}}</em>
</div>
<h3>{{'During the Update'|i18n}}</h3>
<div *ngFor="let r of duringRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="duringRecommendations.length <= 0">
<em>{{"There aren't currently any recommendations for moving between these versions."|i18n}}</em>
</div>
<h3>{{'After the Update'|i18n}}</h3>
<div *ngFor="let r of afterRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="afterRecommendations.length <= 0">
<em>{{"There aren't currently any changes needed after moving between these versions."|i18n}}</em>
</div>
</div>
</div>