Ionic-cli: Help Wanted: Test CLI tooling for Ionic Angular 4

[imhoffd]

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]

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]

@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]

@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! 💪

[rdlabo]

@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]

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]

@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]

@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]

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]

@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]

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]

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

So IDE warning.

[rdlabo]

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

[Tiberriver256]

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?
https://github.com/ionic-team/ionic-cli/blob/94b47721b43d2f5e7fb1c4afa46e87289a8ffdf1/packages/%40ionic/cli-utils/src/lib/project/angular/serve.ts#L205-L210

Something like:

open: options.open

[danielsogl]

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]

@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: https://github.com/ionic-team/ionic-cli/issues/3003

[rdlabo]

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

[rdlabo]

@dwieeb I made pull request.
https://github.com/ionic-team/starters/pull/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]

@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]

@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]

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

[not-a-designer]

@brandyscarney I created a new ionic project and tried implementing the new markup, and when it was running with ionic serve, i was getting the template parse error for the "unavailable" components:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'' is not a known element:

1. If '' is an Angular component, then verify that it is part of this module.
2. If '' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

[imhoffd]

@not-a-designer That's odd. The CUSTOM_ELEMENTS_SCHEMA should be added to the NgModule. See https://github.com/ionic-team/starters/blob/master/angular/base/src/app/app.module.ts#L17

[not-a-designer]

@dwieeb sorry for the late reply i was at work.
It looks like ionic start is not adding CUSTOM_ELEMENTS_SCHEMA by default but i have it now

however it does not appear to have changed my earlier list

[mburger81]

@not-a-designer for what I know, ionic start is not at the moment using starter template for ionic4, so no ionic/angular and ionic/core is used and for this reason the template does not need of CUSTOM_ELEMENTS_SCHEMA.
If you are trying manually to use ionic/core components you have also to set manually the CUSTOM_ELEMENTS_SCHEMA.
I think so ;)

[mburger81]

@rdlabo Also RC.1 and setting features: { 'project-angular': true } }does not work for me. Still the same error on android release build on our project. Have you tried to do a release build with valid certificate?

[rdlabo]

@mburger81 Starter template use @ionic/angular and I think need CUSTOM_ELEMENTS_SCHEMA.
https://github.com/ionic-team/starters/blob/master/angular/official/blank/src/app/pages/home/home.page.html
using Web Components in Angular need set CUSTOM_ELEMENTS_SCHEMA .

Have you tried to do a release build with valid certificate?

Yes. and I could try to do a release build .

[mburger81]

Oh, before if I run ionic start I could select only between ionic-angular and ionic1 starter template. Now that I have set features.project-angular to true, I have listed also angular which is the new Ionic Angular v4+ template! :+1: :smile:

[not-a-designer]

@mburger81 which file are you adding features: { 'project-angular': true } } to?

[mburger81]

I have done only the command described in main post
ionic config set -g features.project-angular true
this is adding the property to main ionic config file

[sandangel]

Hi, is it possible to opt in ionic project to angular/cli project and only take the build artifacts as input for ionic-app-scripts to build ios and android?
As angular/cli evolves to v6 which support monorepo, build and bundle with bazel, webpack 4, ..., is that hard to keep ionic-cli in sync with those changes?

How do we config angularCompilerOptions, generate libs created by ionic components, share code between multiple apps, use angular/service-worker, with ionic-cli?

Here is an example workflow I suggest:

• ionic start will start a normal angular cli project but with ionic related packages, files like ionic-app-scripts, ionic-angular, ionic-icons, variables, ionic.config.json... With template options like blank, aws... we can use angular schematics.
• ionic serve will only a thin wrapper for ng serve
• ionic build app on mobile device will use ng build --prod and take the build artifacts as input

[imhoffd]

@sandangel Did you try the RC? The Ionic CLI will support two project types for Angular:

• ionic-angular: The "Ionic"-flavored Angular. This is the project type most Ionic devs are using today. It uses @ionic/app-scripts for tooling and the Ionic router. It does not have the Angular CLI installed at all.
• angular: The new project type for Angular that relies heavily on the Angular CLI for builds, serve, and generators (using Angular schematics and Ionic schematics). When Ionic Angular 4 is released, this will be the recommended project type. Because it is relying completely on the Angular CLI for the web asset build, any new features from the Angular CLI team are brought to Ionic projects much easier and much quicker.

