主页 / user-7361479

kshetline's questions

Martin Hope
kshetline
Asked: 2025-03-09 23:38:07 +0800 CST
  • 6

我正在尝试将旧的 Angular 组件库迁移为独立组件。

许多组件有很多共同点，因此我使用超类来表示所有常见行为。至少按照我的习惯， a 的超类@Component不应该是另一个@Component，而应该是@Directive。

超类的开始如下所示：

// @dynamic
@Directive()
export abstract class DigitSequenceEditorDirective<T> implements
    AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, Validator {
// ...

其中一个子类组件的开头如下：

// @dynamic
@Component({
  selector: 'tbw-time-editor',
  animations: [BACKGROUND_ANIMATIONS],
  templateUrl: '../digit-sequence-editor/digit-sequence-editor.directive.html',
  styleUrls: ['../digit-sequence-editor/digit-sequence-editor.directive.scss', './time-editor.component.scss'],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeEditorComponent), multi: true },
              { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimeEditorComponent), multi: true }]
})
export class TimeEditorComponent extends DigitSequenceEditorDirective<number> implements OnInit {
// ...

现在的问题是，将其移植到 Angular 19 并尝试使用独立设计，指令的 HTML 包含一些 CommonModule 功能，如[ngClass]和[ngStyle]。（也有和之类的用法，但我可以使用、等*ngIf摆脱它们。）@if@for

Google AI 对在指令中使用功能的非功能性建议CommonModule如下：

import { Directive, Input } from '@angular/core';
    import { NgIf } from '@angular/common';
    
    @Directive({
      selector: '[appMyStandalone]',
      standalone: true,
      imports: [NgIf] // Can't be done! No `imports` field! (I'd have NgClass and NgStyle here if this worked)
    })
    export class MyStandaloneDirective {
      @Input() appMyStandalone: boolean = false;
    }

如果我不能使用imports指令，我该如何解决下面的红色波浪线问题？

在此处输入图片描述

html
Martin Hope
kshetline
Asked: 2025-03-07 09:08:46 +0800 CST
  • 7

我最近成功地将我的一个应用程序迁移到了 Angular 19 和 PrimeNG 19。我以后要做的就是迁移到新的、首选的独立组件用法。

该过程的前两个步骤使用以下方式自动完成ng g @angular/core:standalone：

  • 将所有组件、指令和管道转换为独立
  • 删除不必要的 NgModule 类

...一切顺利。 经过这两个步骤后，可以在https://tzexplorer.org找到正在运行的应用程序。 上面的 Github 链接指向我的开发分支，其中包含上次成功状态下的代码。

但是我尝试完成最后一步（使用独立 API 引导应用程序）却因这个运行时错误而受阻：

在此处输入图片描述

我的main.ts最终结果看起来像这样：

import { enableProdMode, importProvidersFrom } from '@angular/core';

import { environment } from './environments/environment';
import { initTimezoneLarge } from '@tubular/time';
import { themeProvider } from './app/mytheme';
import { AppService } from './app/app.service';
import { HttpTimePoller } from './app/http-time-poller/http-time-poller';
import { TzExplorerApi } from './app/api/api';
import { provideHttpClient, withInterceptorsFromDi, withJsonpSupport } from '@angular/common/http';
import { AppRoutingModule } from './app/app-routing.module';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DialogModule } from 'primeng/dialog';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { RadioButtonModule } from 'primeng/radiobutton';
import { RippleModule } from 'primeng/ripple';
import { SelectModule } from 'primeng/select';
import { TabsModule } from 'primeng/tabs';
import { TubularNgWidgetsModule } from '@tubular/ng-widgets';
import { AppComponent } from './app/app.component';

if (environment.production) {
  enableProdMode();
}

initTimezoneLarge();

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AppRoutingModule, AutoCompleteModule, BrowserModule, ButtonModule, CheckboxModule,
      DialogModule, FormsModule, InputTextModule, RadioButtonModule, RippleModule, SelectModule, TabsModule,
      TubularNgWidgetsModule),
    themeProvider,
    AppService,
    HttpTimePoller,
    TzExplorerApi,
    provideHttpClient(withInterceptorsFromDi(), withJsonpSupport()),
    provideAnimations()
  ]
})
  .catch(err => console.error(err));

...这本质上只是将一堆进口货从我的几乎没有改变的货中取出app.component.ts并移入其中main.ts，然后用新的货main.ts替换。platformBrowserDynamic().bootstrapModule(AppModule)bootstrapApplication(AppComponent...

到目前为止，我能找到的所有建议都与追踪对BrowserModule、BrowserAnimationsModule、provideAnimations和 的冗余引用有关provideAnimationsAsync。在我的代码中，至少没有以任何明显的方式发生这种情况。

我现在主要怀疑某些 PrimeNG 初始化是冗余的根源，但如果是这样的话，我不知道它在哪里发生或如何发生，或者我该如何解决这个问题。

我尝试逐个注释掉提供程序，直到没有提供程序，但运行时错误仍然存​​在。我尝试将文件的大部分复杂性移到main.ts单独的文件中app.config.ts，但这也无济于事。

有人有什么想法吗？

angular