升級時的一些問題和選擇

General
1

因為支援度和跟上時代

開始把舊專案升級 8 → 9
如果都沒問題最終會上12

那各位升級的時候
會碰到

1
顯示update ok
然後ng s 和包版都沒問題

結果關掉vs code後重開就各種跳錯的狀況嗎?

2
所以各位會在升級一個版號時
update ok 就繼續輸入下個升級指令嗎?

像是8->9 如果沒有立刻跳錯， updateangular.io上感覺沒有特別要改的地方，
會繼續輸入ng update @angular/cli@10 @angular/core@10 升級嗎?

3
目前跳最多錯的是下面兩種錯誤
(1)

Can't bind to 'XXXXXX' since it isn't a known property of 'OOOO'.

=>跳這個錯通常都是我有使用

<OOOO  [XXXX]="abcd" > </OOOOO>

這種寫法
是因為Angular 9 的什麼改動嗎?

我自己是把 [ ] 去掉，變成

<OOOO  XXXX="abcd" > </OOOOO>

就沒跳錯了，但是因為還有其他錯誤無法驗證這樣做對不對

(2)

'XXXXX' is not a known element:
1. If 'XXXXX' is an Angular component, then verify that it is part of this module.
2. If 'XXXXX' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

這個真的是不知道該怎麼辦

有時連

<router-outlet></router-outlet>

也會出蚯蚓，可是原本的引入都是正常的

或是出現
問題紅字還在，但是ng s 正常的狀況 wtf

未命名
未命名1849×746 170 KB

然後關掉再ng s 一次就開始各種跳錯了

(3)

No pipe found with name 'date'.ngtsc(-998004)

  <tbody>
      <tr *ngFor="let dformHistory of dformHistories">
        <td>
          {{ dformHistory.jobSeqNo }}
        </td>

        <td>
          {{ dformHistory.createdDate | date: 'yyyy/MM/dd HH:mm' }}
        </td>
        <th>
          <button
            mat-button
            mat-raised-button
            (click)="LinkToDocWeb(dformHistory.jobSeqNo)"
          >
            連結
          </button>
        </th>
      </tr>
    </tbody>

這個我也認為我的

import {CommonModule} from "@angular/common";

有引入
所以這邊也又是撞牆無解… QQ

網路上看到的升級都是輕鬆寫意
怎麼我的好像就有點痛苦

2

node modules 資料夾砍掉重新 npm install

3

試過還是不行

有點一籌莫展了

會是是Angular Material 引入輸出的問題嗎?

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Material Form Controls
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// Material Navigation
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
// Material Layout
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
// Material Buttons & Indicators
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
// Material Popups & Modals
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
// Material Data tables
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
  ], // 先import
  exports: [
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
  ], // 在export
})
export class SharedMaterialModule {}
4

這邊看起來很正常