Skip to content

Help Wanted: Test CLI tooling for Ionic Angular 4 #3019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
imhoffd opened this issue Mar 20, 2018 · 128 comments · Fixed by ionic-team/starters#63
Closed

Help Wanted: Test CLI tooling for Ionic Angular 4 #3019

imhoffd opened this issue Mar 20, 2018 · 128 comments · Fixed by ionic-team/starters#63
Labels
help wanted project type: angular Ionic Angular 4+ projects

Comments

@imhoffd
Copy link
Contributor

imhoffd commented Mar 20, 2018

Hi all! 👋

We'd love to have some help testing the tooling for Ionic Angular 4. This issue will document how to get started.

Start Testing

Make sure you have the latest CLI release candidate:

npm i -g ionic@rc

Enable the angular project type:

ionic config set -g features.project-angular true

Start a new app, choosing angular when prompted for project type:

ionic start

We don't yet have a migration guide for existing apps, but we are keeping this list of breaking changes up to date.

Found an Issue?

Feel free to reply to this thread. If it's complicated and you need more room, feel free to open a new issue.

If you find an issue with the framework, please open an issue in the framework repo.

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

It's great! I could create v4 project and serve!!
But I found the function ionic generate is dead. so I will report it.

4.0.0-rc.0

$ ionic g
[WARN] Could not load schematics for ionic generate. Use --verbose to debug.
[ERROR] No suitable schematics found.
$ ionic g --verbose
  ionic:cli-utils:lib:project Project type from config: Ionic Angular v4+ (angular) +0ms
  ionic:cli-utils CLI flags: { interactive: true, confirm: false } +0ms
  ionic:cli { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic/dist/index.js', execPath: '/Users/sakakibara/devTry/ionic4-rc0', version: '4.0.0-rc.0' } +0ms
[WARN] Could not load schematics for ionic generate. Use --verbose to debug.
  ionic:cli-utils:lib:project:angular:generate Error while loading schematics: Error: Cannot find module '@angular-devkit/schematics'
  ionic:cli-utils:lib:project:angular:generate     at Function.Module._resolveFilename (module.js:536:15)
  ionic:cli-utils:lib:project:angular:generate     at Function.Module._load (module.js:466:25)
  ionic:cli-utils:lib:project:angular:generate     at Module.require (module.js:579:17)
  ionic:cli-utils:lib:project:angular:generate     at require (internal/module.js:11:18)
  ionic:cli-utils:lib:project:angular:generate     at Promise.resolve.then (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/project/angular/generate.js:175:84)
  ionic:cli-utils:lib:project:angular:generate     at <anonymous> +0ms
[ERROR] No suitable schematics found.

@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 23, 2018

@rdlabo Thanks, I removed @angular-devkit/schematics from the dependencies of the CLI but forgot to add it to the starter's package.json.

Please run the following to fix (inside your project):

npm install @angular-devkit/core @angular-devkit/schematics

@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 23, 2018

@rdlabo I just realized that won't work (unless the CLI is installed locally). I will need to fix this tomorrow. Thanks for the report! 💪

imhoffd added a commit to ionic-team/starters that referenced this issue Mar 23, 2018
@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

@dwieeb Thanks for reply. I'm looking forward to tomorrow!

I found don't work $ionic serve --aot . It seems Ionic CLI don't pass arguments.

@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 23, 2018

EDIT: @rdlabo Sorry--let me investigate this tomorrow. I'm not sure we want to highlight the --aot option. AoT occurs automatically using --prod.

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

@dwieeb thanks. I thought the function of Angular CLI can also be used.

And I don't work ionic generate after npm install @angular-devkit/core @angular-devkit/schematics (local install).

https://github.com/ionic-team/ionic-cli/blob/master/packages/%40ionic/cli-utils/src/lib/project/angular/generate.ts#L211-L212 is use global node_modules. I will make pull request.

@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 23, 2018

@rdlabo Yes, it is an Angular CLI option, but --aot is automatically used when --prod is used. And I'm not sure how it's useful with --dev, which is meant to keep the build "fast" at the cost of making the app "slow". (But I could be missing something.)

I'd like to keep it as simple as possible. The Angular CLI team won't remove it because it would be a breaking change, but as far as I can tell, the option won't be useful to the 99%. Again, I could be totally wrong.

Thanks for the PR! I left a comment.

@mburger81
Copy link

I didn't saw this thread and opened a new issue #3025, can we test ionic cli 4 RC.0 also on an existing project?
If yes should we do also this ionic config set -g features.project-angular true like described in your post?

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

@dwieeb I expect Angular CLI --aot will be processed faster. and I see the Thought of Ionic team. Thanks.

I left a comment.

Thanks. I made PR again!

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

I will write one Issue one comment.

$ionic g page can make Page Component group. But don't include SCSS file. include CSS file.
Don't check .angular-cli.json option. (Sorry, I couldn't trace...)

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

