I’m a total new comer to Ionic, but it looks like it will be very useful.
I have a hybrid app Angular using Cordova that runs just fine as a web app and runs in an Android.
I thought I saw some documentation about integrating ionic with an existing app that had an extra iconic command to make the right extra … ah declarations and modifications, but for the life of me, I can not find an page that describes the process. Where can I find the ‘simple’ process documented?
I did the following and it failed. Can you help me find the documentation? Does it exist?
Here is what I did so far, but it fails. I’d like the see the docs for adding Ionic then I’ll try adding Capacitor, but first Ionic.
$ npm install -g @ionic/cli native-run cordova-res
$ npm install @ionic/angular
$ ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] An unhandled exception occurred: Project "app" does not exist.
[ng] See "C:\Users\pareh\AppData\Local\Temp\ng-wRlcCs\angular-errors.log" for further details.
[ERROR] ng has unexpectedly closed (exit code 127).
The Ionic CLI will exit. Please check any output above for error details.
Hi
integrating Ionic in existing angular project might be the difficult route. And not very commonly seen nor documented.
Would it work to start a new Ionic Angular project and put the stuff inside?
Only challenge may be that the current Ionic scaffold runs latest Angular and your might be versions behind. Then you are forced to migrate due to angular mismatches
I think that might be the most prudent approach. I haven’t hacked any packages, I have inserted barely a few lines of extra jS, and no Java, so I think an empty app would show me where all my own components, code, package references etc. needs to be dropped in.
That immediate gave me:
An unhandled exception occurred: Cannot find module ‘@angular-devkit/schematics’
suggesting yet another missing npm package, so I’m going to go with a clean new app and dump in my components.
I ended up generating a Angular app then updating the app files with my old files, and changing all of the various files to match.
Here is the list of files I ended up changing or not changing in project /src/. I just kept my old styles.scss and did NOT change any of the other style files, by adding it to angular.json (at the root of the app (I reference it below as ../angular.json, because it is one dir level above of all these changes to /src.
/src/app.modules.ts - All modules used in code ported code must be inserted here.
/src/global.scss - (in new) I left it alone.
/src/styles.scss - moved from old to new. It should be ref’ed in ../angular.json same as global.scss, so search the the one reference to this and add to the the list. Someday combine the two.
/src/index.html - in src/app/app.component.ts reference your top-level component or edit your component ts file selector to match. I inserted my app-component here and added <ion-app> tags around all my code in the top-level app-component.html. I supposed I could have put <ion-app> in ‘./index.html’
/src/main.ts - keep the new one; if you just built an empty app it is likely newer, right?
/src/polyfill.ts - keep new one.
/src/favicon - (in old, not new) make sure favicon.* are in assets/icon as referenced in ./index.html
/src/app/ - drop your components in here = just bring your old-proj/src/app over, but you have tolist them all in app.modules.ts
/src/assets
/src/assets/icon - Ionic place for favicon.png, see reference in ./index.html
/src/assert/icons - my project icons (svgs) for buttons etc.
/src/assets/some data - (from out old) bring this over.
/src/js - (in old, not new) Is not needed in my new app, but you’ll need to check if you need to port it.
/src/themes/* - (in new, not old) referenced like global.scss in ../angular.json
/src/assets/*.svg - delete those which came with the gen’ed app after you have it running.