Ok so now I got a vendor.js file generated which is amazing because I haven’t had any before yet. I get cyclic errors which is the right direction I guess! Making progress thanks to your patience! I had a ^ before the version number which made it download 2.4.1 instead of 2.3.4.
A fellow member in this post told me to add my providers to app.modules.ts as such:
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NativeStorage } from '@ionic-native/native-storage';
import { IonicAudioModule } from 'ionic-audio';
import { MyApp } from './app.component';
import { SignInPage } from '../pages/sign-in/sign-in';
import { PodcastListPage } from '../pages/podcast-list/podcast-list';
import { EpisodeListPage } from '../pages/episode-list/episode-list';
import { ExplorePage } from '../pages/explore/explore';
import { AudioService } from '../providers/audio-service';
import { PodcastService } from '../providers/podcast-service';
import { UserService } from '../providers/user-service';
import { SubscriptionService } from '../providers/subscription-service';
import { PreferencesService } from '../providers/preferences-service';
@NgModule({
declarations: [
MyApp,
SignInPage,
PodcastListPage,
EpisodeListPage,
ExplorePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicAudioModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
SignInPage,
PodcastListPage,
EpisodeListPage,
ExplorePage
],
providers: [
StatusBar,
SplashScreen,
NativeStorage,
UserService, // OR HERE? I read this in this thread
PreferencesService,
SubscriptionService,
PreferencesService,
AudioService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
My question now is: should I add them in app.modules.ts like above or in app.components.ts like below:
@Component({
templateUrl: 'app.html',
providers: [ // HERE? (I read this in the docs)
AudioService,
PodcastService,
UserService,
PreferencesService,
SubscriptionService
]
})
export class MyApp {
// ...
Because right now if I add them via app.modules.ts I get cyclic errors otherwise if I add them via app.components.ts I get the same error ERROR Error: No provider for UserService! as before. (back to square one).
So I guess the way to go is to put them in app.modules.ts? So I’d be left with the cyclic errors to figure out?
Here’s the cyclic errors I’m talking about: (I only get them in the browser’s console, not in CLI)
polyfills.js:3 Unhandled Promise rejection: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1 ; Zone: <root> ; Task: Promise.then ; Value: Error: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
at NgModuleProviderAnalyzer.parse (compiler.es5.js:10921)
at NgModuleCompiler.compile (compiler.es5.js:17394)
at JitCompiler._compileModule (compiler.es5.js:25652)
at createResult (compiler.es5.js:25592)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3) Error: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
at NgModuleProviderAnalyzer.parse (http://localhost:8100/build/vendor.js:94321:19)
at NgModuleCompiler.compile (http://localhost:8100/build/vendor.js:100794:24)
at JitCompiler._compileModule (http://localhost:8100/build/vendor.js:109052:73)
at createResult (http://localhost:8100/build/vendor.js:108992:26)
at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
at r.run (http://localhost:8100/build/polyfills.js:3:4140)
at http://localhost:8100/build/polyfills.js:3:13731
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
at r.runTask (http://localhost:8100/build/polyfills.js:3:4831)
at o (http://localhost:8100/build/polyfills.js:3:1891)
n.onUnhandledError @ polyfills.js:3
r @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Error: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
Error: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
at NgModuleProviderAnalyzer.parse (compiler.es5.js:10921)
at NgModuleCompiler.compile (compiler.es5.js:17394)
at JitCompiler._compileModule (compiler.es5.js:25652)
at createResult (compiler.es5.js:25592)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at NgModuleProviderAnalyzer.parse (compiler.es5.js:10921)
at NgModuleCompiler.compile (compiler.es5.js:17394)
at JitCompiler._compileModule (compiler.es5.js:25652)
at createResult (compiler.es5.js:25592)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at <anonymous>
n.onUnhandledError @ polyfills.js:3
r @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
I feel I’m close to the solution, just need to figure out that AudioProvider cyclic thing. Shouldn’t be too hard. I’ll update if I figure it out. Thanks a lot!