page selecter (example page-home) does not conform to the rules.
https://angular.io/guide/styleguide#style-02-07

So IDE warning.

2018-03-23 18 52 06

@rdlabo
Copy link
Contributor

rdlabo commented Mar 23, 2018

When $ionic g page do, add declarations in src/app.module.ts.
But don't add entryComponents.

@Tiberriver256
Copy link
Contributor

The serve option seems to open the browser a little early sometimes. I wonder if you could skip launching the browser using the old method and just pass the open options on to the ng serve command here?

host: options.address,
port: String(options.port),
progress: 'false',
target: options.target,
environment: options.environment,
ssl: options.ssl ? 'true' : undefined,

Something like:

open: options.open

@danielsogl
Copy link
Contributor

I would also recommend to open the browser optional and not by default. Sometimes I just want to restart the build process and have already opened the app inside the browser.

@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 23, 2018

@rdlabo Thanks, I'll take a look at those issues.

@Tiberriver256 The Angular CLI 100% opens the browser window too early as well. This is something we're working on with the Angular team. I know it will be a big complaint. It is listed here: #3003

@rdlabo
Copy link
Contributor

rdlabo commented Mar 24, 2018

@mburger81 I can use v3 project by Ionic CLI@RC.
features: { 'project-angular': true } }

@rdlabo
Copy link
Contributor

rdlabo commented Mar 26, 2018

@dwieeb I made pull request.
ionic-team/starters#62

I think this function depends on cli-utils. so I think that it is better to refer to A, please consider

@not-a-designer
Copy link

@dwieeb

Just upgraded to ionic 4.0.0-rc.0, testing what breaking changes have been implemented for the components so far, per https://github.com/ionic-team/ionic/blob/master/BREAKING.md

Hope this will help everyone getting started!

The only changes currently available (4.0.0-rc.0):

  • [slot] directive, including slot="fixed"
  • [tappable] directive for <button ion-item> to <ion-item tappable>
  • [detail-push], detail="false" directive for <ion-item tappable>
  • <ion-label> required within <ion-item>, <button>,<ion-item-divider>, <ion-list-header>etc...

