Could anyone double-check my package.json?


#1

I’m having very weird error messages concerning providers, dependency injection, and other random messages.

My code used to work before I changed something on my dev machine and now I get all these errors. It happens since I upgraded to Ionic 3.x. Could anyone verify that my package.json is correct?

{
    "name": "podcast-player",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "^4.1.3",
        "@angular/compiler": "^4.2.6",
        "@angular/compiler-cli": "^4.2.6",
        "@angular/core": "^4.2.6",
        "@angular/forms": "^4.1.3",
        "@angular/http": "^4.1.3",
        "@angular/platform-browser": "^4.1.3",
        "@angular/platform-browser-dynamic": "^4.1.3",
        "@angular/tsc-wrapped": "^4.2.6",
        "@ionic-native/core": "^3.12.1",
        "@ionic-native/native-storage": "^3.14.0",
        "@ionic-native/splash-screen": "^3.14.0",
        "@ionic-native/status-bar": "^3.12.1",
        "@ionic/storage": "^2.0.1",
        "bcrypt-nodejs": "0.0.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.1.1",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-nativestorage": "^2.2.2",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "^3.5.0",
        "ionic-audio": "^3.1.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "^3.0.0",
        "rxjs": "^5.4.2",
        "sw-toolbox": "^3.6.0",
        "zone.js": "^0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^1.3.12",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [
        "ios",
        {
            "platform": "ios",
            "version": "",
            "locator": "ios"
        }
    ],
    "description": "podcast-player: An Ionic project",
    "cordova": {
        "platforms": [
            "browser",
            "ios"
        ],
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-nativestorage": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        }
    }
}

I tried to rollback my project but found any working state, meaning maybe that my local environment is the problem. Here’s an example of one error I’m having (please note no syntax or any kind of errors is present in my providers)

MyApp_Host.html:1 ERROR Error: No provider for UserService!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.throwOrNull (core.es5.js:2649)
at ReflectiveInjector
.getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector
.getByKey (core.es5.js:2620)
at ReflectiveInjector
.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9473)
at callFactory (core.es5.js:9556)
at createProviderInstance$1 (core.es5.js:9487)
at resolveNgModuleDep (core.es5.js:9469)
View_MyApp_Host_0 @ MyApp_Host.html:1
proxyClass @ compiler.es5.js:14963
DebugContext
.logError @ core.es5.js:13396
ErrorHandler.handleError @ core.es5.js:1080
IonicErrorHandler.handleError @ ionic-error-handler.js:63
ApplicationRef
.tick @ core.es5.js:4812
ApplicationRef_.loadComponent @ core.es5.js:4781
ApplicationRef
.bootstrap @ core.es5.js:4769
(anonymous) @ core.es5.js:4545
PlatformRef_.moduleDoBootstrap @ core.es5.js:4545
(anonymous) @ core.es5.js:4507
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:3890
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:3881
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
MyApp_Host.html:1 ERROR CONTEXT DebugContext
{view: Object, nodeIndex: 5, nodeDef: Object, elDef: Object, elView: Object}
View_MyApp_Host_0 @ MyApp_Host.html:1
proxyClass @ compiler.es5.js:14963
DebugContext_.logError @ core.es5.js:13396
ErrorHandler.handleError @ core.es5.js:1085
IonicErrorHandler.handleError @ ionic-error-handler.js:63
ApplicationRef_.tick @ core.es5.js:4812
ApplicationRef_.loadComponent @ core.es5.js:4781
ApplicationRef
.bootstrap @ core.es5.js:4769
(anonymous) @ core.es5.js:4545
PlatformRef_._moduleDoBootstrap @ core.es5.js:4545
(anonymous) @ core.es5.js:4507
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:3890
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:3881
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
core.es5.js:2925

Is there any package version you see wrong? I’ve been looking at this for so long, I’m starting to wonder. Any help would be greatly appreciated. Thanks!

Here’s some more code just in case it might help.

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';

@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,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { Platform, Events, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Observable } from 'rxjs/Rx';

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';

import { PodcastListPage } from '../pages/podcast-list/podcast-list';
import { SignInPage } from '../pages/sign-in/sign-in';

@Component({
  templateUrl: 'app.html',
  providers: [
    AudioService,
    PodcastService,
    UserService,
    PreferencesService,
    SubscriptionService
  ]
})

export class MyApp {
  rootPage: any = SignInPage;
  preferences = null;
  displayPlayer = false;
  constructor(
    platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    public events: Events,
    public loadingCtrl: LoadingController,
    public userService: UserService,
    public preferencesService: PreferencesService,
    public audioService: AudioService
  ) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      console.log('App Component Platform Ready!');
      // listening for events
      events.subscribe('user:login', () => {
        this.userLoggedIn();
      });
      events.subscribe('user:logout', () => {
        this.userLoggedOut();
      });
    });
  }
