kshetline's questions

Estou tentando migrar uma biblioteca antiga de componentes Angular para componentes autônomos.

Vários componentes têm muito em comum, então eu uso uma superclasse para todo o comportamento comum. Pelo menos como eu estava acostumado a fazer as coisas, a superclasse de a @Componentnão deveria ser another @Component, mas sim a @Directive.

O início da superclasse se parece com isso:

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

E um dos componentes da subclasse começa assim:

// @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 {
// ...

O problema agora, ao portar isso para o Angular 19 e tentar usar um design independente, é que o HTML para a diretiva contém alguns recursos do CommonModule como [ngClass]e [ngStyle]. (Também há usos de *ngIfe semelhantes, mas posso me livrar deles usando @if, @for, etc.)

Uma recomendação não funcionalCommonModule do Google AI para usar recursos em uma diretiva se parece com isto:

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;
    }

Se eu não puder usar importsuma diretiva, como resolvo o problema da linha vermelha ondulada abaixo?

Recentemente, migrei com sucesso um aplicativo meu para o Angular 19 e o PrimeNG 19. Tudo o que eu tinha planejado fazer depois era migrar para o novo uso preferencial de componentes autônomos.

As duas primeiras etapas desse processo são automatizadas usando ng g @angular/core:standalone:

• Converta todos os componentes, diretivas e pipes para autônomos
• Remova classes NgModule desnecessárias

...correu bem. O aplicativo em execução após essas duas etapas pode ser encontrado em https://tzexplorer.org . O link do Github acima para meu branch de desenvolvimento tem o código naquele último estado bem-sucedido.

Mas minhas tentativas de atingir a etapa final (inicializar o aplicativo usando APIs autônomas) estão sendo frustradas por este erro de tempo de execução:

O meu main.tsfica assim:

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));

...que é essencialmente apenas uma questão de um monte de importações sendo retiradas do meu quase sem alterações app.component.tse movidas para o main.ts, onde main.tsforam platformBrowserDynamic().bootstrapModule(AppModule)substituídas pelo novo bootstrapApplication(AppComponent....

Todos os conselhos que consegui encontrar até agora estão relacionados a rastrear referências redundantes para BrowserModule, BrowserAnimationsModule, provideAnimationse provideAnimationsAsync. Não tenho nada disso acontecendo no meu código, pelo menos de forma óbvia.

Minha principal suspeita neste momento é que alguma inicialização do PrimeNG seja a fonte da redundância, mas se for esse o caso, não sei onde ou como isso acontece, ou como contornar isso.

Tentei comentar os provedores um por um até não sobrar nada, mas o erro de tempo de execução ainda permanece. Tentei mover boa parte da complexidade do main.tsarquivo para um app.config.ts, mas isso também não ajudou.

Alguém tem alguma ideia?