The ionic species is not a known element.

Question

The following is my content for the ion page:

    <ion-content padding class = ""view-content">
    <form>
        [form content here...]
    </form>
    </ion-content>

my css file:

.view-content {
    background: url("background.jpg");

but it does not work, and I get the following error:

Unhandled Promise rejection: Template parse errors:
'ion-view' is not a known element:
1. If 'ion-view' is an Angular component, then verify that it is part of this module.
2. If 'ion-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<ion-view view-title="My Page">
<ion-content>
 Hello!
")

Can someone tell me what I'm doing wrong here or how to solve it. I am new to ionic structure, new to web development.

Answer 1

The ionic species is a valid component in ionic version 1 and is not available in version 2.

To set the background image, you can set the css class and set the "background" attribute

<ion-content class="view-class">
 Hello!
</ion-content>

In your respective scss

.view-class {
   background: url("path_to_image")
}

EDIT: plunker sample

Answer 2

ion-view - , .

Answer 3

i , ,

<ion-view view-title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>

, ion-view , .

angular2, app.module.ts, angular, .

@NgModule({
  declarations: [
    here component list, directives and pipes
  ],
  imports: [
    ion-view, etc.....
  ],
  providers: [CanActivateViaAuthGuard, GlobalService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 4

In appearance, I think that the page or component that you created is in a separate module. Please add the IonicModule import to this module and import this module into the application module.

import { NgModule } from "@angular/core";
import { ItemsComponent } from "./items/items";
import { ItemComponent } from "./item/item";
import { IonicModule } from "ionic-angular";

@NgModule({
  declarations: [ItemsComponent, ItemComponent],
  imports: [IonicModule],
  exports: [ItemsComponent, ItemComponent]
})
export class ComponentsModule {}