Ionic 4 ionic-angular is not a known element

Question

I am taking my first shot at ionic 4. I created a new project:

ionic start newApp blank --type=ionic-angular

I am used to ionic-angular.

In package.json I have the following:

{
  "name": "courier-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "ionic-angular": "^3.9.3",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

You can clearly see that ionic-angular is having the version 3.9 which is the latest:

"ionic-angular": "^3.9.3"

The IonicModule is imported into app.module.ts, though, I set the LoginPage as the root page to be loaded first:

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

In app.component.ts:

rootPage:any = LoginPage;

When I added a login button to my Login page:

<ion-button (click)="login()">Login</ion-button>

I've got an error saying:

<ion-button> is not a known element

Using the answer of this post, I change it to:

<button ion-button ...>Login</button>

But as I know, the behavior of components in ionic 4 (whatever the type was), is to use <ion-button> and not <button ion-button>

Is there any missing imports, or this just the new behavior of ionic 4 type ionic-angular ?

Possible duplicate of [Ionic button showing 'ion-button' is not a known element](https://stackoverflow.com/questions/51544863/ionic-button-showing-ion-button-is-not-a-known-element) — Tushar Walzade, Feb 19 '19 at 08:23
Its an ionic 3 project as shown in your package.json. `ionic-angular` Not ionic 4 — Suraj Rao, Feb 19 '19 at 08:27

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

To start an Ionic 4 project you MUST

append --type=angular

to your start command!

ionic start project1 blank --type=angular

Otherwise, the CLI will generate an Ionic 3 project, and hence those samples will fail.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 19 '19 at 08:23

Sajeetharan

216,225
63
350
396

Okay, so the new ionic 4 only works with `type=angular` ? – alim1990 Feb 19 '19 at 08:33

Ionic 4 ionic-angular is not a known element

1 Answers1