标签: angular12

我昨天更新到了使用 Webpack 5 的 Angular 12。

该发行说明博客说：

在 v11 更新中，我们添加了对 Webpack 5 的实验性支持。今天，我们很高兴地宣布，我们将在 Angular 中发布 Webpack 5 支持的生产就绪版本。

我想知道 Webpack 5 中的哪些内容可以改进我的 Angular 项目。

不幸的是，在 Windows 上运行时，我发现构建时间要长得多，ng serve从 70 秒到 106 秒不等。构建时间要长得多（是的，我正在使用增量构建，但第一次构建非常重要）而且我也没有看到包大小有任何减少。

我相信 sass 编译器可能对我看到的时间增加负有部分责任。事实上，使用speed-measure-webpack-plugin我能够看到很多时间专门用于 sass-loader。我可以在 webpack 配置中更改任何插件来帮助缓存 sass、使用不同的 sass 加载、编译器或类似的东西吗？我正在使用@angular-builders/custom-webpack包，它允许我添加插件。

该的WebPack版本说明让我兴奋，似乎有一个用于提高构建性能很大的潜力，但不幸的是，我还没有跟角度看它，我得到更坏的结果。

我已将 Angular 项目更新为版本 12.0.5，将 Typescript 版本更新为 4.3.4，但在编译该项目时遇到问题。

目前，我在没有对分支进行更改的情况下收到以下错误：

Should not import the named export 'provinces' (imported as 'data') from default-exporting module (only default export is available soon)

这是import：

import { ApiService, Municipality, Province } from '../../services/api.service';

这就是我声明依赖于导入省份的变量的方式：

public provinces: Province[] = [];
  private currentPorvince: Province;

问题是什么？为什么会发生这种情况以及如何解决？

在 Angular 12 应用程序上，我创建了以下扩展：

declare global {
  interface String {
    toNumber(): number | null;
  }
}

Object.defineProperty(String.prototype, "toNumber", {
  value: function(this: string) {
    return Number(this) || null;
  }
});

在 Angular 组件中使用时：

var number = stringValue.toNumber();

我收到错误：

Property 'toNumber' does not exist on type 'string'.

在 Angular 中使用此类扩展的最佳方式是什么？

我需要更改创建扩展的方式吗？

我已将我的应用程序升级到 Angular 12。但是在运行 ngserve 时收到以下警告警告：由于选择器错误而跳过了 1 条规则：.k-input-label:dir(rtl) -> 不匹配的伪类：dir)

而应用程序中没有使用 .k-input-label:dir(rtl) 。由于以下错误，我的应用程序未在浏览器中加载。如果有人能帮助我解决这个警告，那就太好了。提前致谢。

我的 Angular 12 应用程序中有一些通用组件，我计划将其创建为 Angular 库，以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 Angular（例如 Angular 8 / Angular 10）上运行，它们也将使用这个通用库。

我已经在 Angular 12 中创建了库，它在 Angular 12 应用程序中运行良好。但是，它在使用 Angular 8 和 Angular 10 的其他应用程序中不起作用。

出现如下错误：

fesm2015/common-lib.js 12:145-163 "export '\xc9\xb5\xc9\xb5FactoryTarget' (imported as 'i0') was not found in '@angular/core'\n

所以，主要的困惑是我是否需要为 v8、v8 和 v12 应用程序创建 3 个不同的角度库。或者有什么方法可以创建一个可供所有 3 个角度应用程序使用的库（版本 8/10/12）。

请建议正确的继续方式。

父组件

  <form [formGroup]="User">
    
    <app-radioButton [group]="user"></app-radiobuton>
    
    </form>

在无线电组件 html 中

<mat-radio-button  [formControlName]="name" > <mat-radio-button>

无线电组件的 .ts 中

export class RadioComponent{
@Input() group: FormGroup;
}

报错如上。不知道我做错了什么。

与“完整”编译模式相比，为什么在“部分”编译模式下编译的库在消费者应用程序内部构建得如此缓慢？

尝试添加CAPACITOR_ANDROID_STUDIO_PATH环境变量为。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.barqrscanner.app',
  appName: 'barqrscannerapp',
  webDir: 'www',
  bundledWebRuntime: false
};

export interface PluginsConfig {
  [CAPACITOR_ANDROID_STUDIO_PATH: string]: | {
        [CAPACITOR_ANDROID_STUDIO_PATH: string]: 'D:\\android-studio-canary\\bin\\studio64.exe';
      }
    | undefined;
}

export default config;

如果我尝试将其添加到 .

const config: CapacitorConfig = {
  appId: 'com.barqrscanner.app',
  appName: 'barqrscannerapp',
  webDir: 'www',
  bundledWebRuntime: false,
  CAPACITOR_ANDROID_STUDIO_PATH: 'D:\\android-studio-canary\\bin\\studio64.exe'
};

会给出这样的错误。

ionic build有效，但是当我运行npx cap open android它们CapacitorConfig并且PluginsConfig不工作时，它显示了这个问题。

    PS D:\Projects\BarQrScannerApp> npx cap open android
[error] Unable …

堆栈： 带有 .NET 的 Angular 12，在 Docker 容器中运行。捆绑包正在由 @angular-devkit/build-angular:browser 构建。

最后的工作设置： 该应用程序之前在 Angular 7 上运行，所有资产确实都是通过 HTTPS 提供的。

问题： 当通过 HTTPS 运行时，Angular 12 捆绑包正在提供资产，包括。通过 HTTP 的 main.js、polyfills、样式表或 favicon。这会导致包、polyfills、styles.css 和 favicons 出现以下错误：

混合内容：页面通过 HTTPS 加载，但请求不安全的 X。此请求已被阻止；内容必须通过 HTTPS 提供。

我的第一个问题是 ng 构建过程，尽管我不知道如何确定提供资源的方式（？），因此我提到了堆栈的其余部分，以便在需要时进行检查。

更新：我标记了一个答案，但这是一种解决方法，我决定采用足够好的方法，尽管应该有一个我仍然希望找到的更深入的解决方案。

在我的项目中，当用户更改另一个列表中的选定值时，我有时希望更新列表中的可用选项。为此，我使用了valueChanges运算符pipe，switchMap如下所示：

this.form.controls.typeControl.valueChanges
  .pipe(
    switchMap((typeId: number) => {
      return this.typesService.getProjectsByType(typeId);
    }),
  )
  .subscribe((projects) => {
    //...
  });

现在我遇到的问题是，我需要一次执行两个 http 请求来更新多个列表，而不是仅更新一个列表。当我尝试添加第二个时switchMap，我得到error TS2345: Argument of type 'OperatorFunction<number, Project[]>' is not assignable to parameter of type 'OperatorFunction<any, number>'.以下是我尝试执行此操作的方法：

this.form.controls.typeControl.valueChanges
  .pipe(
    switchMap((typeId: number) => {
      return this.typesService.getProjectsByType(typeId);
    }),
    switchMap((typeId: number) => {
      return this.typesService.getProgramsByType(typeId);
    }),
  )
  .subscribe(([projects, programs]) => {
    //...
  });

如何在此处添加第二个 http 请求，以便我可以处理 中两个请求收到的数据subscribe？