Nx Nrwl Ionic

In this post I will explain how to setup Ionic App in Nrwl Workspace. It is easier than it may seem.

Initialise Ionic

Make sure you have ionic CLI installed yarn global add ionic.

ionic init --type=angular

ng g app ionic-app --style=scss --unit-test-runner=jest --e2e-test-runner=cypress --routing --prefix=app

yarn add @ionic-native/core @ionic-native/http @ionic-native/splash-screen @ionic-native/status-bar @ionic/angular
yarn add @ionic/angular-toolkit -D

This will install required dependencies and create an angular app that we will replace with ionic implementation.

Changes introduced in this commit cover that:

• replaces default app generated by angular with one produced with ionic start
• modifies angular.json to reflect one from ionic start
• modifies tslint.json to allow components with “Page” suffix

Add Capacitor

yarn add @capacitor/cli @capacitor/core
npm run build --prod ionic-app

Now initialise app with “app name” and “bundle id”:

npx cap init <name> <id>

You can read more about Bundle Identifiers in here. For me it is:

npx cap init "Nx MEAN Starter" bielik.nx.mean.starter

Now edit capacitor.config.json so that value of webDir field equals dist/apps/ionic-app. It tells capacitor where to look for compiled app.

Add iOS

npx cap add ios
npx cap sync
npx cap open ios

Then in Xcode go to general -> signing -> team and choose team.

Run new version of app on iOS simulator

npm run build --prod ionic-app
npx cap sync
npx cap open ios

Then choose desired device and click run.

Summary

That is all there is to it. Source code for this can be found in here. However it is actively developed so if you want to review THIS version, checkout this commit.

Appendix: Fixing specs

If you encounter beloved bug SyntaxError: Unexpected token import while running tests you can fix that by applying my answer from stack-overflow.