@Teazy wrote:
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>
Posts: 1
Participants: 1