标签: angular12

这是我为单页 Web 应用程序编写的简单 HTML

<div class="bg">
    <h1 class="faq_heading">Frequently Asked Questions</h1>
    <div class="search">
        <mat-form-field class="search_input">
            <input type="text" placeholder="Search" class="search_input" matInput [(ngModel)]="inp" (keyup)="onKey($event)" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Categories</mat-label>
            <mat-select class="dropdown" placeholder="Categories">
                <mat-option value="Default">Default</mat-option>
            </mat-select>
        </mat-form-field>
        <img src="../assets/images/search.svg" alt="" class="search_img" />
    </div>
</div>

component.ts 文件中没有太多内容，只有基本模板和所需的导入语句

以下是app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MatFormFieldModule } from "@angular/material/form-field";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatGridListModule } from "@angular/material/grid-list";
import { …

我有一个src/assets/version.json包含此内容的 json 文件：

{"VERSION":"1.0.0"}

然后我将文件导入到*.ts，例如：

import * as VersionInfo from 'src/assets/version.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

 constructor() {
   console.log(`version ${VersionInfo['VERSION']}`);
 }

}

输出

version 1.0.0

这适用于 Angular 11，但在 Angular 12 上，CLI 显示错误

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

这是我的 tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "strictPropertyInitialization": false,
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": …

我尝试在 Angular 12 中使用材质日期选择器，但出现错误：

main.js：1错误错误：未捕获（承诺中）：TypeError：无法读取null的属性“localeChanges”TypeError：无法读取null的属性“localeChanges”

关于其他在 Angular 12 上正常工作的日期选择器有什么建议吗？

我有一个旧的角度库，当我迁移到angular 12并尝试构建我的库时，我收到以下错误：

  projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts:7:1
      7 @Component({
        ~~~~~~~~~~~~
      8   selector: 'app-alerts',
        ~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     39 
        
     40 }
        ~
    The component 'AlertsComponent' is used in the template but importing it would create a cycle: projects/namespace/lin-folder//src/lib/components/header/header.component.ts -> projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts -> projects/namespace/lin-folder//src/lib/website.module.ts -> projects/namespace/lin-folder/src/lib/components/header/header.component.ts

有人遇到过同样的错误吗？

升级到 Angular 12 后，虽然我在 app.module.ts 中有所有必需的代码，但所有材质标签都无法识别：例如，对于 mat-checkbox，我在 app.module.ts 中有以下内容

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [
    BrowserModule,  
    MatCheckboxModule,

并在执行时：

“mat-checkbox”不是已知元素：

1. 如果“mat-checkbox”是 Angular 组件，则验证它是否是该模块的一部分。
2. 如果“mat-checkbox”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”

所有材质标签（mat-icon、mat-table、mat-label ......）都有同样的问题。

在之前的版本（Angular 9）中，一切正常。感谢帮助。

我已从 Agular 11 升级到 12，每个 SVG 文件都出现以下错误。

错误：模块解析失败：意外的标记 (1:0) 您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。

例如 SVG 文件

  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
        <linearGradient id="linear-gradient-searchquery" x1="-5.5" y1="41.5" x2="35" y2="1" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.232" stop-color="#fafafa"/>
          <stop offset="0.496" stop-color="#ededed"/>
          <stop offset="0.775" stop-color="#d6d6d6"/>
          <stop offset="1" stop-color="#bebebe"/>
        </linearGradient>
        <linearGradient id="paper_gradient-searchquery" data-name="paper gradient" x1="19.25" y1="44.25" x2="32.25" y2="31.25" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.221" stop-color="#f8f8f8"/>
          <stop offset="0.541" stop-color="#e5e5e5"/>
          <stop offset="0.92" stop-color="#c6c6c6"/>
          <stop …

我无法ng serve在开发模式下运行。

我已将 Angular v11 升级到 v12。从那时起，我的编译出现延迟，并且开发模式似乎无法启用。

我总是收到这样的警告：

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

我的惰性块文件是这样的：

终端

由于编译文件是在浏览器上设置的，因此需要花费大量时间来调试任何内容。

浏览器检查

我已经检查了 enviroment.ts 变量并设置为：

export const environment = {
  production: false,
  api: 'http://127.0.0.1:8000'
};

我的 Chrome Angular 扩展警告我，我正在生产中运行，即使我不想：

We detected an application built with production configuration. Angular DevTools only supports development builds.

Angular.json 上的 ng 服务部分

"serve": {
          "builder": …

我在基于 Angular 12 的网站上向不同的 mat-buttons 添加了一些 CSS 属性。为了不意外地将这些属性应用于所有 mat-buttons，而仅应用于我想要应用它们的按钮，我向按钮添加了一个类，并使用它来设置 CSS 属性，如下所示：

组件html文件：

<a class="menu-button" mat-button>
  <img class ="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

组件scss文件：

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

只要我将 css 代码保留在组件的 scss 文件中，就可以正常工作，但因为我不想在要应用这些属性的每个组件中都将其作为冗余代码，所以我将其移至样式中。取而代之的是.scss 文件。执行此操作后，仅应用部分属性，但有些属性似乎被覆盖/忽略：

为什么会发生这种情况以及如何防止这种情况发生？

在 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 应用程序中有一些通用组件，我计划将其创建为 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）。

请建议正确的继续方式。