CURRENTLY UNAVAILABLE:

  • <ion-button> from [ion-button]
  • [expand], [fill], [size] for <ion-button>
  • <ion-chip-button>
  • { Datetime } module from { DateTime } module
  • <ion-fab-button>, [horizontal], [vertical] attributes
  • <ion-item-option> for , getSlidingRatio()` method
  • <ion-menu-toggle> from [menuToggle]
  • removeIndex(), getChildNavs() from remove(), getAllChildNavs() for <ion-nav>
  • <ion-select-option>, [interfaceOptions] from [selectOptions] for <ion-select>
  • name="lines", name="lines-small" from name="ios", name="ios-small"
  • <ion-text> from [ion-text]
  • $colors has not been updated in variable.scss
  • <ion-icon> styling is still .icon { color: #000; }
  • <ion-input> sass variable prefix is still $text-input-
  • individual page styles are still globally imported --> page-home { p { color: red; } }
  • cordova-statusbar sass variable is still $cordova-<ios|md|wp>-statusbar-<attribute>

@imhoffd imhoffd changed the title Help Wanted: Test CLI + Ionic Angular 4 Help Wanted: Test CLI tooling for Ionic Angular 4 Mar 26, 2018
@imhoffd
Copy link
Contributor Author

imhoffd commented Mar 26, 2018

@not-a-designer Thanks, I forwarded on your comment. As a reminder, this issue is for testing the tooling, not the framework. 4.0.0-rc.0 is the CLI version.

@brandyscarney
Copy link
Member

Hey @not-a-designer, what do you mean by available vs unavailable? I am not fully understanding your comment. Thank you! 🙂

@vksgautam1
Copy link

vksgautam1 commented Jun 15, 2018

i have this issue with tabs sample app. when i run ionic cordova run android
ionic info

`
Ionic:

  ionic (Ionic CLI)          : 4.0.0-rc.8 (C:\Users\DELL\AppData\Roaming\nvm\v8.9.0\node_modules\ionic)
  Ionic Framework            : @ionic/angular 4.0.0-alpha.7
  @angular-devkit/core       : 0.7.0-rc.0
  @angular-devkit/schematics : 0.7.0-rc.0
  @angular/cli               : 6.0.8
  @ionic/ng-toolkit          : 1.0.0-rc.8
  @ionic/schematics-angular  : 1.0.0-rc.8
