angular-update-guide/src/app/app.component.html at 343ae6636a8c4386b82f24d56bfae6606939d956 · angular/angular-update-guide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<main [class]="mode" style="display: flex; flex-direction: column; height: 100vh;">
<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; display: flex;">
      <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; display: flex;">
    <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;">
    <a (click)="toggleMode()" style="color: white; display: flex; cursor: pointer;">
      <mat-icon *ngIf="mode === 'light-mode'" title="Switch to dark mode" fontIcon="dark_mode">dark_mode</mat-icon>
      <mat-icon *ngIf="mode === 'dark-mode'" title="Switch to light mode" fontIcon="light_mode">light_mode</mat-icon>
    </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>
<mat-sidenav-container style="flex: 1;">
<div class="page">
  <div class="wizard">
    <div>
      <mat-card>
        <h2>
          {{'Select the options that match your update'|i18n}}
        </h2>

        <mat-card-content>

          <h3>{{'Angular versions'|i18n}}</h3>
          {{'From'|i18n}} v.
          <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}} v.
          <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 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> {{'Be sure to follow the guide below to migrate your application to the new version. You can\'t run'|i18n}} <code>ng update</code> {{'to update Angular applications more than one major version at a time.'|i18n}}
          </div>

          <h3>{{'Application complexity'|i18n}}</h3>
          <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">{{'Shows information for all Angular developers.'|i18n}}</p>
              <p *ngIf="level === 2">{{'Shows information that\'s of interest to more advanced Angular developers.'|i18n}}</p>
              <p *ngIf="level === 3">{{'Shows all the information we have about this update.'|i18n}}</p>
            </ng-container>

          <h3>{{'Other dependencies'|i18n}}</h3>
          <ng-container *ngFor="let option of optionList">
            <p>
              <mat-checkbox (change)="options[option.id] = $event.checked; track.send('setting-'+option.name,$event.checked); showUpdatePath()" [checked]="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 you update'|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>{{"You don't need to do anything before moving between these versions."|i18n}}</em>
    </div>

    <h3>{{'Update to the new version'|i18n}}</h3>
    <div *ngIf="duringRecommendations.length > 0">
      <p><em>{{"Review these changes and perform the actions to update your application."|i18n}}</em></p>
      <p>&nbsp;</p>
    </div>
    <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 any recommendations for moving between these versions."|i18n}}</em>
    </div>
    <h3>{{'After you 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>{{"You don't need to do anything after moving between these versions."|i18n}}</em>
    </div>
  </div>
</div>
</mat-sidenav-container>
</main>