Configuration for angularCompilerOptions would be in the tsconfig.json file. For our new angular starter, we took an Angular project created with the Angular CLI and added Ionic to it. You can now think of the Ionic starter as a superset of the Angular starter.

We will have migration guides for moving a project from ionic-angular to angular. The build artifacts of either of these projects could in no way be used as source artifacts for another.

[jrobeson]

@dwieeb : i really appreciate the clarification there. I was trying to play with a plain js app with ionic 4 but ran into issues with app-scripts expecting angular stuff. Is a plain js "blank" option coming soon?

[sandangel]

@dwieeb awesome, thank you for clarifying.
But I have to mention that angular cli v6 (currently beta 8) will start with a totally different project setup support monorepo and schematics searching. I think we should use angular cli v6 in the final ionic-cli v4 so we won't have to do a migration guide after ionic-cli just released for short time.

[imhoffd]

@jrobeson It'd be something worth exploring at a later date. Most developers are interested in starting projects with the power of modern JS frameworks today such as Angular, React, and Vue. I imagine after Ionic Angular 4, we will begin working on a version of Ionic for React, and then others. The new docs will have information and examples for starting Ionic projects with vanilla JS, at which point you can begin building an app, but we won't have "official tooling" for it in the CLI for some time.

@sandangel My apologies--we're not too worried about the different project structure because 1) no one using Ionic has a project to migrate, and we believe Angular CLI v6 will be released before Ionic Angular 4.0.0 and 2) The Angular CLI team is making an effort to automate the upgrade process as much as possible. With big releases of Angular CLI in the future, we will be working with the Angular team to ensure Ionic Angular projects can be migrated in the same way Angular projects can be.

[jrobeson]

@dwieeb : ah. i was asking about plain js, just so it'd be clear how you could move from there to implement any framework not just the ones you folks can spend your time on.

[janpio]

Tested with ionic@4-rc2:

• Browser opening before actual build is ready is strange (+1 on that)
• Where does ionic serve build to?
• ionic cordova run android only shows a white screen, seems the app only contains index.html but none of the other files (cordova.js, inline.bundle.js etc)
• After I ran ionic build, a wild www appeared
• next run of ionic cordova run android still failed - so not connected

Am I getting ahead of what is supposed to work here?

[imhoffd]

@janpio A little bit.

• Yeah... I wonder if I can hack something together. I'm not sure if we can elegantly solve this problem before alpha.
• The Angular CLI serve is all in-memory with webpack-dev-server under the hood.
• That sounds like the base url issue... should have that fixed up soon as best we can. Again, won't be an elegant solution.
• Yep, ionic build puts web assets in www.

[moda20]

Quick Q : Does the new angular project type generated by this CLI use angular components or the webcomponents ?

[ahasall]

Hello,

Is there a reason why you use global.scss instead of style.scss for the global CSS, and www instead of dist for the build folder?

I may be wrong, but I think the closer we follow the Angular CLI defaults, the better for Ionic/Angular developers.

Thanks

[jvitor83]

@ahasall
For the global.scss i can't say for sure, but for the www i believe that is to keep compatible with cordova...

