web-dev-qa-db-fra.com

carte ion n'est pas un élément connu

Je suis nouveau à angular et ionique. j'utilise
"@ angular/formes": "^ 4.3.1" "ionique-angulaire": "^ 3.5.3"
J'ai installé le package ionic-angular et @ angular/forms. Je reçois le message d'erreur suivant.

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>

toute pensée pour y remédier sera vraiment appréciée.

 Code that I have with me. both ts and html files

J'ai placé le dans le et c'est aussi commencé à se plaindre. S'il vous plaît voir l'image ci-dessous.

 screen shot of the errors received

quand je lance "info ionique". Je reçois le message suivant dans le 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

Je suis en train de créer une bibliothèque où je disposerai de tous les composants nécessaires, puis de les utiliser dans un projet séparé.

 "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"
  }

Je suis nouveau à ionique et angulaire.

angularionic3
5
Qasim Raza

De votre code ci-dessus, vous avez manqué de fermer votre carte ion.

<ion-card>

  <ion-card-header>

  </ion-card-header>

</ion-card>

Mise à jour 1:

Nombre de problèmes que je vois dans votre code,

Le sélecteur doit avoir le même nom que votre .ts fichier

@Component({
 selector: 'ionic-test.component',
 templateUrl: 'ionic-test.component.html'
})

Assurez-vous que vos balises de composant sont dans ion-content . Par exemple,

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

Essayez de déplacer votre fichier .scss vers ion-content et modifiez le nom du fichier .scss.

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

</ion-content>

Assurez-vous également que le fichier .ts, .html, .scss se trouve dans le même dossier racine.

Mise à jour 2:

Les choses possibles qui ont mal tourné en fonction de votre récente édition,

  1. Le dossier node_modules n’a pas été créé et contient toutes les bibliothèques. Accédez à la racine de votre projet dans Terminal et exécutez la commande ci-dessous. Il installera tous les modules à partir de votre package.json fichier.

    npm install

Remarque: Pour savoir si les modules de noeud du fichier package.json sont installés, exécutez la commande ci-dessous en vous rendant à la racine du projet dans Terminal.

 npm info
  1. Lors de la création du projet ionique, vous n'avez pas suivi les étapes correctes, suivez les étapes décrites dans la documentation ionique } et créez un nouveau projet comme indiqué pour voir s'il fonctionne.
1
Vikram Ezhil
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 {
}

Merci Vikram Ezhil pour votre temps.

Cependant, les thèmes supportés par Ionic par défaut ne fonctionnent toujours pas.

1
Qasim Raza