Import custom component module problem


#1

Hello,

I had a problem importing component on my page.

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ComponentsModule } from '../../components/components.module';


@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(HomePage),
  ],
  entryComponents: [
    HomePage
  ],
})
export class HomePageModule {}

components.module.ts

import { NgModule } from '@angular/core';
import { PopupComponent } from './popup/popup';
import { MapCardComponent } from './map-card/map-card';
@NgModule({
	declarations: [
		PopupComponent,
    MapCardComponent
	],
	imports: [],
	exports: [
		PopupComponent,
    MapCardComponent
	]
})
export class ComponentsModule {}

Getting this error

core.js:1350 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'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. (" === true">
  <button ion-button icon-only clear class="popup__close" (click)="closePopup()">
      [ERROR ->]<ion-icon name="close" color="white"></ion-icon>
  </button>
  <div *ngIf="title" class="popup__title"): ng:///ComponentsModule/PopupComponent.html@2:6
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
      <ion-icon name="close" color="white"></ion-icon>
  </button>
  <div [ERROR ->]*ngIf="title" class="popup__title">{{title}}</div>
  <div *ngIf="message" class="popup__message">{{me"): ng:///ComponentsModule/PopupComponent.html@4:7
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      <ion-icon name="close" color="white"></ion-icon>
  </button>
  [ERROR ->]<div *ngIf="title" class="popup__title">{{title}}</div>
  <div *ngIf="message" class="popup__message""): ng:///ComponentsModule/PopupComponent.html@4:2
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
  </button>
  <div *ngIf="title" class="popup__title">{{title}}</div>
  <div [ERROR ->]*ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-input "): ng:///ComponentsModule/PopupComponent.html@5:7
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
  </button>
  <div *ngIf="title" class="popup__title">{{title}}</div>
  [ERROR ->]<div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-i"): ng:///ComponentsModule/PopupComponent.html@5:2
Can't bind to 'ngModel' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("up__message">{{message}}</div>
  <div class="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ERROR ->][ngModel]="inputData" [type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged("): ng:///ComponentsModule/PopupComponent.html@7:40
Can't bind to 'type' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'type' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("}}</div>
  <div class="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [ERROR ->][type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [placeholder]"): ng:///ComponentsModule/PopupComponent.html@7:62
Can't bind to 'value' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [ERROR ->][value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [placeholder]="inputPlaceholder"><"): ng:///ComponentsModule/PopupComponent.html@7:83
Can't bind to 'placeholder' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (""inputData" [type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [ERROR ->][placeholder]="inputPlaceholder"></ion-input>
    <button (click)="submit()" *ngIf="inputPlaceholder""): ng:///ComponentsModule/PopupComponent.html@7:150
'ion-input' is not a known element:
1. If 'ion-input' is an Angular component, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    [ERROR ->]<ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultV"): ng:///ComponentsModule/PopupComponent.html@7:4
Can't bind to 'ngIf' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-input [ERROR ->]*ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultValue" (ngMo"): ng:///ComponentsModule/PopupComponent.html@7:15
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
  <div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    [ERROR ->]<ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultV"): ng:///ComponentsModule/PopupComponent.html@7:4
'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. ("r"></ion-input>
    <button (click)="submit()" *ngIf="inputPlaceholder" ion-button icon-only>
      [ERROR ->]<ion-icon name="arrow-forward"></ion-icon>
    </button>
  </div>
"): ng:///ComponentsModule/PopupComponent.html@9:6
Can't bind to 'ngIf' since it isn't a known property of 'button'. (""inputChanged($event)" [placeholder]="inputPlaceholder"></ion-input>
    <button (click)="submit()" [ERROR ->]*ngIf="inputPlaceholder" ion-button icon-only>
      <ion-icon name="arrow-forward"></ion-icon>
    <"): ng:///ComponentsModule/PopupComponent.html@8:31
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("aultValue" (ngModelChange)="inputChanged($event)" [placeholder]="inputPlaceholder"></ion-input>
    [ERROR ->]<button (click)="submit()" *ngIf="inputPlaceholder" ion-button icon-only>
      <ion-icon name="arrow"): ng:///ComponentsModule/PopupComponent.html@8:4
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div class="popup" [ERROR ->]*ngIf="isVisible === true">
  <button ion-button icon-only clear class="popup__close" (click)="closeP"): ng:///ComponentsModule/PopupComponent.html@0:19
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]<div class="popup" *ngIf="isVisible === true">
  <button ion-button icon-only clear class="popup__clo"): ng:///ComponentsModule/PopupComponent.html@0:0
