主页 / coding / 问题 / 79491028
Accepted
kshetline
Asked: 2025-03-07 09:08:46 +0800 CST

无法完成 Angular 独立迁移的第三步和最后一步：来自 BrowserModule 的提供程序已加载

  • 772

我最近成功地将我的一个应用程序迁移到了 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

1 个回答

  1. Best Answer

    更新：

    该问题是由于@tubular/ng-widgets使用了 angular 14 版本而引起的，提供程序数组与 angular 19 存在一些冲突，因此您应该升级软件包并使组件独立，如果要将组件转换为独立组件，也请删除该模块。

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

    如果你TubularNgWidgetsModule移除ClocksComponent并CodeComponent

    您不需要几个模块，因此删除（由）、、BrowserModule处理。bootstrapApplicationBrowserAnimationsModuleAppRoutingModule

    而是使用provideRouter并提供您的路线数组。

    由于您使用的是 primeng 19，providePrimeNG这是使用主题的新方法。使用此stackblitz作为代码参考。

    importProvidersFrom如果使用的话，里面的导入属于独立组件的导入数组。

    迁移后，您将不再需要任何模块，您的应用程序应该以相同的方式工作，但以独立为核心概念。

    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

相关问题