I have created a project ( https://github.com/jvitor83/angular-pwa-seed ) that i believe is something a little close to what the ionic 4 will give with Angular CLI (using the ionic components and angular cli)... And what i found is that with build folder set to www it is easier to do a cordova build, since the cordova don't have any option to change the directory source www to build... and with that is straightforward to build to another platforms (android, ios) using cordova (just a matter of executing one command cordova run android)...

There is another project ( https://github.com/ngx-rocket/generator-ngx-rocket ) that is something suchlike and in some cases it use www to the same purpose (cordova compatibility).

I believe this is why the www as default (at least is my guess).

[ahasall]

@jvitor83,

The www folder totally make sense.
Thank you very much.

[rdlabo]

in Angular 6 (6.0.0-rc.2) , I can't use @ionic/schematics-angular.
ionic g page test command display error.

Schematic "page" not found in collection "@schematics/angular".
Error: Schematic "page" not found in collection "@schematics/angular".

cli packages: (/Users/sakakibara/dev/ionic-cli/packages)

   @ionic/cli-utils  : 2.0.0-rc.3
   ionic (Ionic CLI) : 4.0.0-rc.3

local packages:

   @angular-devkit/core       : 0.5.1
   @angular-devkit/schematics : 0.5.1
   @angular/cli               : 6.0.0-rc.2
   @ionic/schematics-angular  : 1.0.0-rc.1
   Ionic Framework            : @ionic/angular 4.0.0-alpha.1

System:

   NodeJS : v8.9.3
   npm    : 5.8.0
   OS     : macOS High Sierra

[sandangel]

@rdlabo you should specify the schematic to use like this because ionic cli does not support angular cli v6 yet:

ng g page test -c @ionic/schematics-angular

[imhoffd]

@moda20

Quick Q : Does the new angular project type generated by this CLI use angular components or the webcomponents ?

For Angular projects, you're creating Angular components, which are not web components. The Ionic components are web components under the hood.

@ahasall

Is there a reason why you use global.scss instead of style.scss for the global CSS

I think it's just a better name, but there isn't a reason other than that. What is the case for style.scss?

@rdlabo @sandangel Yeah we're in the process of moving everything to Angular 6 stuff. My apologies for the rockiness right now.

[ahasall]

@dwieeb,
It is totally true that global.scss is a better name than styles.scss. But using styles.scss aligns more with Angular CLI generated projects. This is the only reason I can think of to prefer styles.scss over global.scss.

[imhoffd]

Hey folks, RC 4 is out and our starter has been updated with Angular 6!

We do have one known issue, which @rdlabo @sandangel mentioned: the new Angular CLI is expecting third-party schematics to be defined differently. We're working to get this fixed, but at the moment the page generator does not work.

[joshuamorony]

Just noticed an issue with generating a service with ionic g service Test. Rather than creating than creating a service in src/services, it uses the full path of the current directory and creates that structure inside of the app. For example, when I run the command it copies my file system structure into the project, i.e:

MyApp/Users/joshuamorony/path/to/MyApp/src/services/test.service.ts

[sandangel]

@joshuamorony that actually an angular cli issue. ionic use angular schematics under the hood for generating

[moda20]

@dwieeb, so the default <ion-...> components are webcommponents and the page(for example) generated by the CLI is an angular component ?

[mburger81]

@moda20
@ionic/core are only standard web components created with new stencil compiler. You can use them anywhere with or without framework.
@ionic/angular is the angular implementation which inside use the web component and bring them into a angular environment, its something like a wrapper which has also some angular controllers.

Or at least I thinks so :smile:

[mburger81]

@dwieeb
to use latest starter with Angular 6RC, we do not have to install also RC angular cli globally, right? With ionic cli 4 RC the required angular cli is installed locally? Or had I misunderstood this?

Is it save to use starter template with 6RC if @ionic/angular ALPHA 1 is tested and released for angular 5.2.9?

BTW: we have to build also a WebAPP for simple browser, on ionic2/3 we had to do this by running this comment npm run ionic:build --prod.
How could or should we bundle the plain WebApp for browser on ionic(cli)4 using angular 6?

[imhoffd]

@joshuamorony Very strange! I'm not seeing that with RC.4 and a new app:

Any other details you can give me to reproduce the issue?

@moda20 Yes, correct. And @mburger81 is correct.

@mburger81 Correct, the Angular CLI is installed locally. A global installation of the Angular CLI is not required for Ionic projects. As for your second question, I'm not sure what you mean by safe. We're in alpha, so we don't recommend using it in production apps right now. But, the upgrade from 5 to 6 was incredibly seamless for us because the Angular bindings (@ionic/angular) are very slim and didn't require much updating. 😄 For your third question, try ionic build --prod.

[mburger81]

@dwieeb I intend, your starter template now use angular 6 rc and ionic/angular alpha, but your ionic/core alpha is build with angular 5, and also tested for this version. I intend if this is safe. :) NavigationController and all the stuff are tested and build used angular 5.
But no problem we are very early alpha tester and so we can open some issues about error on ionic using angular 6
;)

[joshuamorony]

@dwieeb I'm not sure what else might be relevant, to reproduce I just start a new project using the RC CLI, and then run ionic g service Test which produces this:

