Ionic map is not a known element
I am new to angular and Ionic. I am using "@ angular / forms": "^ 4.3.1" "ionic angular": "^ 3.5.3"
I have installed the ionic-angular and @ angular / forms package. I am getting the following error.
Unhandled Promise rejection: Template parse errors:
'ion-card-header' is not a known element:
1. If 'ion-card-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-card>
[ERROR ->]<ion-card-header>
Header
</ion-card-header>
any thought how to fix it would be really appreciated.
I put it in and started complaining. See image below.
when I run "ionic information". I am getting the following message in the terminal.
$ ionic info
[WARN] You are not in an Ionic project directory. Project context may be
missing.
global packages:
@ionic/cli-utils : 1.5.0
Ionic CLI : 3.5.0
System:
Node : v6.11.1
OS : Windows 10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.10
Basically I am creating a library where I will have all the necessary components, and then I will use this component in a separate project.
"dependencies": {
"@angular/forms": "^4.3.1",
"ionic-angular": "^3.5.3",
"ionicons": "^3.0.0"
},
"peerDependencies": {
"@angular/common": "^4.0.0",
"@angular/core": "^4.0.0"
},
"devDependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@compodoc/compodoc": "^1.0.0-beta.9",
"@types/jasmine": "^2.5.47",
"@types/karma": "^0.13.35",
"@types/node": "^7.0.18",
"@types/webpack": "^2.2.15",
"@types/webpack-env": "^1.13.0",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"codecov": "^2.2.0",
"codelyzer": "^3.0.1",
"concurrently": "^3.4.0",
"css-loader": "^0.28.1",
"gh-pages": "^1.0.0",
"gulp": "^3.9.1",
"gulp-inline-ng2-template": "^4.0.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "^2.6.1",
"json-loader": "^0.5.4",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.3",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"node-sass": "^4.5.2",
"raw-loader": "^0.5.1",
"rimraf": "2.6.1",
"rxjs": "^5.3.1",
"sass-loader": "^6.0.5",
"source-map-explorer": "^1.3.3",
"to-string-loader": "^1.1.5",
"ts-node": "^3.0.4",
"tslint": "^5.2.0",
"typescript": "2.4.0",
"webpack": "^2.5.1",
"webpack-angular-externals": "^1.0.2",
"webpack-rxjs-externals": "^1.0.0",
"zone.js": "^0.8.10"
}
I am new to ionic and angular.
source to share
From your above code, you missed to close your ionic map.
<ion-card>
<ion-card-header>
</ion-card-header>
</ion-card>
Update 1:
The number of problems I see in your code is
The selector must have the same name as your .ts file
@Component({
selector: 'ionic-test.component',
templateUrl: 'ionic-test.component.html'
})
Make sure your component tags are inside ionic content . For example,
<ion-content>
<ion-grid>
<ion-row> </ion-row>
<ion-row> </ion-row>
</ion-grid>
<ion-card>
<ion-card-header>
</ion-card-header>
</ion-card>
</ion-content>
Try moving your .scss to ionic content and change the .scss name to something else.
<ion-content class="ionic-test.component.styles">
</ion-content>
Also make sure the .ts, .html, .scss files are in the same root folder
Update 2:
Possible things that went wrong based on your recent editing,
-
You don't have a node_modules folder created that has all the libraries, go to your project root in Terminal and run the command below. It will install all modules from your package.json file .
npm install
Note. ... To see if node modules are installed from package.json file, just run below command by going to project root in terminal
npm info
- When creating an ionic project you did not follow the correct steps, follow the instructions as per ionic documentation and create a new project as directed to make sure it works.
source to share
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyCustomModule } from '../../lib';
@NgModule({
imports: [
BrowserModule,
MyCustomModule,
IonicModule.forRoot(AppComponent)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
Thanks to Vikram Ejil for your time.
However, the default Ionic-supported theme still doesn't work.
source to share