标签: angular15

我将我的 Angular 应用程序更新到 Angular 15。它构建正常 - 除非出现一些警告，例如：

TypeScript 编译器选项“target”和“useDefineForClassFields”分别由 Angular CLI 设置为“ES2022”和“false”。

我的tsconfig.json目标是ES6：

{
  ...
  "compilerOptions": {
      "target": "ES6",
      ...
  }
}

文档说：

在内部，Angular CLI 现在始终将 TypeScript 目标设置为 ES2022，并将 useDefineForClassFields 设置为 false，除非在 TypeScript 配置中将目标设置为 ES2022 或更高版本。

https://github.com/angular/angular-cli/blob/main/CHANGELOG.md

我的 .browserslistrc 看起来一个月都没有变化，从一开始就没有变化：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

那么，我怎样才能摆脱这个警告呢？

从 Angular 14 更新到 15 后，我的测试将不再运行。当我运行 ng test 时，出现以下错误：

An error was thrown in afterAll
  Uncaught TypeError: __webpack_require__(...).context is not a function
  TypeError: __webpack_require__(...).context is not a function
      at Module.4289 (http://localhost:9876/_karma_webpack_/webpack:/src/test.ts:22:30)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at __webpack_exec__ (http://localhost:9876/_karma_webpack_/main.js:180646:48)
      at http://localhost:9876/_karma_webpack_/main.js:180647:54
      at Function.__webpack_require__.O 

我的 test.ts 文件如下所示，并在 angular.json 中设置为“main”。

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import "zone.js/testing";

import { getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

declare const require: …

我正在从 Angular 14 更新到 15 以及 Material UI

看到这个警告，目前还没有找到解决办法。

Angular Material 主题应从包含“颜色”、“版式”、\xc2\xa0\n 和“密度”键的地图创建。颜色值应该是包含“primary”、“accent”和“warn”调色板值的映射。有关更多信息，请参阅https://material.angular.io/guide/theming。\xc2\xa0

有人能指出我正确的方向吗？

我的package.json

{\n  "name": "memphis",\n  "version": "0.0.0",\n  "scripts": {\n    "ng": "ng",\n    "start": "ng serve",\n    "build": "ng build",\n    "test": "ng test",\n    "testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",\n    "lint": "ng lint",\n    "e2e": "ng e2e"  },\n  "private": true,\n  "dependencies": {\n    "@amcharts/amcharts4": "^4.10.33",\n    "@angular/animations": "^15.1.2",\n    "@angular/cdk": "^15.1.2",\n    "@angular/common": "^15.1.2",\n    "@angular/compiler": "^15.1.2",\n    "@angular/core": "^15.1.2",\n    "@angular/forms": "^15.1.2",\n …

升级到 Angular 15 后，我想使用旧组件以便之后进行持续迁移。然而，遗留组件并不具有所有样式，并且看起来格式错误。

我使用ng updateAngular 14 到 15 的迁移，并调整主题以使用文档中提到的新方式（https://material.angular.io/guide/theming）

我的输入目前看起来像这样

我正在使用自定义的角度材质主题

我从Material Theme Generator生成自定义主题

我的主题是这样的

@use \'@angular/material\' as mat;\n\n@import \'https://fonts.googleapis.com/css?family=Material+Icons\';\n@import url(\'https://fonts.googleapis.com/css?family=Amiri:300,400,500\');\n\n$fontConfig: (\n  display-4: mat.define-typography-level(52px, 56px, 300, \'Amiri\', -0.0288em),\n  display-3: mat.define-typography-level(38px, 38px, 400, \'Amiri\', -0.0132em),\n  display-2: mat.define-typography-level(32px, 36px, 400, \'Amiri\', 0em),\n  display-1: mat.define-typography-level(28px, 32px, 400, \'Amiri\', 0.0089em),\n  headline: mat.define-typography-level(24px, 32px, 400, \'Amiri\', 0em),\n  title: mat.define-typography-level(20px, 32px, 500, \'Amiri\', 0.0075em),\n  subheading-2: mat.define-typography-level(16px, 28px, 400, \'Amiri\', 0.0094em),\n  subheading-1: mat.define-typography-level(15px, 24px, 500, \'Amiri\', 0.0067em),\n  body-2: mat.define-typography-level(14px, 24px, 500, \'Amiri\', 0.0179em),\n  body-1: mat.define-typography-level(14px, 20px, 400, \'Amiri\', 0.0179em),\n  button: mat.define-typography-level(14px, 14px, 500, \'Amiri\', 0.0893em),\n …

我正在将角度应用程序迁移到standalone component. 删除了ngModule和app.module.ts文件

主要.ts

bootstrapApplication(AppComponent,{\n  providers:[importProvidersFrom(FalconCoreModule.forRoot(environment)),\n             importProvidersFrom(RouterModule.forRoot(routes))]\n}).catch(err => console.error(err));\n

应用程序组件.scss

@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  standalone: true,\n  imports:[RouterModule,FalconCoreModule]\n})\nexport class AppComponent {}\n

自动完成.component.ts

@Component({\n  selector: 'app-auto-complete',\n  templateUrl: './auto-complete.component.html',\n  styleUrls: ['./auto-complete.component.scss'],\n  standalone: true,\n  imports:[FalconCoreModule,CodeGeneratorComponent,HighlightModule,CodeButtonComponent]\n})\nexport class AutoCompleteComponent\n  extends BaseFormComponent<string>\n  implements OnInit {}\n

错误

core.mjs:9229 ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:\n  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.\n  - There …

将我的 Angular 应用程序更新到 V15，应用程序工作正常，但由于应用于材质元素标签样式名称（如（，.mat-form-field....mat-raised-button等）的样式，某些组件样式被破坏了

如果我将标签更改为 . 它可以工作.mat-**mdc**-raised-button。所以我的问题是如何立即解决这个问题，而不是更改每个文件中的代码。

还想知道企业应用程序的最佳实践是什么，我们应该在材质应用的标签上应用样式还是始终使用 CSS 类名称？

我正在开发一个 Angular 项目，从 angular14 更新到 15，但是在安装新的 Material 包后，整个项目在视觉上似乎被破坏了。颜色、边距、填充错误。该项目只包含css样式文件，不包含scss。我认为问题出在遗留材料组件上，但是我应该如何/在哪里添加到项目中？谢谢！

Angular 15 中的属性appearance="standard"不再起作用。除了 之外，所有外观均运行良好standard。

为什么这不再起作用了？

结果：

需要：

<mat-form-field class="form-field" Appearance="Standard">
    <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required>
</mat-form-field>

我想知道如何将非独立组件导入到独立组件中，因为非独立组件是在 ngModule 中声明的。