标签: angular15

这段代码非常适合使用 Angular 14 在我的整个应用程序中自定义排版

@use '@angular/material' as mat;\n@import '@angular/material/theming';\n\n$my-typography: mat-typography-config($font-family: "Lato, sans-serif");\n\n@include mat.core($my-typography);\n

将 Angular Material 和 cdk 更新到 15 时，此错误不断发生：

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Only 0 arguments allowed, but 1 was passed.\n  \xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80> src\\app\\core\\sass\\cecom-theme.scss\n11\xe2\x94\x82 @include mat.core($my-typography);\n  \xe2\x94\x82 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation\n  \xe2\x95\xb5\n  \xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80> node_modules\\@angular\\material\\core\\_core.scss\n8 \xe2\x94\x82 @mixin core() {\n  \xe2\x94\x82        \xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81 declaration\n  \xe2\x95\xb5\n  src\\app\\core\\sass\\cecom-theme.scss 11:1  core()\n  src\\app\\core\\sass\\cecom-theme.scss 11:1  root stylesheet\n

已尝试ng generate @angular/material:mdc-migration，但它没有检测到该文件中的任何问题。

将 Angular 从 v14 更新到 v15 后，我看到 Angular CLI 从 src/test.ts 文件中删除了行。这些行是：

declare const require: {
    context(path: string, deep?: boolean, filter?: RegExp): {
        <T>(id: string): T;
        keys(): string[];
    };
};

和

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);

这当然导致“npm run test”命令在本地失败，因为测试文件没有明确提供给 Angular。所以我将线路添加回来，一切都开始在本地工作。CI/CD 机器无法再运行“npm run test”命令。该命令将以下内容打印到标准输出：

29 11 2022 13:00:59.161:INFO [karma-server]: Karma v6.3.20 server started at http://localhost:9876/
29 11 2022 13:00:59.167:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
29 …

Angular 15 的配置文件比以前的版本更少，包括。karma.conf.js已被丢弃。为了ng test --browsers=FirefoxHeadless在 Angular 14 下运行，我曾经配置karma.conf.js为require('karma-firefox-launcher')插件。

在 Angular 15 中应该如何完成此操作？

• 是否可以复制karma.conf.js之前 Angular 14 项目的完整内容并将设置添加"architect.test.options.karmaConfig"到angular.json该karma.conf.js文件中？
• 或者有其他方法可以angular.json直接配置 Karma 插件吗？这样会更好吗？
• Angular 15 还能帮助我生成首字母吗karma.conf.js？

（动机：我的构建服务器ng test在无头容器中执行，因此为了简单的构建容器配置，我更喜欢FirefoxHeadless测试运行器的默认浏览器）

您好，我正在使用 Angular 材料编写 Angular 15 应用程序。

我用的是新的mat-tab（不是旧的）组件在我的页面中创建选项卡，并且我希望在选项卡标题中有一个关闭按钮。

所以在我创建的组件中removeTab函数：

removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

在模板中我做了以下操作：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs; let index = index">
    <ng-template mat-tab-label>
      {{index}}
      <button (click)="removeTab(index)" mat-icon-button><mat-icon>close</mat-icon></button>
    </ng-template>
...

问题是，当我将鼠标悬停在关闭按钮上时，它不显示它是可单击的，当我单击它时，只需单击选项卡本身，事件不会传播到关闭按钮。

我该如何解决这样的事情？

我有以下 Angular AuthGuard：

