Providers from the BrowserModule have already been loaded
Environment
| Product | Progress® Telerik® Reporting |
| Report Viewer | Native Angular Report Viewer |
Description
I have integrated the Native Angular Report Viewer in the project and it builds successfully, however, upon loading the page with the viewer it remains blank and there is an error in the browser's console.
Steps to Reproduce
The issue reproduces when the module of the Native Angular Report Viewer - ReportingAngularViewerModule, is not loaded in the root module of the Angular application but is instead imported someplace else.
Error Message
Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
at new BrowserModule (platform-browser.mjs:1128:19)
at Object.BrowserModule_Factory [as useFactory] (platform-browser.mjs:1151:19)
at Object.factory (core.mjs:8102:38)
at R3Injector.hydrate (core.mjs:8015:35)
at R3Injector.get (core.mjs:7903:33)
at injectInjectorOnly (core.mjs:618:33)
at ɵɵinject (core.mjs:622:60)
at useValue (core.mjs:7697:65)
at R3Injector.resolveInjectorInitializers (core.mjs:7952:17)
at new NgModuleRef (core.mjs:19821:26)
at resolvePromise (zone.js:1214:31)
at resolvePromise (zone.js:1168:17)
at zone.js:1281:17
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:23896:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23896:36)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Object.onInvokeTask (core.mjs:24197:33)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Zone.runTask (zone.js:178:47)
handleError @ core.mjs:8400
Promise.then (async)
nativeScheduleMicroTask @ zone.js:564
scheduleMicroTask @ zone.js:575
scheduleTask @ zone.js:399
onScheduleTask @ core.mjs:23891
scheduleTask @ zone.js:389
onScheduleTask @ zone.js:286
scheduleTask @ zone.js:389
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1268
resolvePromise @ zone.js:1205
(anonymous) @ zone.js:1121
(anonymous) @ zone.js:1137
webpackJsonpCallback @ jsonp chunk loading:77
(anonymous) @ src_app_reports_reports_module_ts.js:1
Suggested Workarounds
The only workaround, currently available, is to Import the ReportingAngularViewerModule in the root module of the Angular application which by convention is the AppModule class defined in app.module.ts:
import { ReportingAngularViewerModule } from '@progress/telerik-angular-native-report-viewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReportingAngularViewerModule
],
providers: [],
bootstrap: [AppComponent]
})