ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Home Page:https://ionicframework.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Only installing ionic/cli isn’t sufficient for angular/standalone projects.

AndyDorman opened this issue · comments

I just got back into working on a new project using Ionic/Angular after a 7-year pause with NO programming (personal issues but with a crazy happy ending). I am so excited to be back working with Angular and Ionic and all the amazing tools this team has and continue to develop.

Ionic version:
[x] 7.x and maybe 8.x

I'm submitting a ...

[ ] bug report
[x] feature request

Current behavior:
The Ionic install docs tell us "npm install -g @ionic/cli@latest" to get started (after setting up the node/npm environment of course).

So, after installing @ionic/cli@latest, in order to familiarize myself with all the new and updated features, I ran 'ionic start simpleApp blank --type=angular' in order to work on an angular/standalone app following the steps in a couple of sample tutorials.

However, I found that ionicons (and possibly other features) were not present. After several days of trying to figure out what I was doing wrong, I finally realized that I ALSO needed to run "npm install @ionic/angular@latest" within my app to obtain the required packages.

I assume a "-g" install would work as well though I haven't tested it. I also haven't tested this with an ngModule app so I don't know if this is a problem there too.

Expected behavior:
It would be helpful to mention in another note on the https://ionicframework.com/docs/intro/cli page that if you use Angular/React/Vue framework, that you will need to also install the framework-specific packages.

Steps to reproduce:
Follow the steps on "https://ionicframework.com/docs/intro/cli", selecting an angular/standalone app. Then try to add ionicons feature/functionality to the app home.page.ts. It just wasn't clear to an Ionic beginner like me that I was missing a critical step in order to use the Angular/React/Vue framework.

Ionic info:

adorman@andywork1:~/programming/simpleApp (master *)$ ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
       
       Require stack:
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/lib/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
       '@capacitor/android/package.json'
       
       Require stack:
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/lib/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/index.js
       - /home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI                     : 7.2.0 (/home/adorman/.nvm/versions/node/v22.4.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 8.2.5
   @angular-devkit/build-angular : 18.1.0
   @angular-devkit/schematics    : 18.1.0
   @angular/cli                  : 18.1.0
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 6.1.0
   @capacitor/android : not installed
   @capacitor/core    : 6.1.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v22.4.1 (/home/adorman/.nvm/versions/node/v22.4.1/bin/node)
   npm    : 10.8.2
   OS     : Linux 6.9

Installing the framework specific packages is not required if you are using a starter template. Can you follow the prompts with ionic start (no additional arguments) and let me know if the problem still persists for other templates?

For reference all the starter templates for Angular use: https://github.com/ionic-team/starters/blob/4f4b246bbe110f8fb5e0b82a1277f7f1a7bc75ff/angular/base/package.json#L24, which includes both ionicons and @ionic/angular by default.