Problems with Ionic 4 beta

I’m hoping one of the Ionic team can help me out with this one as I’m having nothing but problems with the Ionic 4 beta.

Here are some of the issues I’m experiencing:

  1. ionic serve NEVER renders a project on first run (always receive a Failed to compile error in the CLI) - I have to make an edit to any part of my project code (I.e. put an extra space in between some dependencies listed in a class constructor) in order for the ionic serve utility to properly compile and render the project in the browser
  2. ionic build CLI command almost always breaks with an ng build error warning about some module not found - even on brand new projects with NO additional code implemented (just the auto-generated code) - I can’t find any discernible trigger causing those project builds to break
  3. Ionic Native In-App Purchase plugin doesn’t work - scrapped rebuilding this project a fortnight ago after multiple build failures so I can’t recall the exact error (apologies if this is vague - am happy to recreate and attempt to replicate if necessary to get to the bottom of this)

Those are the major issues I’ve been experiencing which are quite limiting in my ability to update projects and get acquainted with using the software.

If I am doing anything wrong I can’t see what that might be so I’m hoping that one of the Ionic team can guide me here.

Here’s my current environment set-up (this is within a brand new project too - NO platforms/plugins added for cordova as yet):


   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5


   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)


   ios-deploy : 1.9.2
   NodeJS     : v9.8.0 (/usr/local/bin/node)
   npm        : 5.7.1
   OS         : macOS High Sierra
   Xcode      : Xcode 9.2 Build version 9C40b

Do I need to upgrade any software here and/or what might I be doing wrong?

  1. Ionic serve

So how could I replicate this? I’m starting a blank project type

$ ionic start tmp blank --type=angular

And after the project has been created, I run ionic serve and I can build and load the app in the browser.
Is this a new project you’re testing against or an older project getting migrating?

  1. Similar to 1, how can I recreate this? Is there any way you could push the project up to github for me to take a look?

  2. IonicNative got some updates to deal with changes in rxjs (v5 to v6). You probably need to install the beta ionic-native plugin

npm install @ionic-native/in-app-purchase@beta --save

Happy to look at the project if you can share

That’s weird because when I create a new project, change into that project and then run ionic serve I get the following output in the CLI:

ionic serve
> ng run app:serve --host= --port=8100

[INFO] Development server running!
       Local: http://localhost:8100
       DevApp: appy-mapper@8100 on Macs-MacBook-Pro.local
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] ℹ 「wdm」: wait until bundle finished: /
[ng] Date: 2018-08-24T15:52:03.520Z
[ng] Hash: 2fd1617df1ec801f1d2c
[ng] Time: 20744ms
[ng] chunk {main} main.js, (main) 2.24 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, (polyfills) 840 bytes [initial] [rendered]
[ng] chunk {runtime} runtime.js, (runtime) 5.22 kB [entry] [rendered]
[ng] chunk {styles} styles.js, (styles) 35.7 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, (vendor) 325 kB [initial] [rendered]
[ng] ERROR in Could not resolve module /Projects/v4-beta/Case Studies/Case Study 
[ng] ℹ 「wdm」: Failed to compile.

I don’t get any specific errors though about the exact module that has failed to resolve.

This always happens whether it’s a new project or migrating an existing project to a new codebase - can’t figure out why though.

^ is this the project that you’ve just created, Case Study? Is it based on any starter template?

The project is created within the case study directory using the following CLI command:

ionic start appy-mapper blank --type=angular

Is Case Study another Ionic/Angular project or just a random directory? Could you post that project to github?

No - Case Study is an empty directory apart from the newly created project.

Will post to Github later - have an errand to run first.

Thanks for the help though - appreciate a second pair of eyes (just for a sanity check if nothing else!)

1 Like