Hello,
I want to create the following structure, in order to have a common library that I will update with ionic and other things that I always need to setup in an app (like translation-loading, custom json config loading, etc). I intend to publish the library to a custom repo in npm. (Although this is just for general information, on why I would do this).
(In the library, eg. @mycomp/wpabase
wpa.component.ts
wpa.module.ts
(In the “specific project of an app based on ionic, passing through the @mycomp/wpabase library”
app.module.ts (I would just import the things that I need for an specific project, shall I need to import something for the whole app).
app.component.ts (the regular app.component.ts that does nothing, except extending the wpa.component.ts. If anything, we can insert some specific code on app initialization, if the app requires so. But I want the regular splash things, etc, to go in the parent wpa.component.ts).
The thing is that I am having trouble extending the base component for the app. Basically what I want is to have the common logic code of app.component and app.module in a library. So I want to call that base component: wpa.component.ts and wpa.module.ts (and that goes in the library @company/wpa-base.
But when I try to do so and have, in my “lambda app code”, app.module.ts and app.components.ts (that extends wpa.component.ts), I get errors about circular dependencies.
`import {Injector} from ‘@angular/core’;
export class AppInjector {
private static injector: Injector;
static setInjector(injector: Injector) {
AppInjector.injector = injector;
}
static getInjector(): Injector {
return AppInjector.injector;
}
}
`
`import {Component} from ‘@angular/core’;
import {Platform} from ‘@ionic/angular’;
import {SplashScreen} from ‘@ionic-native/splash-screen/ngx’;
import {StatusBar} from ‘@ionic-native/status-bar/ngx’;
import {AppInjector} from ‘@mycomp/wpa-base’;
@component({
selector: ‘wpa-root’,
template: ‘’
})
export class WpaComponent {
private platform: Platform;
private splashScreen: SplashScreen;
private statusBar: StatusBar;
constructor() {
const injector = AppInjector.getInjector();
this.platform = injector.get(Platform);
this.splashScreen = injector.get(SplashScreen);
this.statusBar = injector.get(StatusBar);
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
console.log('Hello-> ');
});
}
}
`
`import {FormsModule} from ‘@angular/forms’;
import {MbscModule} from ‘@mobiscroll/angular’;
import {NgModule} from ‘@angular/core’;
import {BrowserModule} from ‘@angular/platform-browser’;
import {RouteReuseStrategy} from ‘@angular/router’;
import {IonicModule, IonicRouteStrategy} from ‘@ionic/angular’;
import {SplashScreen} from ‘@ionic-native/splash-screen/ngx’;
import {StatusBar} from ‘@ionic-native/status-bar/ngx’;
import {WpaComponent} from ‘./wpa.component’;
import {AppInjector} from ‘@mycomp/wpa-base’;
import {AppRoutingModule} from ‘src/app/app-routing.module’;
@NgModule({
declarations: [WpaComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule
],
providers: [
AppInjector,
StatusBar,
SplashScreen,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
]
})
export class WpaModule {
}
`
`import {FormsModule} from ‘@angular/forms’;
import {MbscModule} from ‘@mobiscroll/angular’;
import {NgModule} from ‘@angular/core’;
import {AppComponent} from ‘./app.component’;
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [
FormsModule,
MbscModule,
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
`
import {Component} from ‘@angular/core’;
import {WpaComponent} from ‘@todologic/wpa-base’;
@component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’
})
export class AppComponent extends WpaComponent {
constructor() {
super();
}
}
`
And the output is:
compiler.js:2427 Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies. This might be caused by using ‘barrel’ index.ts files.
at syntaxError (compiler.js:2427)
at compiler.js:18727
at Array.forEach ()
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:18712)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18431)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18261)
at compiler.js:18348
at Array.forEach ()
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18326)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:25715)
syntaxError @ compiler.js:2427
(anonymous) @ compiler.js:18727
push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata @ compiler.js:18712
push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:18431
push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary @ compiler.js:18261
(anonymous) @ compiler.js:18348
push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:18326
push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler. loadModules @ compiler.js:25715
push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler. compileModuleAndComponents @ compiler.js:25696
push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:25656
push…/node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_R3 @ core.js:16476
push…/node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:16659
./src/main.ts @ main.ts:12
webpack_require @ bootstrap:83
0 @ main.ts:14
webpack_require @ bootstrap:83
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
client:148 [WDS] Warnings while compiling.
warnings @ client:148
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1188
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client:154 Circular dependency detected:
src_wpa-base\index.ts -> src_wpa-base\modules\wpa.module.ts -> src_wpa-base\modules\wpa.component.ts -> src_wpa-base\index.ts
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1188
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client:154 Circular dependency detected:
src_wpa-base\modules\wpa.component.ts -> src_wpa-base\index.ts -> src_wpa-base\modules\wpa.module.ts -> src_wpa-base\modules\wpa.component.ts
warnings @ client:154
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
wrapFn @ zone.js:1188
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client:154 Circular dependency detected:
src_wpa-base\modules\wpa.module.ts -> src_wpa-base\modules\wpa.component.ts -> src_wpa-base\index.ts -> src_wpa-base\modules\wpa.module.ts
Any help is welcome
Thanks!