// ...

#2

Hi, @tbergeron

Could you try UserService inject in providers of app.module.ts file.

Thanks


#3

It is, in the code example I provided. It doesn’t do any errors if I inject UserService anywhere else in the project.

  // excerpt of first code example from original post:
  constructor(
    platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    public events: Events,
    public loadingCtrl: LoadingController,
    public userService: UserService, // here
    public preferencesService: PreferencesService,
    public audioService: AudioService
  ) {

It seems to happen whenever I inject AudioProvider which is an Ionic plugin/component I installed off NPM. Doesn’t seems to be the package’s fault exactly but commenting the inject line “resolves” the issue.

I’m referencing ionic-audio in my AudioProvider like this:

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

@Injectable()
export class AudioService {
  currentTrack: any;
  currentTrackNumber: number = 0;
  currentEpisodeId: any;
  isPlaying: Boolean = false;

  constructor(
    public http: Http,
    public userService: UserService,
    // WHENEVER I UNCOMMENT THIS LINE:
    // I get the UserService! Error but there’s no relation between both at all
    // public audioProvider: AudioProvider
  ) {
    console.log('Hello AudioService Provider');
    this.currentTrack = {
      src: 'https://archive.org/download/swrembel2010-03-07.tlm170.flac16/swrembel2010-03-07s1t05.mp3',
      artist: '',
      title: 'Select a podcast & press listen to start',
      art: 'assets/img/Stephane.jpg',
      preload: 'metadata'
    };
  }
// ...

This is the only clue that points into “what’s wrong with my setup?” since ionic-audio’s dev seems to have everything working on his side.


#4

Oops misread app.modules for app.component.
Will try this out.


#5

Didn’t know that I had to insert them in app modules providers? After having inserted all my services in the providers array like this:

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,
    AudioService,
    PodcastService,
    UserService,
    SubscriptionService,
    PreferencesService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Now I get this error:

compiler.es5.js:11676 Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! AudioProvider ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
at NgModuleProviderAnalyzer.parse (compiler.es5.js:11676)
at NgModuleCompiler.compile (compiler.es5.js:18489)
at JitCompiler._compileModule (compiler.es5.js:26715)
at compiler.es5.js:26660
at Object.then (compiler.es5.js:1679)
at JitCompiler.compileModuleAndComponents (compiler.es5.js:26658)
at JitCompiler.compileModuleAsync (compiler.es5.js:26587)
at PlatformRef
.bootstrapModuleWithZone (core.es5.js:4535)
at PlatformRef
.bootstrapModule (core.es5.js:4521)
at Object. (main.ts:5)

I must have done something wrong with my providers but I still don’t understand how they should be properly configured. Should they be in app.component for general use over the project? Or only injected in the needed component? Or right in app modules? or both?

Thanks for the help!


#6

Hi, @tbergeron
Could You try

If you use global version, you can try:

npm uninstall -g typescript
then
npm install -g typescript@2.1.5

Thanks


#7

Same thing happen with 2.1.5.
Without UserService in app.module I still get the same provider error.
If I add it to app.module I still get the same cyclic error.
When adding UserService in app module, it asks me to add my other providers (PreferencesService, AudioService, etc) but as soon as I add AudioService (which uses ionic-audio) I get the cyclic error.

app component requires ionic-audio
app modules requires ionic-audio
AudioService requires ionic-audio

So it seems to cause some infinite dep loop.

Here’s how both looks at this moment:

app.modules:

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 {}

app components

import { Component } from '@angular/core';
import { Platform, Events, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Observable } from 'rxjs/Rx';

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';

import { PodcastListPage } from '../pages/podcast-list/podcast-list';
import { SignInPage } from '../pages/sign-in/sign-in';

@Component({
  templateUrl: 'app.html',
  providers: [
    // AudioService,
    // PodcastService,
    // UserService,
    // PreferencesService,
    // SubscriptionService
  ]
})

export class MyApp {
  rootPage: any = SignInPage;
  preferences = null;
  displayPlayer = false;

  constructor(
    platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    public events: Events,
    public loadingCtrl: LoadingController,
    public userService: UserService,
    public preferencesService: PreferencesService,
    public audioService: AudioService
  ) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      console.log('App Component Platform Ready!');
      // listening for events
      events.subscribe('user:login', () => {
        this.userLoggedIn();
      });
      events.subscribe('user:logout', () => {
        this.userLoggedOut();
      });
    });
  }
// ...

audioservice

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

