小编Vig*_*esh的帖子

我在更新后将角度包版本从2.4.10更新到4.0.0我在导航时遇到以下错误.

ERROR Error: Uncaught (in promise): Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

我改变了webpack.common.js配置.看下面的代码

 new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

我正在使用带有嵌套行的PrimeNG TurboTable.虽然将数据加载到TurboTable会出现严重的性能问题,例如渲染大约需要30秒,并且需要10秒以上才能变得稳定,数据从服务器加载,并且从服务器很快.有没有其他人遇到过问题.如果是的话,你怎么能修复它.

HTML

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-columns="columns" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
          <ul>
            <li *ngFor="let item of sales"
            <a [ngClass]="{'active':car.order==item.order,'inactive':car.order > item.order}">
                                    <i class="fa {{item.icon}}"></i>
                                </a>
            </li>
           </ul>
            </td>
        </tr>
    </ng-template>
</p-table>

TS

  this.cars =[
        {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
        {"brand": "Mercedes", …

将 Angular 从 v.11 升级到 v.12 后，出现以下错误

home.Component.ts

imgname= require("../assets/images/imgname.png");\n

./src/assets/images/imgname.png:1:0- 错误：模块解析失败：意外字符 \'\xef\xbf\xbd\' (1:0)\n您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

"devDependencies": {\n    "@angular-devkit/build-angular": "^12.0.1",\n    "@angular/cli": "~12.0.1",\n    "@angular/compiler-cli": "~12.0.1",\n    "@angular/language-service": "~12.0.1",\n    "@types/jasmine": "~3.7.4",\n    "@types/jasminewd2": "~2.0.9",\n    "@types/node": "^15.6.1",\n    "css-loader": "5.2.6",\n    "html-webpack-plugin": "^5.3.1",\n    "jasmine-core": "~3.6.0",\n    "jasmine-spec-reporter": "~5.0.0",\n    "karma": "~5.0.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage-istanbul-reporter": "~3.0.2",\n    "karma-jasmine": "~4.0.0",\n    "karma-jasmine-html-reporter": "^1.6.0",\n    "mini-css-extract-plugin": "~1.6.0",\n    "protractor": "~7.0.0",\n    "ts-loader": "9.2.2",\n    "ts-node": "~10.0.0",\n    "tslint": "~6.1.0",\n    "typescript": "~4.2.4"\n    "webpack": "~5.37.1",\n    "webpack-bundle-analyzer": "^4.4.2",\n    "webpack-cli": "^4.7.0"\n  }\n

angular.json \n"assets": [\n"src/favicon.ico",\n"src/assets",\n]

我已将 Angular Material2 包添加到我的项目中。但是，我在浏览器中收到以下警告消息，我创建了一个自定义 scss 文件并导入了包，但它仍然抛出警告消息：

找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南：material.es5.js?7d89:180 https://material.angular.io/guide/theming

我创建了 styles.scss 文件并包含以下配置文件

包裹

 "@angular/material": "^2.0.0-beta.8",

样式.scss

在 styles.scss @include mat-core()中，将鼠标悬停在“mat-core”上时显示（未声明的 mixin）警告消息

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core(); …

我正在使用 Angular/Material Autocomplete。加载数据到 Autocomplete 会遇到严重的性能问题，比如渲染需要大约 30 秒，需要 10 多秒才能稳定，数据是从服务器加载的，从服务器接收数据非常快。为了解决这个问题，我使用了 cdkVirtualScroll，在向下滚动到结尾并再次单击文本框后，它在滚动其加载值后加载空弹出窗口。

html

   <mat-form-field>
      <input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
        <cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
          <mat-option *cdkVirtualFor="let option of options" [value]="option">
            {{option}}
          </mat-option>
        </cdk-virtual-scroll-viewport>
        </mat-autocomplete>
    </mat-form-field>

TS

export class AppComponent  {
  options: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;

  constructor() {
    for (let i = 0; i < 10000; i++) {
      this.options.push("#"+i);
    }
  }

  panelOpened() {
    if (this.viewport) {
      this.viewport.checkViewportSize();
    }
  }
}

检查前：https : …

我正在尝试在选项卡中加载组件。单击特定选项卡时，我需要加载特定组件。但它在导航到该组件时加载所有组件。

.html

<p-tabView orientation="left" (onChange)="onTabChange($event)">
       <p-tabPanel *ngFor="let item of items" style="border: solid 1px; padding: 20px;margin: 20px;" [selected]="activeTabIndex==i">
              <strong> When you click here, 
              I should load the <span style="color:red"> {{item.name}} </span>
              component below</strong> <br />

              <ng-container *ngComponentOutlet="childmap[item.name] "></ng-container>

          <br />
        </p-tabPanel>
</p-tabView>

.ts

@Component({
  selector: 'my-app',
  templateUrl:'dashboard.html' 
  `
})
export class App {
 activeTabIndex: number = 0;

childmap = {
        'slider': sliderComponent,
        'user': usersComponent,
        'alert danger': AlertDangerComponent
         }


items:Array<any> = [
    {
      name: 'slider' 
    },
    {
      name: 'user'
    },
    {
      name: …