Joshuas-MacBook-Pro:master-detail joshuamorony$ ionic g service Test
> ng generate service services/Test
CREATE Users/joshuamorony/documents/path/to/app/master-detail/services/test.service.spec.ts (362 bytes)
CREATE Users/joshuamorony/documents/path/to/app/master-detail/services/test.service.ts (133 bytes)
[OK] Generated service!

Here's my environment info:

   @ionic/cli-utils  : 2.0.0-rc.4
   ionic (Ionic CLI) : 4.0.0-rc.4

local packages:

   @angular-devkit/core       : 0.5.1
   @angular-devkit/schematics : 0.5.1
   @angular/cli               : 6.0.0-rc.3
   @ionic/schematics-angular  : 1.0.0-rc.4
   Ionic Framework            : @ionic/angular 4.0.0-alpha.1

System:

   NodeJS : v8.11.1
   npm    : 5.6.0
   OS     : macOS High Sierra

[mburger81]

Also for me there is no problem on creating a new service

ionic g service Test
> ng generate service services/Test
CREATE src/app/services/test.service.spec.ts (362 bytes)
CREATE src/app/services/test.service.ts (133 bytes)
[OK] Generated service!

Here's my environment info:

cli packages: (/usr/lib/node_modules)
   @ionic/cli-utils  : 2.0.0-rc.4
   ionic (Ionic CLI) : 4.0.0-rc.4

global packages:
   cordova (Cordova CLI) : 8.0.0

local packages:
   @angular-devkit/core       : 0.5.1
   @angular-devkit/schematics : 0.5.1
   @angular/cli               : 6.0.0-rc.3
   @ionic/schematics-angular  : 1.0.0-rc.4
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 4.0.0-alpha.1

System:
   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.1
   npm               : 5.8.0
   OS                : Linux 4.13

Environment Variables:
   ANDROID_HOME : /.............

[mburger81]

@dwieeb
If we run two different apps at the same time, first app is served over http://localhost:8100 and second over http://localhost:8101.
If we edit the first app, we see the app reloading in browser, but if we edit the second one it is not reloading. We have to stop and start the server again to get it work.

[moda20]

is this a known bug or is it jsut me :

$ sudo ionic build --prod
[sudo] password: 
[WARN] Detected locally installed Ionic CLI, but it's too old--using global CLI.
> ionic-app-scripts build --prod
Error: spawn EACCES
    at _errnoException (util.js:1003:13)
    at ChildProcess.spawn (internal/child_process.js:340:11)
    at Object.exports.spawn (child_process.js:499:9)
    at Function.spawn (/usr/lib/node_modules/ionic/node_modules/cross-spawn/index.js:12:24)
    at /usr/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/utils/shell.js:81:30
    at Generator.next (<anonymous>)
    at fulfilled (/usr/lib/node_modules/ionic/node_modules/tslib/tslib.js:104:62)
    at <anonymous>

i am trying to build my old ionic 3 app using the new CLI

[jvitor83]

@moda20
You have to change the file ionic.config.json to have the "type" : "angular"

[moda20]

@jvitor83 Thanks that worked, must be noted for the future.

[mburger81]

Can we expect for ioni4 stable release to have full working automatic migration, like we can see and hope in migrate branch :+1: :smile:

[imhoffd]

Hey all, RC 5 is out! It has the new tabs starter, fixes for generators as well as a few other fixes.

@mburger81 Haha, it won't be a fully automatic migration. We don't want to assume too much about a project and we don't want to modify source files. @brandyscarney and I are working on implementing a sort of syntax-checker that peruses source code and identifies possible issues. I believe we'll be putting it into ionic doctor.

[ayush987goyal]

I am getting the below error with RC 5 and angular 6 template while installing the dependencies.
with npm

npm ERR! code E400
npm ERR! 400 Bad Request: assert@^1.1.1

with yarn

error Couldn't find package "assert" on the "npm" registry.

I am running this behind a corporate proxy with all the proxy config set. What should I do?

[imhoffd]

@ayush987goyal Can you inspect the npm debug log? It should print out the file it generated with information about that 400 request. I'm guessing your proxy isn't happy with something.

[ayush987goyal]

I think it was a problem with our corporate npm artifactory. I changed it to the actual npm registry and it worked fine.

[walkingriver]

Are the tabs for Android supposed be at the bottom like this? The two are rendering exactly the same, and that's with npm -D i @ionic/lab@rc

