标签: angular9

按照https://www.npmjs.com/package/ng-multiselect-dropdown为 angular 9 执行步骤

在浏览器控制台中收到以下错误

类型错误：无法读取未定义的属性“idField”

我正在使用 Angular 9。如何构造一个没有表头行（th）的 mat-table？听起来很傻，但如果我这样做

<table mat-table *ngIf="isMobile" #mobile_table [dataSource]="dataSource">\n  <ng-container matColumnDef="item">\n    <td mat-cell *matCellDef="let item_stat">\n      <div class="smallHeading">\n        {{ item_stat.max_date }} m\n      </div>\n      <div class="mainRow divider">\n        <a href="{{ item_stat.mobile_path }}">{{ item_stat.title }}</a> \xc2\xb7\n        {{ getScore(item_stat) }}\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr>\n  <tr mat-row *matRowDef="let row; columns: mobileDisplayedColumns;" [ngClass]="getRowClass(row)"></tr>\n</table>\n

它产生错误

ERROR TypeError: Cannot read property 'template' of undefined\n    at MatHeaderRowDef.extractCellTemplate (table.js:567)\n    at table.js:2522\n    at Function.from (<anonymous>)\n    at MatTable._getCellTemplates (table.js:2512)\n    at MatTable._renderRow (table.js:2467)\n    at table.js:2326\n    at Array.forEach (<anonymous>)\n    at …

我刚刚将我的项目升级到 Angular 9，我注意到的第一件事是我的 CI 中的构建时间显着增加（从 2 分钟到 4 分钟）。

通过分析日志，每次执行测试或构建时，CLI 都会执行预编译。这是由于新的 Ivy 架构，但据我所知，这种编译应该只发生在与 Ivy 不兼容的代码上。

那么为什么我Compiling @angular/common : es2015 as esm2015在我的构建中看到很多（主要来自@angular 包）？Angular 代码本身不应该与 Ivy 兼容吗？

注意：这也发生在一个新项目中（只有几个库）。

更新 所有需要构建的命令都会发生这种情况。前任：

• ng test --code-coverage=true --watch=false --browsers=ChromeHeadle
• ng b -c=staging --aot

更新 2

我正在添加我的构建以进行比较：pre angular 9和 after angular 9 迁移（构建仍然失败，但我们可以使用单元测试作为参考，从大约 2 分钟到大约 4 分钟的总执行时间）

我想在 angular 9 中使用 ckeditor，我按照https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html 中的说明进行操作， 但在我导入 '@ckeditor/ 时显示错误ckeditor5-build-classic':

Could not find a declaration file for module '@ckeditor/ckeditor5-build-classic'. 

'a:/repositories/BasimStore/source/Web/Frontend/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js' implicitly has an 'any' type.
  Try `npm install @types/ckeditor__ckeditor5-build-classic` if it exists or add a new declaration (.d.ts) file containing `declare module '@ckeditor/ckeditor5-build-classic';`

我在 package.json 中有 "@ckeditor/ckeditor5-angular": "^1.2.3" 和 "@ckeditor/ckeditor5-build-classic": "^20.0.0" 但它仍然显示错误。我在 ckeditor5-build-classic 文件夹中找不到 index.d.ts。我应该如何解决这个错误？

我有一个对外部日志组件的引用（在 js 文件中引用），我在typings 文件中定义了它

打字.d.ts

declare var LogglyTracker;

我已将 angular 应用程序从版本 8 升级到 9，现在当我运行ng build 时，出现以下错误

src/app/error/loggly.service.ts:13:29 中的错误 - 错误 TS2304：找不到名称“LogglyTracker”。

有谁知道解决这个问题的推荐方法是什么？这段代码在 Angular 8 中运行良好。

@Injectable()
export class LogglyLoggerService {

// https://github.com/loggly/loggly-jslogger
private loggly: any = new LogglyTracker(); //!! Error here
}

我无法使用 Hammer.JS 在我的 Angular 应用程序中识别滑动。它的设置是这样的：

"@angular/core": "~9.0.0-next.6",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.2"

app.module.ts看起来像这样：

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as hammer from 'hammerjs';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: hammer.DIRECTION_HORIZONTAL },
    pinch: { enable: false },
    rotate: { enable: false }
  };
}

@NgModule({
  imports: [
    BrowserModule,
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
})

app.component.ts有这个方法：

onSwipe() {
  console.log('swipe');
}

最后app.component.html看起来像这样：

<div (swipeleft)="onSwipe()" (swiperight)="onSwipe()"> …

从 Angular 8 更新到 Angular 9 后，下面给出的 mat-progress-button 出现错误。它在 Angular 8 上工作正常。MatProgressButton 与 Angular 9 不兼容吗？

node_modules/mat-progress-buttons/esm2015/mat-progress-buttons.js:181:26 - error NG1010: Value at position 1 in the NgModule.imports of MatProgressButtonsModule is not a reference: [object Object]

导入看起来像： import { MatProgressButtonsModule } from 'mat-progress-buttons';

我的 package.json 看起来像这样：

  "dependencies": {
    "@angular/animations": "^9.0.2",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/material": "^9.1.0",
    ...
    "@angular/router": "~9.0.2",
    "core-js": "^2.5.4",
    "mat-file-upload": "^1.3.2",
    "mat-progress-buttons": "^8.0.7",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": …

我已经将我们的 Angular 混合项目从 8 迁移到 9。迁移进行得很顺利，ng build / ng serve 像以前一样运行良好。

真正的问题，我不知道如何开始工作，是在我构建了用于生产的应用程序之后（ng build --prod）。项目登陆页面完全空白，没有JS错误，没有控制台警告。看起来 AppModule 没有加载？我们唯一需要做的更改与 main.aot.ts 文件相关，我们删除了该文件，因为它不再适用于 IVY 编译器。

您过去可能拥有的任何相关经验都会对我有所帮助，非常感谢！

main.ts 看起来像这样

import {enableProdMode, StaticProvider} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import {downgradeModule} from "@angular/upgrade/static";

if (environment.production) {
  enableProdMode();
}
declare var angular: any;

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AppModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.bootstrap(document.getElementById('app-root'), ['angularJSModule', downgradedModule], …

当我使用 Angular Cli 版本 9.1.7 和 enableIvy 构建应用程序时，我收到以下警告。我正在使用 ag-grid-community 版本 22.1.0。

警告：无法完全加载 /node_modules/ag-grid-angular/main.js 以进行源映射展平：ENOENT：没有这样的文件或目录，打开 '/node_modules/ag-grid-angular/exports.js.map

应用程序运行良好，但仍然想知道，这个问题是来自 ag-grid 方面吗？我没有检查 ag-grid 23 版本，所以这个问题可以在最新版本上解决或不出现。想法..

在 Angular 8 中，我能够创建具有“@Injectable”属性的基础组件（对从中继承的实际组件进行类）。Angular 9 编译器告诉我：

组件 YourComponent 从 BaseComponent 继承其构造函数，但后者没有自己的 Angular 装饰器。依赖注入将无法解析 BaseComponent 的构造函数的参数。向 BaseComponent 添加 @Directive 装饰器，或向 RoleSelectDialogComponent 添加显式构造函数。

现在 Angular 9 做这些事情的方式是什么？这有效，但看起来有点hacky：

@Component({
    selector: 'baseComponent',
    template: 'no-ui'
})