How to install Ionic 4 and Angular (or Stencil?)

Hey there!

I searched on the web all the morning. Can’t find how to install Ionic 4 with Angular (or even Stencil)…
I know the final version of Ionic 4 isn’t released but I know there is some kind of alpha version out there.

I want to use Capacitor + Ionic4 and Angular (or Stencil) to begin to build a new app, this will be a waste of time to develop under Ionic 3 then switch to Ionic 4.

Thanks in advance.

1 Like

There’s no official guide on how to use the new stack yet. We need to wait at least two months to get an official guide.

Where did you find the 2 months timeframe?

We still can manually install theses verisons, for testing only obviously.
We also need to update the package.json with the last version of the dependent ionic package (ionic-native etc…) or use Capacitor (lastest version too).

It’s working, I mean, I can build something, but the features aren’t all here obviously.

You could use Angular Schematics to create the scaffolding for a new project, for example: https://robferguson.org/blog/2017/12/31/the-future-of-the-ionic-cli/

And: https://github.com/Robinyo/ionic-angular-schematics

I’m just guessing based on my observation so far. Maybe you’ll see an official installation guide by September.

Good stuff! Cant wait to plunge more into the full angular suite.

Now we just need a bit more sugar in a cli to cover for all the flags and options

And curious to see how Ionic Pro is going to support cloud builds with the various frameworks

Hopefully it will be into the release candidates by then, but if you look at the old Ionic 2 and Ionic 3 release log (here) you can see that it took almost 1 year to move from Ionic 2 beta to 2.0.0 official release.

Ionic 4 is still in alpha, and then the beta will take many months before it’s ready for production code based on history. Ionic 3 was a much faster release cycle, but Ionic 4 seems to be a fairly major change to the codebase so it’s probably better to use Ionic 2 release for a reference point.

We also have to take into account that the Ionic team is spread a little bit more thin now with a focus on Capacitor, Stencil, and Ionic Native 5. These are awesome projects and super useful for us as Ionic developers, but they also might mean that Ionic 4 could still be a ways out.

1 Like

Hi

one way is to enable CUSTOM_ELEMENTS_SCHEMA and include the ionic package in index.html

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tom</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script src="https://unpkg.com/@ionic/core@0.1.4-8/dist/ionic.js"></script>
  <app-root></app-root>
</body>
</html>

Fairly easy

Tom