[imhoffd]

@walkingriver I assume that's just a lab issue, correct? The framework is changing the names of the query parameters that allow passing configuration as to which platform to use (android or ios). I'll be fixing this up soon.

[walkingriver]

It might be. I will double check. I don't think so, @dwieeb. Without lab, and telling the Chrome dev tools that it's an android phone, I get this...

And it looks the same in DevApp on a Google Pixel. So I think it might be something in the template.

[imhoffd]

There's a display issue with Ionic Lab that I am working on. In Chrome DevTools, the display will be correct. The tabs component is equivalent to material design's bottom navigation, so this is not an issue.

[ayush987goyal]

With this version of CLI, will we be able to show platform specific components on web?

[rdlabo]

What should I make product build for PWA?

ionic serve and ng serve work well.
But when I execute ionic build --prod and ng build --prod, Ionic Components can't use and display. It seem angular don't read IonicModule
(build was success).

Please try ng serve --prod once.

cli packages: (/Users/sakakibara/dev/ionic-cli/packages)

   @ionic/cli-utils  : 2.0.0-rc.5
   ionic (Ionic CLI) : 4.0.0-rc.5

local packages:

   @angular-devkit/core       : 0.5.7
   @angular-devkit/schematics : 0.5.7
   @angular/cli               : 6.0.0-rc.5
   @ionic/schematics-angular  : 1.0.0-rc.5
   Ionic Framework            : @ionic/angular 4.0.0-alpha.2

System:

   NodeJS : v8.9.3
   npm    : 5.8.0
   OS     : macOS High Sierra

[vksgautam1]

this issue comes if i choose template type blank
my enoviroment
cli packages: (C:\Users\DELL\AppData\Roaming\nvm\v8.9.0\node_modules)

@ionic/cli-utils : 2.0.0-rc.4
ionic (Ionic CLI) : 4.0.0-rc.4

local packages:

@angular-devkit/core : 0.5.7
@angular-devkit/schematics : 0.5.7
@angular/cli : 6.0.0-rc.6
@ionic/schematics-angular : 1.0.0-rc.5
Ionic Framework : @ionic/angular 4.0.0-alpha.2

System:

NodeJS : v8.9.0
npm : 5.5.1
OS : Windows 10

issues
[ERROR] Could not determine project type (project config: .angularionicionic.config.json).

[vdias38]

PWA resources, like manifest, service-workers, are missing from this new release v4. Is it a definitive way or we should wait for new alpha releases to find PWA support ?
It's a little bit confusing, I use same source code for Native App and PWA.
thanks

[wilsolutions]

I got Ionic 4 running fine in Android device and iOS simulator, however I'm getting a blank view in iPhones.

• Command used to deploy to the device:
  ionic cordova run ios --device

• My setup:

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.5
   ionic (Ionic CLI) : 4.0.0-rc.5

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.5.10
   @angular-devkit/schematics : 0.5.10
   @angular/cli               : 6.0.0-rc.6
   @ionic/schematics-angular  : 1.0.0-rc.5
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 4.0.0-alpha.4

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v9.11.1
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

   ANDROID_HOME : /usr/local/opt/android-sdk

[rdlabo]

What should I make product build for PWA?

I confirmed this is fixed by @ionic/angular 4.0.0-alpha.4. thanks.

[DominikTrenz]

The platform provider seems to have no platforms. And i can't find where the platforms are added in the source code. Is it not ready yet?
platform.platforms()

[imhoffd]

@DominikTrenz I think this is being fixed in alpha.5. @jgw96 might be able to explain more

[imhoffd]

Hi all! CLI rc.6 is out and contains a few fixes as well as a schematics update to generate a route for new lazy-loaded pages. Copy the new app-routing.module.ts into your project or start a new app from the updated starters, then use ionic g pg 🎉 Let us know what you think!

[plrthink]

Does theming supported? I have @import "ionic.globals"; in the src/theme/variables.scss file, but the new cli emits the error File to import not found or unreadable: ionic.globals.

[ayush987goyal]

Generated a sidemenu starter app with CLI rc.6. The router navigation is not working. The URL gets updated properly but the router-outlet is not getting updated.

[mhartington]

@ayush987goyal this is fixed in master, just need to release and update the starters for now. Please. see this issue for reference.