Error: Template parse errors:
'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. (" === true">
  <button ion-button icon-only clear class="popup__close" (click)="closePopup()">
      [ERROR ->]<ion-icon name="close" color="white"></ion-icon>
  </button>
  <div *ngIf="title" class="popup__title"): ng:///ComponentsModule/PopupComponent.html@2:6
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
      <ion-icon name="close" color="white"></ion-icon>
  </button>
  <div [ERROR ->]*ngIf="title" class="popup__title">{{title}}</div>
  <div *ngIf="message" class="popup__message">{{me"): ng:///ComponentsModule/PopupComponent.html@4:7
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      <ion-icon name="close" color="white"></ion-icon>
  </button>
  [ERROR ->]<div *ngIf="title" class="popup__title">{{title}}</div>
  <div *ngIf="message" class="popup__message""): ng:///ComponentsModule/PopupComponent.html@4:2
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
  </button>
  <div *ngIf="title" class="popup__title">{{title}}</div>
  <div [ERROR ->]*ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-input "): ng:///ComponentsModule/PopupComponent.html@5:7
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
  </button>
  <div *ngIf="title" class="popup__title">{{title}}</div>
  [ERROR ->]<div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-i"): ng:///ComponentsModule/PopupComponent.html@5:2
Can't bind to 'ngModel' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("up__message">{{message}}</div>
  <div class="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ERROR ->][ngModel]="inputData" [type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged("): ng:///ComponentsModule/PopupComponent.html@7:40
Can't bind to 'type' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'type' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("}}</div>
  <div class="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [ERROR ->][type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [placeholder]"): ng:///ComponentsModule/PopupComponent.html@7:62
Can't bind to 'value' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="popup__input">
    <ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [ERROR ->][value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [placeholder]="inputPlaceholder"><"): ng:///ComponentsModule/PopupComponent.html@7:83
Can't bind to 'placeholder' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (""inputData" [type]="type" #input [value]="inputDefaultValue" (ngModelChange)="inputChanged($event)" [ERROR ->][placeholder]="inputPlaceholder"></ion-input>
    <button (click)="submit()" *ngIf="inputPlaceholder""): ng:///ComponentsModule/PopupComponent.html@7:150
'ion-input' is not a known element:
1. If 'ion-input' is an Angular component, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    [ERROR ->]<ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultV"): ng:///ComponentsModule/PopupComponent.html@7:4
Can't bind to 'ngIf' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    <ion-input [ERROR ->]*ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultValue" (ngMo"): ng:///ComponentsModule/PopupComponent.html@7:15
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
  <div *ngIf="message" class="popup__message">{{message}}</div>
  <div class="popup__input">
    [ERROR ->]<ion-input *ngIf="inputPlaceholder" [ngModel]="inputData" [type]="type" #input [value]="inputDefaultV"): ng:///ComponentsModule/PopupComponent.html@7:4
'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. ("r"></ion-input>
    <button (click)="submit()" *ngIf="inputPlaceholder" ion-button icon-only>
      [ERROR ->]<ion-icon name="arrow-forward"></ion-icon>
    </button>
  </div>
"): ng:///ComponentsModule/PopupComponent.html@9:6
Can't bind to 'ngIf' since it isn't a known property of 'button'. (""inputChanged($event)" [placeholder]="inputPlaceholder"></ion-input>
    <button (click)="submit()" [ERROR ->]*ngIf="inputPlaceholder" ion-button icon-only>
      <ion-icon name="arrow-forward"></ion-icon>
    <"): ng:///ComponentsModule/PopupComponent.html@8:31
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("aultValue" (ngModelChange)="inputChanged($event)" [placeholder]="inputPlaceholder"></ion-input>
    [ERROR ->]<button (click)="submit()" *ngIf="inputPlaceholder" ion-button icon-only>
      <ion-icon name="arrow"): ng:///ComponentsModule/PopupComponent.html@8:4
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div class="popup" [ERROR ->]*ngIf="isVisible === true">
  <button ion-button icon-only clear class="popup__close" (click)="closeP"): ng:///ComponentsModule/PopupComponent.html@0:19
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]<div class="popup" *ngIf="isVisible === true">
  <button ion-button icon-only clear class="popup__clo"): ng:///ComponentsModule/PopupComponent.html@0:0
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24312)
    at JitCompiler._parseTemplate (compiler.js:33699)
    at JitCompiler._compileTemplate (compiler.js:33674)
    at compiler.js:33576
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33576)
    at compiler.js:33446
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33445)
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24312)
    at JitCompiler._parseTemplate (compiler.js:33699)
    at JitCompiler._compileTemplate (compiler.js:33674)
    at compiler.js:33576
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33576)
    at compiler.js:33446
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33445)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4617)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

#2

same problem, did you solve it?


#3

See: Ionic component styles not applied inside custom components

You need to import IonicModule in your components.module.ts


#4

already done, still the error message


#5

Did you figure this out?


#6

See:


Whenever i am trying to make ionic3 production build it comes up with “custom component error”