ionic 3 typescript error 'ion-footer' is not a known element


#1

Hi all i hope u’re doing good . i have a serious problem . i finished my app build and publish it on android and when o move to ios (i build on VMware) when i run normal ios build it works but i make build ios --prod i gives me these error :

typescript error 
        'ion-icon' is not a known element: 1. If 'ion-icon' is an Angular component, then verify that it is part of 
        this module. 2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the 
        '@NgModule.schemas' of this component to suppress this message. ("-footer class="footer-style-dark"> 
        <ion-toolbar> <ion-title (click)="openAppointment()"> [ERROR ->]<ion-icon class="home"></ion-icon> 
        <span>Book appointment</span></ion-title> </ion-toolbar> </i") 
[17:35:34] typescript error 'ion-title' is not a known element: 1. If 'ion-title' is an Angular component, then verify that it is part of this module. 2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] Book appointment

[17:35:34] typescript error 'ion-toolbar' is not a known element: 1. If 'ion-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'ion-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]

[17:35:34] typescript error 'ion-footer' is not a known element: 1. If 'ion-footer' is an Angular component, then verify that it is part of this module. 2. If 'ion-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

Error: The Angular AoT build failed. See the issues above at /Users/x/Desktop/mybeauty/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55 at step (/Users/x/Desktop/mybeauty/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23) at Object.next (/Users/x/Desktop/mybeauty/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53) at fulfilled (/Users/x/Desktop/mybeauty/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58) [17:35:34] copy finished in 23.22 s

i have multipe page . i added on html file after ion-content . this code order now i searched for solutions i triend many , but dosen’t work for me ,

i tried to add CUSTOM_ELEMENTS_SCHEMA to app.module.ts and all pages.module.ts
i tried CUSTOM_ELEMENTS_SCHEMA & NO_ERRORS_SCHEMA . add it and
import it . but not work . the prbolem is i have deleted that footer from all page . but it gives me the same error .
i tried to import ionicmodule on all pages.module.ts .
can u please help me , i need to publish this app on ios asap .


#2

Hello,

you are on ionic 2+, then there is no need for ionic element to add CUSTOM_ELEMENTS_SCHEMA. Remove it,

Typically this fault arise with custom component, when they arenot added correct to ngmodule, but with ionic element this is not necessary.

What you mostly have, is a typo like wrong written or < or…

If you are sure you have no typos anymore and error is not going away. Stop cli, delete content of www folder and try it again.

Best regards, anna-liebt


#3

thanks ana for u’re reply , i really ned to reslove this asap . about the code this my the footer i have added on my pages :slight_smile:

<ion-footer >
  <ion-toolbar color="primary">
      <ion-title  (click)="openAppointment()" text-center>  <ion-icon name="md-calendar" style="font-size: 25px;"></ion-icon> &nbsp;<span>  Prenez rendez-vous</span></ion-title>
    </ion-toolbar>
</ion-footer>

it’s correct as i see , i take it from ionic documentation and make some changes .
what do you mean by stop cli ? (stopping ionic serve ?)
i’ll delete www content and try again .

i tried to copy paste all the projet from windows to ios and rebuild node_modules & create new projet and copy past necessary folder but errors steel the same .
thank u again Anna.


#4

Hello,

hmmm loooks good. https://ionic-baarhl.stackblitz.io

Could you post your complete html?

Best regards, anna-liebt


#5

Stop cli. Yes stopping ionic serve, cdelete content of www folder under src in your project, that I must rebuild completly. Also clear browser cache. Sometimes old whatever is coming from them.

Best regards, anna-liebt


#6

im using ionic 3 i think www in out of src folder . (should i delete it ? )
here is my pages :slight_smile:

> <!--
>   Generated template for the OffersPage page.
> 
>   See http://ionicframework.com/docs/components/#navigation for more info on
>   Ionic pages and navigation.
> -->
> <ion-header>
> 
>   <ion-navbar>
>     
>     
>     <ion-title>En promotion </ion-title>
>     <ion-buttons end>
>         <button ion-button icon-only (click)="callnow()">
>           <ion-icon name="ios-call"></ion-icon>
>         </button>
>         <button ion-button icon-only>
>           <ion-icon name="md-share" (click)="share()"></ion-icon>
>         </button>
>       </ion-buttons>
>   </ion-navbar>
> 
> </ion-header>
> 
> 
> <ion-content padding>
>     <ion-card *ngFor="let deal of deals ">
>         <ion-row >
>             <ion-col col-6 col-sm-2 col-md-2 col-lg-2 col-xl-2>
>                 <span class="deal--label deal--label--blue">{{promo(deal.price,deal.new_price)}}</span>                
>               <img src="{{deal.img.guid}}" height="100%"/></ion-col>
>             <ion-col col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3>
>                 
>               <h1><strong>{{deal.title.rendered}}</strong></h1>
>             
>                 
>                   <ion-label style="font-weight: bold;" >
>                     Date d'expiration  </ion-label>
>                   <strong ion-text color="redd">{{deal.dat}}</strong>
>                   <ion-label style="font-weight: bold;">Prix  </ion-label>
> 
>                   <strong ion-text color="redd" class="linee" >{{deal.price}}</strong> &emsp;<strong ion-text color="primary" > {{deal.new_price}} </strong>
>                   <br>
>                   <div class="deal--grab">
>                       <button ion-button (click)="grabDeal(deal.title.rendered)" color="greenn">profitez-vous</button>
>                     </div>
>                 </ion-col>            
>           </ion-row>
>           
>       </ion-card>
>    
> 
>    
> </ion-content>
> <ion-footer >
>   <ion-toolbar color="primary">
>       <ion-title  (click)="openAppointment()" text-center>  <ion-icon name="md-calendar" style="font-size: 25px;"></ion-icon> &nbsp;<span>  Prenez rendez-vous</span></ion-title>
>     </ion-toolbar>
> </ion-footer>
<!--
  Generated template for the SpecialistPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Notre équipe</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="callnow()">
          <ion-icon name="ios-call"></ion-icon>
        </button>
        <button ion-button icon-only (click)="share()">
          <ion-icon name="md-share" ></ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content class="back-grey">
    
  <ion-grid>
    <ion-row>
      <ion-col col-12  col-md-6 col-lg-3 col-xl-3 *ngFor="let item of serv">
        <ion-card>
          <img src="{{item.photo.guid}}" height="200px"/>
          
            <button ion-button icon-start style="width:48%">
                <ion-icon name="md-person"></ion-icon>
                {{item.spe_name}}
              </button>
              <button ion-button icon-start style="width:48%">
                  <ion-icon name="cut"></ion-icon>
                  {{item.spe_spe}}
                </button>

        </ion-card>
      </ion-col> 
    </ion-row>
  </ion-grid>
    
  </ion-content>
  <ion-footer >
      <ion-toolbar color="primary">
          <ion-title  (click)="openAppointment()" text-center>  <ion-icon name="md-calendar" style="font-size: 25px;"></ion-icon> &nbsp;<span>  Prenez rendez-vous</span></ion-title>
        </ion-toolbar>
    </ion-footer>