https://github.com/ionic-team/ionic/issues/14429

[imhoffd]

@plrthink Theming docs coming soon! We need to fix up a few things first.

[brandyscarney]

@plrthink We have updated the way theming works in the latest version to use CSS Variables. We'll have some updated docs out soon, but you can see a sneak peek of them here: http://ionic-docs.herokuapp.com/docs/theming/basics. This is still a work in progress. 🙂

Also, take a look at the conference app theming files for an updated example: https://github.com/ionic-team/ionic-conference-app/tree/core-update/src

[stupidawesome]

I'd like it if Ionic could add support for Angular Workspaces by passing through the --configuration option to the Angular CLI.

[juanmiguelbesada]

The page generator is adding prefix=app automatically? Is this the expected behaviour or a bug?

I expect "ionic g page Test" to generate a TestPage with selector 'test' or 'page-test' and not 'app-test'

[imhoffd]

@stupidawesome Yeah, gotta keep that in mind.

The tooling is falling a bit behind because I've been working on other stuff, but one of the big next steps is moving the mapping code from the Ionic CLI to the Angular CLI into a locally installed package that can be versioned separately. See #3103.

@juanmiguelbesada Angular selectors must have a hyphen. Running the linter will throw an error if you try to have a component with the selector of 'test'. If you go through the Tour of Heroes tutorial, you'll notice components all have the prefix of the app they're a part of, in the base case, app.

[moda20]

Hey, what are the options for the ionic cli project creation, i can still see only ionic angular and ionic v1 options.

[juanmiguelbesada]

@moda20 did you run

ionic config set -g features.project-angular true

???

[moda20]

@JamiesonWarner Ah i totally forgot that, i reinstalled ionic cli 4 and forgot to do that.
btw is there any release on the ionic 4 framewok that i can upgrade to ?

[timbru31]

Is there any way to capture the browserlogs with the new CLI v4 and @ionic/angular package? The tooling falls back to the Angular CLI (which is great!) and the custom WebSocket connection that was made seems no longer to work.

