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.

[ghost]

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

[ghost]

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