小编Kaj*_*oss的帖子

我正在尝试将项目中的 Angular 从 10.2 版更新到 11.0 版。运行 ng 更新：

  @angular-devkit/build-angular      0.1002.0 -> 0.1100.1     ng update @angular-devkit/build-angular
  @angular/cdk                       10.2.7 -> 11.0.0         ng update @angular/cdk
  @angular/cli                       10.2.0 -> 11.0.1         ng update @angular/cli
  @angular/core                      10.2.3 -> 11.0.0         ng update @angular/core
  @angular/material                  10.2.7 -> 11.0.0         ng update @angular/material

不幸的是，我尝试更新的每个包都失败了。我尝试使用 --force 和 --allowDirty 标志。

@angular-cli

npm ERR! Found: @angular-devkit/build-angular@0.1002.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~0.1100.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~0.1100.1" from the root …

我正在尝试使用 Angular 的 mat-toolbar 创建导航栏。我用 mat-icon 添加了图标。当我尝试为它们添加标签时，文本与图标重叠。 工具栏 html 的屏幕：

<mat-toolbar color="warn">
    <mat-toolbar-row>
        <img src="/assets/img/logo.png" width="150">
        <span class="example-fill-remaining-space"></span>
        <button mat-icon-button>
            <mat-icon>home</mat-icon>
            <span>home</span>
        </button>

        <button mat-icon-button>
            <mat-icon>history</mat-icon>
            <span>home</span>
        </button>

        <span>
            <mat-menu #appMenu="matMenu">
                <span>language</span>
                <button mat-menu-item>ENGLISH</button>
                <button mat-menu-item>POLISH</button>
                <button mat-menu-item>ITALIAN</button>
            </mat-menu>
            <button mat-icon-button [matMenuTriggerFor]="appMenu">
                <mat-icon>language</mat-icon>
            </button>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

CSS：

.example-fill-remaining-space {
    flex: 1 1 auto;
}

.mat-icon {
    font-size: 25px;
    height: auto !important;
}

.icon-text {
    display: flex;
}