(Background: I'd like the logs from the DevApp)

[imhoffd]

@timbru31 That would have to be re-implemented in a way that would inject assets into the Angular CLI dev server. I made an issue: https://github.com/ionic-team/ionic-cli/issues/3169 Thanks 👍

[walkingriver]

ionic serve --platform ios doesn't seem to change anything. Shouldn't it render as if it's an iOS device (colors, icons, etc.)?

[imhoffd]

@walkingriver Unfortunately forcing the platform (mode) isn't supported yet (same issue as up here, still: https://github.com/ionic-team/ionic-cli/issues/3019#issuecomment-383317389). I made an issue: https://github.com/ionic-team/ionic-cli/issues/3185

[ayush987goyal]

I have generated a new project and some pages with the CLI. Why does the ionic serve process not reload automatically on file changes?

[walkingriver]

Interesting, @ayush987goyal. I have been experiencing the exact opposite problem. I can only get live updates.

[walkingriver]

The problem I seem to be running into now is that my Ionic Pro builds are failing. Maybe Ionic Pro doesn't support ionic 4 apps yet? The error is...
ERROR in node_modules/@ionic-native/core/decorators/common.d.ts(1,23): error TS2688: Cannot find type definition file for 'cordova'.
Which is odd, because I didn't think I was using Cordova.

[donburgess]

Using ionic@rc as of today's date:

I'm currently working on migrating an angular project to the new version of ionic. Angular-cli updated the --environment flag to be --configuration in v6 but the Ionic CLI skips this flag when parsing ionic build.

ionic build --configuration=foo
Outputs >> ng build

ionic build --environment=foo --configuration=foo
Outputs >> ng build --environment=foo
Unknown option: '--environment'

[cnsimbe]

ionic cordova run ios : results in a blank screen
Same problem as with @wilsolutions
I am using:
ionic 4.0.0-rc.6
cordova 8.0
npm 5.6.0

[boradakash]

Does anybody know good recommendation of using ionic+angular+stencil
I've created angular+ionic4 project but now want to add stencil components
which is the best way of doing it
1. Should I have a separate stencil project and copy build file to angular project
2. Is there a nice way of adding and configuring stencil in an existing(ionic+angular) project ?

[imhoffd]

@walkingriver I was seeing that as well at times. I believe it's an npm bug. I haven't gotten it in a while with latest npm 5/6.

@db3dev @cnsimbe @wilsolutions These issues are related to the webview changes that need to be made. This will be resolved with RC.7 and the new webview plugin (see https://github.com/ionic-team/ionic-cli/issues/3279)

@boradakash Might be a better to ask in the Stencil Slack: https://stencil-worldwide.herokuapp.com/

[imhoffd]

Hi all! 👋 RC.8 is out which features some fairly dramatic differences, aligning more with Angular tooling than ever:

• Full support for Cordova build, run, and livereload on iOS and Android (finally)
  
  
  
  • This is done using @ionic/ng-toolkit and Angular architect commands and "builders" looking for this configuration: https://github.com/ionic-team/starters/commit/2b6e84687a9e6105c0a709cfe0a33627b29c2cdd#diff-2069b61c658907962ec68d54db4b4cf6R118
  
  
• Use npx ng generate directly. See npx ng g --help
  
  
  
  • This may not be the final recommendation (we still may want ionic generate)
  
  
  • npx ng g page is possible from this change: https://github.com/ionic-team/starters/commit/2b6e84687a9e6105c0a709cfe0a33627b29c2cdd#diff-2069b61c658907962ec68d54db4b4cf6R168
  
  
  • Should support all Angular schematics + the Ionic page schematic
  
  

I expect a few rough areas with this release, so please feel free to mention issues.

Testing Instructions

Install latest CLI RC and start a new project:

npm install -g ionic@rc
ionic config set -g features.project-angular true
ionic start

Update to beta version of the webview plugin 2.0. See repo: https://github.com/ionic-team/cordova-plugin-ionic-webview

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

Optionally install the Ionic Native wrapper for the webview plugin. See the PR: https://github.com/ionic-team/ionic-native/pull/2549

npm install @ionic-native/ionic-webview@beta

Use this.webview.convertFileSrc() instead of normalizeUrl() in v3 to convert File URLs from the Camera plugin, etc. (Now necessary for iOS _and_ Android).

[cnsimbe]

@dwieeb is there any documentation on how to use the new CLI?
I am running ionic cordova build android with the new rc.8 and I am getting an error Target 'ionic-cordova-build' could not be found in project 'app'.

[imhoffd]

@cnsimbe That would be because of the changes I mentioned. You will need to make the following modifications listed in this commit if you wish to upgrade your app to RC.8: https://github.com/ionic-team/starters/commit/2b6e84687a9e6105c0a709cfe0a33627b29c2cdd

[cnsimbe]

Thanks @dwieeb
It works fine now!

[mburger81]

@dwieeb
Using a existing [email protected] project with new [email protected] and cordova-plugin-ionic-webview@beta we run in an breaking change.

If we run ionic cordova run andrdoid, now every HTTP call attach as origin header localhost:8080 instead of file:// or none.

This must be a bug and could not be a wanted change, right? We didn't test it on production builds so we don't know if there persist the same error.
But running the command without -lc parmas does simulate a production build without proxy, and so doing a request without proxy attaching wrong origin there is naturally a CORS issue.

[vksgautam1]

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]

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]

@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: https://github.com/ionic-team/ionic-cli/issues/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]

@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]

@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]

@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]

@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]

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

[kinggolf]

@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]

Great to hear @kinggolf!!

I made a new issues for the new launch images: https://github.com/ionic-team/ionic-cli/issues/3319

[wilsolutions]

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]

@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]

@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]

Also, wipe out Cordova generated files for sanity:

rm -rf platforms/ plugins/
cordova prepare

[vksgautam1]

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]

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]

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

[JamieWritesCode]

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]

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

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

[mburger81]

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

[imhoffd]

@TehCrucible css/scss inconsistency is sort of tracked here: https://github.com/ionic-team/ionic-cli/issues/3312

I made a new issue for the --routing option: https://github.com/ionic-team/ionic-cli/issues/3361

[imhoffd]

👋 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:

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]

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

• https://github.com/ionic-team/ionic-cli/issues/3363
• https://github.com/ionic-team/ionic-cli/issues/3357

Please look for the project type: angular label to view issues related to v4 tooling: https://github.com/ionic-team/ionic-cli/labels/project%20type%3A%20angular

[jeugregg]

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