ion-card is not a known element

Question

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 message.

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 will be really appreciated.

I have placed the into the and its also started complaining about . Please see the image below.

when I run "ionic info". I get 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

---

I am basically in the process of making a library where I will have all components needed and then I will use these component in a seperate 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.

Answer 1

From your above code, you have missed to close your ion-card.

<ion-card>

  <ion-card-header>

  </ion-card-header>

</ion-card>

Update 1:

Number of issues I see in your code,

Selector should 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 ion-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 ion-content and change the .scss name to something different.

<ion-content class="ionic-test.component.styles">

</ion-content>

Also make sure the .ts, .html, .scss file are in the same root folder

Update 2:

Possible things which went wrong based on your recent edit,

1. You don't have the node_modules folder created which has all the libraries, go to your project root in Terminal and run the below command. It will install all the modules from your package.json file.

   npm install

Note: To see if node modules from package.json file are installed just run the below command by going to your project root in Terminal

 npm info

2. When creating the ionic project, you didn't follow the correct steps, follow the steps as per the ionic documentation and create a new project as outlined to see if it is working