Início / coding / Perguntas / 79491028
Accepted
kshetline
Asked: 2025-03-07 09:08:46 +0800 CST

Não é possível concluir a terceira e última etapa da migração autônoma do Angular: os provedores do BrowserModule já foram carregados

  • 772

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:

insira a descrição da imagem aqui

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?

angular

1 respostas

  1. Best Answer

    ATUALIZAR:

    O problema surge devido ao uso da @tubular/ng-widgetsversão Angular 14, o array de provedores está tendo alguns conflitos com o Angular 19, então você deve atualizar o pacote e tornar os componentes autônomos, além de se livrar do módulo se estiver convertendo os componentes para autônomos.

    @Component({
  selector: 'tze-clocks',
  templateUrl: './clocks.component.html',
  styleUrls: ['./clocks.component.scss'],
  imports: [
    ...
    TubularNgWidgetsModule, // <- problem here
    ...
  ]
})

    O problema desaparecerá se você TubularNgWidgetsModuleremover ClocksComponenteCodeComponent

    Você não precisa de poucos módulos, então remova BrowserModule(cuidado por bootstrapApplication), BrowserAnimationsModule, AppRoutingModule.

    Em vez disso, use provideRoutere forneça sua matriz de rotas.

    Já que você está usando o primeng 19, providePrimeNGé o novo método para usar um tema. Use este stackblitz para referência de código.

    As importações dentro do importProvidersFrompertencem à matriz de importações do componente autônomo, se forem usadas.

    Após as migrações, você não precisará mais de nenhum módulo, seu aplicativo deverá funcionar da mesma forma, mas com o conceito autônomo como base.

    bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(TubularNgWidgetsModule),
    provideRouter(routes), // <- routes array goes here!,     provideHttpClient(withInterceptorsFromDi(), withJsonpSupport()),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: { preset: Aura },
    }),
  ]
}).catch(err => console.error(err));
    • 1

relate perguntas