`


this is error i got
`ERROR` in ../../node_modules/@types/zen-observable/index.d.ts(8,9): error TS2687: All declarations of 'observable' must have identical modifiers.

[ERROR] Command not found: ng

@franco
Copy link

franco commented Jun 15, 2018

I get a blank screen with cordova. Fairly new to ionic so I might do here something fundamentally wrong:

npm install -g ionic@rc
ionic config set -g features.project-angular true
ionic start test-app sidemenu --cordova --type angular
ionic cordova run ios

Build is successful. Upload is successful. App gets launched and I see the splash screen with the ionic loading indicator but after that a blank screen is displayed. No obvious error message. Same problem on Android and iOS. ionic serve works as expected.

% ionic info                                                                                                                                                                                                    

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.8 (/Users/franco/.nvm/versions/node/v10.4.1/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.8
   @ionic/schematics-angular  : 1.0.0-rc.8

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0 ios 4.5.4

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.2
   NodeJS            : v10.4.1 (/Users/franco/.nvm/versions/node/v10.4.1/bin/node)
   npm               : 6.1.0
   OS                : macOS Sierra
   Xcode             : Xcode 9.2 Build version 9C40b

Environment:

   ANDROID_HOME : /Users/franco/Library/Android/sdk

@imhoffd
Copy link
Contributor Author

imhoffd commented Jun 15, 2018

@mburger81 Yep, cordova-plugin-ionic-webview@beta is 2.0.0-beta.0. The breaking change is that Android apps are always served via HTTP, just like iOS. This is so that HTML5 pushState routing works as expected. This thread is for ionic/angular 4, not ionic-angular, so the instructions weren't perfect for v3 apps.

@vksgautam1 I don't know what the problem might be right away. Would you mind opening a new issue? (EDIT: that issue is here: #3316)

@franco Welcome! Your ionic info looks good to me. When you have the app running on Android, would you mind opening chrome://inspect and opening the DevTools for the Web View running on the device? Look for any console errors.

@franco
Copy link

franco commented Jun 15, 2018

@dwieeb here the console errors I get:

runtime.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
cordova.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/assets/icon/favicon.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

and if I open ./platforms/android directly with Android Studio and run the project I see the following error in logcat:
06-15 20:58:04.096 12882-12944/io.ionic.starter E/chromium: [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.

@imhoffd
Copy link
Contributor Author

imhoffd commented Jun 15, 2018

@franco I'm guessing there's just a mismatch between your base href and the Web View plugin. Please ensure the following is in your index.html:

<base href="/">

Then make sure you have the latest Web View beta installed:

ionic cordova plugin add cordova-plugin-ionic-webview@beta

@mburger81
Copy link

@dwieeb So should we not test new cli against ionic3 apps? Are we not able in future to use new cli also for old apps? It would be very costly in mange different cli's for different ionic version on the same developement devices. Thx a lot

@imhoffd
Copy link
Contributor Author

imhoffd commented Jun 15, 2018

@mburger81 All I said is this issue is for testing the tooling for ionic/angular 4. I'm just trying to keep it on-topic. The tooling for v4 projects is being actively developed, so I figured this issue would serve as a central place for people who want to test to stay updated/involved.

If you encounter issues with the tooling for v1/v2/v3, then please open a new issue.

@franco
Copy link

franco commented Jun 19, 2018

@dwieeb Adding cordova-plugin-ionic-webview@beta resolved for me the issue with the blank screen in cordova. Thanks!

@kinggolf
Copy link

@dwieeb & everyone - thanks for all hard work and inputs on cli for Ionic Angular V4. With all the help on above issues, I have upgraded an old V2 app to V4 and can build (--prod --aot) to both iOS and Android devices!
As a low priority request, I think it would be good if ionic start for a new project also includes skeletal files for iPhone X Launch Image - Default-2436h.png (1125x2436) and Default-Landscape-2436h.png (2436x1125). Thanks again.

@imhoffd
Copy link
Contributor Author

imhoffd commented Jun 20, 2018

Great to hear @kinggolf!!

I made a new issues for the new launch images: #3319

@wilsolutions
Copy link

wilsolutions commented Jun 20, 2018

Awesome, good to see it working to other people but unfortunately I'm still getting a blank screen on iPhone Device :( I'm debugging to see what I can get but here you are my current setup:

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.9 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.8
   @ionic/schematics-angular  : 1.0.0-rc.8

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.3.1

cordova plugin ls

cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.0.0-beta.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

@franco
Copy link

franco commented Jun 20, 2018

@wilsolutions Create a new project and run ionic cordova plugin add cordova-plugin-ionic-webview@beta before you create the cordova project (i.e. ionic cordova run ios). I noticed that it doesn't work for me either when I add the webview afterwards. I hope that solves it for you as well.

@kinggolf
Copy link

kinggolf commented Jun 20, 2018

@wilsolutions Here are the steps I took:
npm uninstall cordova-plugin-ionic-webview --save
cordova plugin add cordova-plugin-ionic-webview@beta
npm install @ionic-native/ionic-webview@beta --save
ionic cordova platform rm ios
ionic cordova platform add ios
ionic cordova prepare ios
ionic cordova build ios --prod --aot

You could even try rm -rf node_modules & deleting package-lock.json.

My ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.9 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.4

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.2
   NodeJS            : v8.11.1 (/usr/local/bin/node)
   npm               : 6.1.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

And also, be sure to run:
ionic config set -g features.project-angular true
as pointed out by @dwieeb at very top.

I had to edit angular.json file because ionic cordova build ios would not run. See this file for updates, as mentioned above.

Good luck!

@imhoffd
Copy link
Contributor Author

imhoffd commented Jun 20, 2018

Also, wipe out Cordova generated files for sanity:

rm -rf platforms/ plugins/
cordova prepare

@vksgautam1
Copy link

vksgautam1 commented Jun 21, 2018

after solving that zen observable issue.
ion serve is working fine in browser if i run a app in in device then this is giving me blank screen alongwith this issue in console.

polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
cordova.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
runtime.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/assets/icon/favicon.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

edit- as per given post by you to update webview to latest 2.0.0 beta resolved the issue.
but my other concern is that 2.0.0 only works with OS 5.0 or above for android. As ionic supports kitkat till now . can't we run v4 apps in kitkat device as old webview is giving issue with v4

@wilsolutions
Copy link

Interesting, It works! Thank you fellows!
But I get the blank screen once I add the http native plugin.

ionic cordova plugin add cordova-plugin-advanced-http
npm install --save @ionic-native/http

@kinggolf
Copy link

kinggolf commented Jun 21, 2018

@wilsolutions Cool. I've never used @ionic-native/http. I just used the @angular/http module.

@JamieWritesCode
Copy link

Hey team, I've got a question about @ionic/schematics-angular. Is it possible to generate a component with a scss stylesheet rather than a css by default? I've added my override to angular.json as follows, but this obviously doesn't take effect while the cli defaultCollection is set to @ionic/schematics-angular.

  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }

Ionic info output:

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.9 (C:\Users\jamie\AppData\Roaming\nvm\v8.9.1\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.9
   @angular-devkit/core       : 0.7.0-rc.1
   @angular-devkit/schematics : 0.7.0-rc.1
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

System:

   NodeJS : v8.9.1 (C:\Program Files\nodejs\node.exe)
   npm    : 5.5.1
   OS     : Windows 10

Bonus question:

Is there any plans to include an option to generate a separate module routing file for Pages, similar to how the ng g module --routing command works?

I don't know how fussed I am about doing routing at the top of page.module.ts... I would think that if we're leaning towards following Angular convention, then an --routing option to generate a separate routing file would be the way to go?

@stupidawesome
Copy link
Contributor

@TehCrucible Add an entry for @ionic/schematics-angular to your angular json

"schematics": {
  "@ionic/schematics-angular:component": {
    "styleext": "scss"
  }
}

@mburger81
Copy link

Yes I would suggest the same thing as @TehCrucible, support --routing param for own routing files. thx

@imhoffd
Copy link
Contributor Author

imhoffd commented Jul 11, 2018

@TehCrucible css/scss inconsistency is sort of tracked here: #3312

I made a new issue for the --routing option: #3361

@imhoffd
Copy link
Contributor Author

imhoffd commented Jul 12, 2018

👋 Hi all.

CLI RC 11 is out with some small fixes and improvements on documentation. One of the more exciting changes is that the feature flag is no longer required as the framework is nearing its first beta. 🎉

Running ionic start now yields this project type selection prompt, revealing the new project type while still recommending stable v3:

image

With that option now available to all CLI RC users, I'll be closing this issue as it was only meant for early testing. Thank you SO MUCH for helping us shape the future of tooling for Ionic Angular projects. You all rock! 🎸 Please create new issues for bugs or enhancements on the angular project type. I look forward to your feedback! 💪

@imhoffd imhoffd closed this as completed Jul 12, 2018
@imhoffd
Copy link
Contributor Author

imhoffd commented Jul 12, 2018

There are still a few known issues as of right now. These are the big ones:

Please look for the project type: angular label to view issues related to v4 tooling: project type: angular Ionic Angular 4+ projects

@jeugregg
Copy link

jeugregg commented Sep 14, 2018

In ionic V4 beta :

I can’t see the console log messages when I launch my app in devApp Android App.
(it works well with ionic v3 app).
It doesn't works also with my device connected in USB but I can see console logs into chrome://inspect.

command used :
ionic serve -c

App devApp on Samsung Galaxy Note 8 Android 8.0.0 (mode dev activated but no impact I think).

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.8
@angular-devkit/core : 0.8.1
@angular-devkit/schematics : 0.8.1
@angular/cli : 6.2.1
@ionic/ng-toolkit : 1.0.8
@ionic/schematics-angular : 1.0.6

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.1.1, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 5 other plugins)

System:

Android SDK Tools : 26.1.1 (/Users/gregory/Library/Android/sdk/)
ios-deploy : 1.8.6
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Sierra

wand1252 added a commit to wand1252/starters-angular-ionic-and-node that referenced this issue Aug 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted project type: angular Ionic Angular 4+ projects
Projects
None yet
Development

Successfully merging a pull request may close this issue.