Can't get through third and final step of Angular standalone migration: Providers from the...

I've recently successfully migrated an application of mine to Angular 19 and PrimeNG 19. All I had set aside for doing later was migrating to the new, preferred use of standalone components.

The first two steps of that process, automated using ng g @angular/core:standalone:

• Convert all components, directives and pipes to standalone
• Remove unnecessary NgModule classes

...went smoothly. The running application after those two steps can be found at https://tzexplorer.org. The above Github link to my development branch has the code in that last successful state.

But my attempts to achieve the final step (Bootstrap the application using standalone APIs) are being thwarted by this run-time error:



My main.ts ends up looking like this:

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


...which is essentially just a matter of a bunch of imports being pulled out of my barely-otherwise-changed app.component.ts and moved into main.ts, where main.ts has had platformBrowserDynamic().bootstrapModule(AppModule) replaced with the new bootstrapApplication(AppComponent....

All the advice I've been able to find so far relates to tracking down redundant references to BrowserModule, BrowserAnimationsModule, provideAnimations, and provideAnimationsAsync. I have none of that happening in my code, at least in any obvious way.

My main suspect at this point is that some PrimeNG initialization is the source of the redundancy, but if that's the case, I don't know where or how it happens, or how I'd work around that.

I've tried commenting out providers one by one until I'm down to nothing, but the runtime error still remains. I've tried moving much of the complexity of the main.ts file and into a separate app.config.ts, but that didn't help either.

Any ideas anyone?

Continue reading...