ion-card不是一个已知元素。

Question

ion-card不是一个已知元素。

7

我是Angular和Ionic的新手。我正在使用
"@angular/forms": "^4.3.1" "ionic-angular": "^3.5.3"
我已经安装了ionic-angular和@angular/forms包。我正在收到以下错误消息。

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>

任何修复的想法都将不胜感激。

我已将放置在中，它也开始抱怨 . 请参见下面的图片。

当我运行“ionic info”时，在终端中会收到以下消息。

$ 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

我正在制作一个图书馆，其中包含所有所需的组件，然后我将在另一个项目中使用这些组件。

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

我是ionic和angular的新手。

- Qasim Raza

请展示您的主要 app.module.ts 和 app.component.ts 文件。 - henrikmerlander

请勿将您的代码作为图像发布。 - Suraj Rao

4个回答

1

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

感谢Vikram Ezhil抽出时间。

然而，Ionic默认支持的主题仍然无法正常工作。

- Qasim Raza

1

尝试在组件的Ts中添加IonicModule的import，并确保通过添加使该模块成为独立模块

@Component({
standalone: true,
imports: [IonicModule] )}

这对我在 Ionic 6 应用中起作用。希望它能帮到你。(:

- Arodi Haro Palacios

1

我通过在 tsconfig.app.json 中禁用 Angular Ivy 编译器来解决了这个问题。

"angularCompilerOptions": {
    "enableIvy": false 
}, 
...

- Mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikram Ezhil · Accepted Answer

根据您的代码，您忘记关闭ion-card标签。

<ion-card>

  <ion-card-header>

  </ion-card-header>

</ion-card>

更新1：

我在你的代码中看到了一些问题，

选择器应该与你的.ts文件名称相同。

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

请确保您的组件标签位于ion-content内。例如，

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

尝试将您的.scss文件移动到ion-content中，并将.scss文件的名称更改为不同的名称。

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

</ion-content>

请确保.ts、.html、.scss文件在同一根目录下。

更新2：

根据您最近的编辑，可能出现以下问题：

您没有创建包含所有库的node_modules文件夹，请在终端中转到项目根目录并运行以下命令。它将从package.json文件中安装所有模块。

npm install

注意：要查看是否已安装package.json文件中的节点模块，请通过转到终端中的项目根目录并运行以下命令。

 npm info

创建 Ionic 项目时，您没有按照正确的步骤进行操作。请按照 Ionic 文档中所述的步骤创建一个新项目并查看是否正常运行。