Could anyone double-check my package.json?

I ran npm install -g typescript@2.3.4 to get rid of the unmet peer dep. error. Still getting the same errors though.

Now I get:

λ npm list -g --depth=0
C:\Users\anon\AppData\Roaming\npm
+-- cordova@7.0.1
+-- eslint@4.1.1
+-- hpm-cli@2.0.1
+-- hyper-fileio@1.1.0
+-- hyper-search@0.0.5
+-- hyper-startup@0.2.0
+-- hyper-statusline@1.6.9
+-- hyper-tabs@0.0.1
+-- hyperlinks@0.5.0
+-- hyperterm-1password@2.0.1
+-- ionic@3.5.0
+-- nodemon@1.11.0
+-- reflect-metadata@0.1.10
+-- tslint@5.5.0
+-- typescript@2.3.4
+-- windows-build-tools@1.3.2
`-- yarn@0.24.5

Only npm, cordova and ionic have to be there for Ionic I think.

Okay so just to be 100% safe, I got rid of all global packages.

npm list now gives:

C:\Users\anon\Desktop\Workshop
λ npm list -g --depth=0
C:\Users\anon\AppData\Roaming\npm
`-- (empty)

Then I reinstalled only cordova and ionic via npm install -g cordova ionic so now npm list gives:

λ npm list -g --depth=0
C:\Users\anon\Desktop\Workshop
λ npm install -g ionic cordova
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
C:\Users\anon\AppData\Roaming\npm\ionic -> C:\Users\anon\AppData\Roaming\npm\node_modules\ionic\bin\ionic
C:\Users\anon\AppData\Roaming\npm\cordova -> C:\Users\anon\AppData\Roaming\npm\node_modules\cordova\bin\cordova
+ ionic@3.5.0
+ cordova@7.0.1
added 733 packages in 76.587s

C:\Users\anon\Desktop\Workshop
λ npm list -g --depth=0
C:\Users\anon\AppData\Roaming\npm
+-- cordova@7.0.1
`-- ionic@3.5.0

So now when I run ionic serve:

λ ionic serve
[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address 0.0.0.0 - Ctrl+C
       to cancel
[08:52:17]  watch started ...
[08:52:17]  build dev started ...
[08:52:17]  clean started ...
[08:52:17]  clean finished in less than 1 ms
[08:52:17]  copy started ...
[08:52:17]  transpile started ...
[08:52:22]  typescript: ...kshop/podcast-player-frontend/node_modules/ionic-angular/components/nav/nav.d.ts, line: 47
            Class 'Nav' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are
            incompatible. Type '(opts: NavOptions) => Promise<any>' is not assignable to type '(opts: NavOptions) =>
            Promise<never>'. Type 'Promise<any>' is not assignable to type 'Promise<never>'. Type 'any' is not
            assignable to type 'never'.

      L47:  export declare class Nav extends NavControllerBase implements AfterViewInit, RootNode, INav {
      L48:      private _root;

[08:52:22]  typescript: ...shop/podcast-player-frontend/node_modules/ionic-angular/components/tabs/tab.d.ts, line: 121

            Class 'Tab' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are
            incompatible. Type '(opts: NavOptions) => Promise<any>' is not assignable to type '(opts: NavOptions) =>
            Promise<never>'. Type 'Promise<any>' is not assignable to type 'Promise<never>'.

     L121:  export declare class Tab extends NavControllerBase implements ITab {
     L122:      private _cd;

[08:52:22]  typescript: ...ers/anon/Desktop/Workshop/podcast-player-frontend/node_modules/rxjs/Subject.d.ts, line: 16
            Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are
            incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator:
            Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T'
            is not assignable to type 'R'.

      L16:  export declare class Subject<T> extends Observable<T> implements ISubscription {
      L17:      observers: Observer<T>[];

[08:52:22]  typescript: ...p/podcast-player-frontend/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts, line: 24
            Class 'WebSocketSubject<T>' incorrectly extends base class 'AnonymousSubject<T>'. Types of property 'lift'

            are incompatible. Type '<R>(operator: Operator<T, R>) => WebSocketSubject<R>' is not assignable to type
            '<R>(operator: Operator<T, R>) => Observable<T>'. Type 'WebSocketSubject<R>' is not assignable to type
            'Observable<T>'. Types of property 'operator' are incompatible. Type 'Operator<any, R>' is not assignable to
            type 'Operator<any, T>'. Type 'R' is not assignable to type 'T'.

      L24:  export declare class WebSocketSubject<T> extends AnonymousSubject<T> {
      L25:      url: string;

[08:52:22]  dev server running: http://localhost:8100/

[INFO] Development server running
       Local: http://localhost:8100

[08:52:22]  copy finished in 5.29 s
[08:52:22]  watch ready in 5.47 s

I believe these are the same errors. I really don’t get these errors, any ideas? They’re errors within the framework packages and I really don’t have any idea how I should resolve this.

I’ll try to use another machine to test out, I’m really out of ideas. Thanks

Post your npm list please.

(I think you might have a too new typescript installed)

1 Like

Here’s the whole thing for λ npm list > output.log:

Yep, please check your package.json again.

Current Ionic only works with typescript 2.3.4: https://github.com/ionic-team/ionic2-app-base/blob/9b39d206f2bc894931116161519a2eed2284fadf/package.json#L35

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!

Ok now I can get the project to run which is perfect. The issue triggering the cyclic errors I’ve been talking about seems to be the way I inject AudioProvider (ionic-audio’s class) in my custom AudioService class.

I have everything referenced in my app.modules.ts file 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,
    PreferencesService,
    SubscriptionService,
    PreferencesService,
    AudioService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Then I need to use AudioProvider in AudioService so I:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AudioProvider } from 'ionic-audio';

@Injectable()
export class AudioService {
  constructor(
    public http: Http,
    public audioProvider: AudioProvider
  ) {
    console.log('Hello AudioService Provider');
// ...

As soon as I comment the public audioProvider: AudioProvider I stop getting errors and the app runs.
Otherwise I get these errors:

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

So the issue is definitively due to how I inject AudioProvider. I have it referenced only here:

  • app.modules.ts (as seen above)
  • AudioService (injecting it like seen above)

I refer/inject AudioService in:

  • app.component.ts

Could this be due to the fact that I refer AudioService in app.component and also import ionic-audio’s AudioProvider in app.modules?

Damn, missed this one.

1 Like

Figured out most of the rest of the issues. Now using events/observer to prevent cyclic imports. I’m almost done fixing everything. Just wanted to say a huge thanks for the help and the patience! I greatly appreciate it!

Just to summarize if anyone reads this in the future, in the end my package.json was very very messed up and mostly typescript needed the right version for Ionic.

3 Likes