@Injectable({\n    providedIn: \'root\',\n})\nexport class AuthGuard implements CanActivate, CanLoad {\n    constructor(private authService: AuthService, private router: Router) {}\n\n    canActivate(\n        next: ActivatedRouteSnapshot,\n        state: RouterStateSnapshot,\n    ): | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n        return this.isAuthenticated();\n    }\n\n    canLoad(\n        route: Route,\n        segments: UrlSegment[],\n    ): | boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n        return this.isAuthenticated();\n    }\n\n    isAuthenticated(): | boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n        return this.authService.isAuthenticated$.pipe(\n …

我创建了一个简单的角度独立组件，它使用注入令牌进行配置：

export const PERSON_DEFAULT_OPTIONS = new InjectionToken<IPersonDefaults>('...')

export interface IPersonDefaults { ... }

export const providePersonDefaultOptions = (options: IPersonDefaults): Provider => ({
    provide: PERSON_DEFAULT_OPTIONS,
    useValue: options
})

@Component({...})
export class StandaloneComponent {
   readonly #config = inject(PERSON_DEFAULT_OPTIONS, {optional: true})
}

然后，在我的 main.ts 中，我只需调用providePersonDefaultOptions()我的价值观，一切都会很好。

现在我已经将该令牌/接口/组件放入 npm 库中。当我尝试再次运行该应用程序时，出现以下错误：

错误：NG0203：inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项或使用的函数EnvironmentInjector#runInContext

我不明白为什么该代码不能作为 npm 库工作，因为它仍然是一个正在设置的字段初始值设定项。

我使用 Angular 15 和 Material 15 并尝试添加一个没有波纹效果/任何悬停效果的按钮。

这曾经适用于角材料 12：

<button mat-button [disableRipple]="true">DoSomething</button>

但现在它仍然显示波纹/悬停效果。“disableRipple”输入是否损坏？

我可以通过执行以下操作来消除此行为：

.no-hover-effect {
  &.mat-mdc-button {
    ::ng-deep {
      .mat-mdc-button-persistent-ripple, .mat-mdc-button-ripple {
        display: none;
      }
    }
  }
}

但我想要一个无需修改 css 的解决方案。

我对有关独立组件的最新 Angular 更新有点困惑。我读到它们效率更高，但这是否意味着每个组件（中型项目）都应该迁移为独立组件？虽然它可能更有效，例如延迟加载，但我认为您必须为每个组件导入太多模块。尽管 Angular 在迁移时会自动执行此操作，但我不确定将来是否会添加代码：/

有人可以解释我是否或为什么应该完全迁移我的项目以包含独立组件吗？

我在项目根级别的测试文件夹中的 src 文件夹之外有 karma 测试规范文件。将 Angular 从 14 更新到 15 后，karma 需要测试规范文件位于 angular.json 文件中 sourceRoot 指定的任何文件夹中。

// angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-name": {
      "root": "",
      "sourceRoot": "", // <<===

有没有办法告诉 karma 查看工作空间根级别以向下进行测试，而不更改 angular.json 中的 sourceRoot 属性？

我将 sourceRoot 路径更改为“”，然后 Karma 会找到位于工作区文件夹及其下方的测试，因为我正在寻找带有 **/*.spec.ts 的测试

// tsconfig.spec.json
"include": [
    "**/*.spec.ts",
    "**/*.d.ts",
  ]

我将项目迁移到 Angular 15，无法再直接使用 FormsBuilder 来实现响应式表单。我收到一个未定义的异常：

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'group')
TypeError: Cannot read properties of undefined (reading 'group')

这是我的代码：

 settingsForm = this.formBuilder.group({
    locations: ''
  });

  constructor(private formBuilder: FormBuilder) {}

之前一切都很好。一个有效的解决方案是通过生命周期钩子 NgOnInit。然而，这将是不推荐的方式，我会失去隐式打字。

可能是什么原因？

我正在尝试设置一个 Angular Web 应用程序，其中 AppComponent 使用 Firebase 身份验证（和数据库）本身是独立的。因此没有NgModules。

我在main.ts中添加了

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),

    ),
    importProvidersFrom(
      provideFirestore(() => getFirestore())
    ),
  ...
  ]

在 AppComponent 中我添加了其他导入：

@Component({
  standalone: true,
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  imports: [
    RouterModule,
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule
  ]
})
export class AppComponent {

我没有任何特定的错误，但是一旦我尝试注入构造函数，AngularFireAuth就会收到以下错误：

我也尝试过添加

importProvidersFrom(AngularFireAuthModule),

但main.ts它没有帮助。

有谁知道我如何解决这个问题或者知道我做错了什么？

提前致谢 ：）

我有一个可以输入学生 ID 的表格。下面是两个输入框，全名和电子邮件。当我加载页面时，仅应启用学生 ID 输入框，并禁用其下方的两个输入。当我输入学生 ID 并且它有记录时，这是唯一一次启用全名和电子邮件的输入框。

当我使用 Angular 13 时，它能够对每个输入进行处理

[attr.disable]="!isStudentIdReal"

然而，我最近更新到 Angular 15，它就停止工作了。我能够找到一个解决方案：

studentName : [{value: '', disable: true}],
email : [{value: '', disable: true}]

这会禁用输入框，但是不会启用它们，因为我没有条件。

我正在使用type 的归档（with ）mat-form-field，input直到Angular 14 为止，有一个用于本机日期时间选择器的按钮。\n但自从我升级到 Angular 15 并进行了 Material MDC 迁移后，该按钮丢失了，并且可以\'找不到任何选项来恢复此日期时间选择器。mat-input"datetime-local"

我用谷歌搜索但什么也没找到。我想继续使用日期时间选择器

这是我的代码：

https://stackblitz.com/edit/angular-ivy-jzgzsq

<mat-form-field class="half-width" appearance="fill">\n  <mat-label>Donwtime Start</mat-label>\n  <input\n    matInput\n    placeholder="dd.MM.yyyy hh:mm"\n    formControlName="startDateInput"\n    type="datetime-local"\n    [value]="startDate | date : \'yyyy-MM-ddTHH:mm\'"\n    (change)="convertStartDate($event)"\n    required\n    tabindex="1"\n  />\n  <mat-error *ngIf="controlGroup.get(\'startDateInput\').invalid">\n    Bitte w\xc3\xa4hle ein Startdatum f\xc3\xbcr die Downtime aus\n  </mat-error>\n</mat-form-field>\n

\n角度 14

\nAngular 15 与 Material MDC 迁移