@Injectable()
export class AudioService {
  currentTrack: any;
  currentTrackNumber: number = 0;
  currentEpisodeId: any;
  isPlaying: Boolean = false;

  constructor(
    public http: Http,
    public userService: UserService,
    public audioProvider: AudioProvider
  ) {
    console.log('Hello AudioService Provider');
    // todo: crash if not set?
    this.currentTrack = {
      src: 'https://archive.org/download/swrembel2010-03-07.tlm170.flac16/swrembel2010-03-07s1t05.mp3',
      artist: '',
      title: 'Select a podcast & press listen to start',
      art: 'assets/img/Stephane.jpg',
      preload: 'metadata'
    };
  }
// ...

Thanks a lot for taking the time to help me out, if we can find what’s blocking us on that issue I’d be immensely grateful :blush:


#8

OK now something weird is happening. With the same code I pasted earlier and this package.json:

{
    "name": "podcast-player",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "^4.1.3",
        "@angular/compiler": "^4.2.6",
        "@angular/compiler-cli": "^4.2.6",
        "@angular/core": "^4.2.6",
        "@angular/forms": "^4.1.3",
        "@angular/http": "^4.1.3",
        "@angular/platform-browser": "^4.1.3",
        "@angular/platform-browser-dynamic": "^4.1.3",
        "@angular/tsc-wrapped": "^4.2.6",
        "@ionic-native/core": "^3.12.1",
        "@ionic-native/native-storage": "^3.14.0",
        "@ionic-native/splash-screen": "^3.14.0",
        "@ionic-native/status-bar": "^3.12.1",
        "@ionic/storage": "^2.0.1",
        "bcrypt-nodejs": "0.0.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.1.1",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-nativestorage": "^2.2.2",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "^3.5.0",
        "ionic-audio": "^3.1.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "^3.0.0",
        "rxjs": "^5.4.2",
        "sw-toolbox": "^3.6.0",
        "zone.js": "^0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.0",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "typescript": "^2.1.5"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [
        "ios",
        {
            "platform": "ios",
            "version": "",
            "locator": "ios"
        }
    ],
    "description": "podcast-player: An Ionic project",
    "cordova": {
        "platforms": [
            "browser",
            "ios"
        ],
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-nativestorage": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        }
    }
}

I now get these errors:

Runtime Error
Unexpected token <
Stack
SyntaxError: Unexpected token <
[09:28:10]  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;

[09:28:10]  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;

I really don’t understand what’s happening here :0/


#9

Still bashing my head on that one :rage:


#10

These should all be on identical version, see state of package.json after ionic start blank blank to which one. Also check if all packages are needed at all.


#11

It made me install a newer version of CLI .

λ ionic start blank blank
? The Ionic CLI has an update available (3.4.0 => 3.5.0)! Would you like to install it? Yes
> npm install -g ionic@latest
✔ Running command - done!
[OK] Upgraded Ionic CLI to 3.5.0! 🎉
Please re-run your command.
Note: You can downgrade to your old version by running: npm install -g ionic@3.4.0

Then I deployed the blank project:

λ ionic start blank blank
√ Creating directory .\blank - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template blank (https://github.com/ionic-team/ionic2-starter-blank/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
> git init
√ Running command - done!
> git add -A
√ Running command - done!
> git commit -m "Initial commit" --no-gpg-sign
√ Running command - done!

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

It seems to be using Ionic 2. Is it still okay if I compare that package.json? Otherwise what would I need to do to deploy an Ionic 3 blank project?

Thanks a lot for the help!


#12

Versions seems to match so I tried with that Ionic2 blank project I pasted above.

What you said about the version number matching makes lot of sense and shows how much my project was misconfigured lol

But now I get this error storm I pasted below. It’s different errors so hopefully I can figure something out of them but still there’s a lot of randomness in these. Any ideas? Thanks a lot once again!

Error
Close
Typescript Error
Class ‘Nav’ incorrectly extends base class ‘NavControllerBase’. Types of property ‘goToRoot’ are incompatible. Type ‘(opts: NavOptions) => Promise’ is not assignable to type ‘(opts: NavOptions) => Promise’. Type ‘Promise’ is not assignable to type ‘Promise’. Type ‘any’ is not assignable to type ‘never’.
…kshop/podcast-player-frontend/node_modules/ionic-angular/components/nav/nav.d.ts
*/
export declare class Nav extends NavControllerBase implements AfterViewInit, RootNode, INav {
private _root;
Typescript Error
Class ‘Tab’ incorrectly extends base class ‘NavControllerBase’. Types of property ‘goToRoot’ are incompatible. Type ‘(opts: NavOptions) => Promise’ is not assignable to type ‘(opts: NavOptions) => Promise’. Type ‘Promise’ is not assignable to type ‘Promise’.
…shop/podcast-player-frontend/node_modules/ionic-angular/components/tabs/tab.d.ts
*/
export declare class Tab extends NavControllerBase implements ITab {
private _cd;
Typescript Error
Class ‘Subject’ incorrectly extends base class ‘Observable’. Types of property ‘lift’ are incompatible. Type ‘(operator: Operator<T, R>) => Observable’ is not assignable to type ‘(operator: Operator<T, R>) => Observable’. Type ‘Observable’ is not assignable to type ‘Observable’. Type ‘T’ is not assignable to type ‘R’.
…ers/anon/Desktop/Workshop/podcast-player-frontend/node_modules/rxjs/Subject.d.ts
*/
export declare class Subject extends Observable implements ISubscription {
observers: Observer[];
Typescript Error
Class ‘WebSocketSubject’ incorrectly extends base class ‘AnonymousSubject’. Types of property ‘lift’ are incompatible. Type ‘(operator: Operator<T, R>) => WebSocketSubject’ is not assignable to type ‘(operator: Operator<T, R>) => Observable’. Type ‘WebSocketSubject’ is not assignable to type ‘Observable’. 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’.
…p/podcast-player-frontend/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts
*/
export declare class WebSocketSubject extends AnonymousSubject {
url: string;
Ionic Framework: 3.5.0
Ionic App Scripts: 2.0.1
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.1.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36


#13

That is just an unfortunate naming thing. This means Ionic 2+.

Your package.json is now identical plus the custom stuff you have in your project? Did you run npm install after deleting node_modules?


#14

Yes it should be. I stripped the whole cordova stuff for now.

{
    "name": "podcast-player",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "^3.12.1",
        "@ionic-native/native-storage": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "ionic-angular": "3.5.0",
        "ionic-audio": "^3.1.0",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "^2.3.4"
    },
    "description": "podcast-player: An Ionic project"
}

I’ve just added ionic-audio since it’s one major dependency of my project.

I’ve just retried. Deleted lockfiles, node_modules, and ran npm install once again.

Same errors are showing up. I guess my package.json should be okay now.

Thanks again.


#15

Post your `ionic info´ now. (If you are on npm5, also delete your package-log.json before npm install.)


#16

Here’s my ionic info:

λ ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v8.1.3
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

#17

Yep, try npm install after deleting node_modules and package-lock.json again.


#18

I went through it all again, here’s a full log of what I did just in case you could see anything wrong.

C:\Users\anon\Desktop\Workshop\podcast-player-frontend (master)
λ rm -rf yarn.lock node_modules package-lock.json

C:\Users\anon\Desktop\Workshop\podcast-player-frontend (master)
λ npm install
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm WARN prefer global node-gyp@3.6.2 should be installed with -g

> node-sass@4.5.3 install C:\Users\anon\Desktop\Workshop\podcast-player-frontend\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\anon\AppData\Roaming\npm-cache\node-sass\4.5.3\win32-x64-57_binding.node

> fsevents@1.1.2 install C:\Users\anon\Desktop\Workshop\podcast-player-frontend\node_modules\fsevents
> node install


> node-sass@4.5.3 postinstall C:\Users\anon\Desktop\Workshop\podcast-player-frontend\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\anon\Desktop\Workshop\podcast-player-frontend\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\anon\Desktop\Workshop\podcast-player-frontend\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.

added 844 packages in 100.739s

C:\Users\anon\Desktop\Workshop\podcast-player-frontend (master)
λ 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
[18:46:34]  watch started ...
[18:46:34]  build dev started ...
[18:46:34]  clean started ...
[18:46:34]  clean finished in 16 ms
[18:46:34]  copy started ...
[18:46:34]  transpile started ...
[18:46:38]  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;

[18:46:38]  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;

[18:46:38]  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>[];

[18:46:38]  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;

[18:46:38]  dev server running: http://localhost:8100/

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

[18:46:39]  copy finished in 4.45 s
[18:46:39]  watch ready in 4.70 s

Thanks a whole lot again for the help!


#19

Does it actually work in the browser? This could be warnings.

If it fails: npm list -g --depth=0 output.


#20

I get the same in the browser:

Here’s the npm list output:

C:\Users\anon\Desktop\Workshop\podcast-player-frontend (master)
λ 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
+-- UNMET PEER DEPENDENCY typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev
+-- windows-build-tools@1.3.2
`-- yarn@0.24.5

npm ERR! peer dep missing: typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev, required by tslint@5.5.0
npm ERR! peer dep missing: typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >= 2.4.0-dev || >= 2.5.0-dev || >= 2.6.0-dev, required by tsutils@2.5.1

Thanks