标签: angular11

最初，我对 DatePipe 进行了一个简单的扩展，以从我们的标准（YYYYMMDD 格式）转换日期值，以便 Angular 中的 DatePipe 可以使用它。

export class SlsDatePipe extends DatePipe implements PipeTransform {
    constructor(Locale:string) {
        super(Locale);
    }

    /**
     * Convert the data from the numeric YYYYMMDD to the Javascript date format
     * @param DateValue SLS Formatted number in the YYYYMMDD style
     * @param args Angular Date Pipe args to control the output format
     * @returns Text output following the Javascript date() formats
     */
    public transform(DateValue:number, args:string):string | null {
    
        const DateString:string = DateValue.toString();
        const Year:number  = parseInt(DateString.substr(0, …

我正在尝试将项目中的 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 …

我无法理解我的代码出了什么问题，我导入了模块，但仍然收到此错误“未找到名称‘matAutocomplete’导出”

注意：导入MatAutocompleteModule后，我重新启动IDE再次编译几次，仍然一样。

这是 app.module.ts - 仅粘贴代码的相关部分

import {MatAutocompleteModule} from '@angular/material/autocomplete';
@NgModule({ declarations:[..xxxx....],
imports:[xx,xxx,MatAutocompleteModule],
providers:[xx,xx],
bootstrap: [AppComponent]})
export class AppModule { }

组件.html

<form class="form-group-parent p-0" [formGroup]="frmStep1" (ngSubmit)="submit()">
       <mat-form-field class="example-full-width">
          <input type="text" placeholder="Ex. English" aria-label="Language" matInput
                    [formControl]="language" [matAutocomplete]="auto">
               <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                  <mat-option *ngFor="let option of languageList | async" [value]="option">
                        {{option}}
                  </mat-option>
                  </mat-autocomplete>
                 <mat-error>
                    <strong>Language</strong> is required.
                </mat-error>
       </mat-form-field>
</form>

组件.ts

import {Component, OnInit} from '@angular/core';
import {FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from …

我正在将一个模块从 primeng 7 迁移到 primeng11 以及 angular11 代码在 ng 服务上运行得很好，功能也正常工作，但在构建时我遇到了一个奇怪的错误

 error TS2339: Property 'value' does not exist on type 'FilterMetadata | FilterMetadata[]'.
  Property 'value' does not exist on type 'FilterMetadata'.

错误是针对以下代码的

<input *ngIf='!col.noFilter' [style.width]="'98%'" [style.height]="'25px'" pInputText type="text"
                        [placeholder]="col.filterPlaceHolder ? col.filterPlaceHolder : ''" 
                        (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)" 
                        [value]="dt.filters[col.field]?.value" />
 

我已经验证了 primengFilterMetaData接口，它的属性值如下

export interface FilterMetadata {
    value?: any;
    matchMode?: string;
    operator?: string;
}

代码语法很好，我已经在 primeng 页面文档上验证了相同的语法https://www.primefaces.org/primeng/showcase/#/table

请帮助不确定为什么 ng 服务没有问题但构建失败。我的节点版本是节点v10.23.0

您好，我是 Angular 新手，目前我正在处理 Angular 11 项目，我必须上传 CSV 文件并在客户端提取文件记录，然后通过 ASP.NET Web API 将它们保存在数据库中。

在这里，我按照教程尝试获取角度侧的 CSV 文件的数据并将它们显示在同一页面中。

然后我得到这个错误，

输入“文件| null' 不可分配给类型“File”。类型“null”不可分配给类型“File”.ts(2322)

我尝试了很多方法但仍然无法解决这个问题。请你帮助我好吗？

这是我的 .ts 文件，

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styles: [
  ]
})
export class FileUploadComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  lines: any = [];
  linesR: any = [];

  changeListener(files: FileList) {
    console.log(files);
    if (files && files.length > 0) {
      let file: File = files.item(0);
      console.log(file.name);
      console.log(file.size);
      console.log(file.type);

      let …

我有一个顶级路由器，它延迟加载子路由功能模块，在升级到 Angular v11.0.1 后已停止正常工作。

在 ng11 中的路由器事件处注销时，功能模块会被加载，并且RouteConfigLoadStart和RouteConfigLoadEnd都会通过正确的子路由器配置触发，但RoutesRecognized不会被调用。routerLink如果我第二次单击该链接（而不是），所有事件都会正常触发并加载相应的组件。

澄清一下：这不仅仅是链接的问题。它也不适用于初始页面加载，除非我转到不同的路线（第一次也不会加载），然后返回原始路线

此设置在 Angular v10.2.3 中可以正常工作（即只需单击一次并在初始加载时）

应用路由模块：

const routes: Routes = [
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'browse', loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule)},
    {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)},
    {path: '**', redirectTo: '/dashboard'}
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule { }

仪表板路由模块

const routes: Routes = [
    {path: '', component: DashboardComponent},
    {path: ':id', component: DashboardComponent} …

不久前，我创建了两个简单的文件来扩展某些类型的功能。我global.d.ts用这种方式创建了一个：

export { }

declare global {
    interface Date {
        isLeapYear() : boolean;
    }

    interface Array<T> {
        contains(item: T, compareFunc?: (value: T) => boolean): boolean;
        sum(callbackfn: (value: T) => number) : number;
    }

    interface Element {
        closest(selector: string) : Element;
    }

    interface String {
        contains(text: string) : boolean;
    }
}

然后我extensions.ts在原型上创建了文件和实现。我将其导入到我的polyfills.ts：

import "zone.js/dist/zone";
import "./extensions";

通过这种方式，我可以在代码中的任何地方使用这些方法。现在我需要在 Angular 11 库中做同样的事情。我创建了global.d.ts和extensions.ts，但是现在呢？没有polyfills.ts文件，如果我尝试进行简单的导入，而我需要其中一种方法 ( import "../../extensions";)，则不起作用。在控制台中我收到此错误：

projects/test_library/src/components/test.component/test.component.ts:428:48 - error TS2339: Property …

我试图弄清楚如何在 Angular 11 中使用useFactory作为异步函数。现在我有这个：

import { ApolloClientOptions } from 'apollo-client';
import { FirebaseService } from './firebase.service';
// other imports here...

export async function createApollo(httpLink: HttpLink, fs: FirebaseService): Promise<ApolloClientOptions<any>> {

  const token = await fs.getToken();

  const getHeaders = async () => {
    return {
      "X-Auth-Token": token,
    };
  };

  // functions has more content here...

  return Promise.resolve({
    link: errorLink.concat(link),
    cache: new InMemoryCache(),
  });
}

@NgModule({
  imports: [HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, FirebaseService],
    },
  ],
}) …

您好，在我运行“ng update @angular/core@12 @angular/cli@12”从 11 升级到 12，然后运行“ngserve app”后，我不断收到以下错误：“来自 PostCSS 插件的未知错误。您当前的错误PostCSS 版本是 8.2.14，但 postcss-preset-env 使用 7.0.35。也许这就是下面错误的根源。”

我的问题是什么？package.json 中没有 PostCSS。我不知道这件事。提前致谢。