<!--
  Generated template for the ServicepagePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{titl}}</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="callnow()">
          <ion-icon name="ios-call"></ion-icon>
        </button>
        <button ion-button icon-only (click)="share()">
          <ion-icon name="md-share" ></ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col col-12  col-md-6 col-lg-3 col-xl-3 *ngFor="let ser of serv;let i = index">
        <ion-card>
          <img src="{{ser.img.guid}}" height="200px"/>
          
            <ion-item>
              <ion-label > {{ ser.title.rendered }}</ion-label>
              <button ion-button clear item-end class="roundButton"  (click)="ser.id = !ser.id">
                 <ion-icon name="ios-arrow-down" item-end></ion-icon>
               </button>
            </ion-item>
            <ion-item *ngIf="!ser.id">
              <ion-item text-wrap>
                  <p>
                      {{ser.desc}}
                    </p>
              </ion-item>
              
                <ion-item>
                  <ion-icon name="clock" item-start></ion-icon>
                  Temps : 
                  <ion-badge item-end>{{ser.tim}}</ion-badge>
                </ion-item>
                <ion-item>
                  <ion-icon name="cash" item-start></ion-icon>
                  Prix : 
                  <ion-badge item-end>{{ser.price}}</ion-badge>
                </ion-item>
              
             
              
            </ion-item>  
        </ion-card>
      </ion-col> 
    </ion-row>
  </ion-grid>
 
</ion-content>
<ion-footer >
    <ion-toolbar color="primary">
        <ion-title  (click)="openAppointment()" text-center>  <ion-icon name="md-calendar" style="font-size: 25px;"></ion-icon> &nbsp;<span>  Prenez rendez-vous</span></ion-title>
      </ion-toolbar>
  </ion-footer>

and here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule} from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { ReactiveFormsModule} from '@angular/forms';
import {EmailComposer} from '@ionic-native/email-composer';
import { CallNumber } from '@ionic-native/call-number';



import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';
import { AppointmentPage } from '../pages/appointment/appointment';
import { ContactusPage } from '../pages/contactus/contactus';

import { OffersPage } from '../pages/offers/offers';
import { ServicepagePage } from '../pages/servicepage/servicepage';
import { SpecialistPage } from '../pages/specialist/specialist';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthProvider } from '../providers/auth/auth';
import { ClientsProvider } from '../providers/clients/clients';
import { HttpClientModule } from '@angular/common/http';
import { SocialSharing } from '@ionic-native/social-sharing';
import { AppRate } from '@ionic-native/app-rate';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AppointmentPage,
    ContactusPage,
    AboutPage,
    OffersPage,
    ServicepagePage,
    SpecialistPage



    


   


  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    ReactiveFormsModule,
     
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AppointmentPage,
    ContactusPage,
    AboutPage,
    OffersPage,
    ServicepagePage,
    SpecialistPage

 
   
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthProvider,
    ClientsProvider,
    EmailComposer,
    CallNumber,
    SocialSharing,
    AppRate
    ]
})
export class AppModule {
  
}

i used lazy loading it gives me the errors above , so i tried to remove all pages.modules.ts & import all pages on app.modume.ts but still the same .

Thank u again for u’re reply Anna .


#7

Hello,

from your first code. Where all > comes from? Are this > really in your code page?

Best regards, anna-liebt


#8

Sorry , no its only here . my code is like other pages .
thank u anna for u’re support . should i deleted www content ?
i


#9

Hello,
f…, because that would be such thing for unknown element.

yes, you can delete content of www folder, also .sourcemaps. Every thing from src is copied into www folder, for example assets or any code that is build. This is the case why you never should put anything yourself into www folder. If you delete content in www folder everything is copied and build again from scratch. Also clear cache on browser.

Best regards, anna-liebt


#10

Hello,

i removed < from first and copied html to


Static content renders without problem.

Best regards, anna-liebt


#11

hi anna , i hope u’re doing good , i tried to remove www files and build release file but i dosen’t work .
android release works fine but the ios one dosen’t .
ionic serve works good all good except ios release build . (ionic cordova build ios works also)
can u please help me to find a solution ?
is there any possibilty to send u my project and try to build it on ios ?
i really need to upload the ios version asap .


#12

Hello,

That only on ios is not working is strange. Maybe if you build with --verbose, that will give another hint.

Sorry I can not build for ios.

Best regards, anna-liebt


#13

I don’t believe this.