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

Ionic Framework ionic-v3
1

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
2

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.

3

Where did you find the 2 months timeframe?

4

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.

5

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: GitHub - Robinyo/ionic-angular-schematics: Schematics for Ionic Angular

6

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

7

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

8

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
9

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