[英]'ion-header' is not a known element ionic 5
以下是我采取的步驟
我收到以下錯誤
ERROR in src/app/pages/main/main.page.html:1:1 - error NG8001: 'ion-header' is not a known element:
1. If 'ion-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
1 <ion-header>
~~~~~~~~~~~~
src/app/pages/main/main.page.ts:5:16
5 templateUrl: './main.page.html',
~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:2:3 - error NG8001: 'ion-toolbar' is not a known element:
1. If 'ion-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'ion-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
this message.
2 <ion-toolbar>
~~~~~~~~~~~~~
src/app/pages/main/main.page.ts:5:16
5 templateUrl: './main.page.html',
~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:3:5 - error NG8001: 'ion-title' is not a known element:
1. If 'ion-title' is an Angular component, then verify that it is part of this module.
2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3 <ion-title>main</ion-title>
~~~~~~~~~~~
src/app/pages/main/main.page.ts:5:16
5 templateUrl: './main.page.html',
~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:7:1 - error NG8001: 'ion-content' is not a known element:
1. If 'ion-content' is an Angular component, then verify that it is part of this module.
2. If 'ion-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
this message.
7 <ion-content>
~~~~~~~~~~~~~
我錯過了一些非常明顯的東西。
以下是代碼
應用程序模塊.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
應用程序路由.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./pages/main/main-routing.module').then(m => m.MainPageRoutingModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
主模塊.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MainPageRoutingModule } from './main-routing.module';
import { MainPage } from './main.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
MainPageRoutingModule
],
declarations: [MainPage]
})
export class MainPageModule {}
主頁面.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'sxm-main',
templateUrl: './main.page.html',
styleUrls: ['./main.page.scss'],
})
export class MainPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
主頁.html
<ion-header>
<ion-toolbar>
<ion-title>main</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
就我而言,我收到了奇怪的 html 模板錯誤,包括一個 OP 描述的錯誤,因為我創建了新組件並忘記將其添加到模塊聲明中
app.module.ts
@NgModule({
...
declarations: [MyComponent]
}
我遇到了同樣的問題,我只是忘記將IonicModule
添加到我創建的包含拋出異常的組件的新模塊中。
檢查您的所有模塊是否都導入了IonicModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { ExamplePage } from './contactus.page';
@NgModule({
imports: [
CommonModule,
IonicModule
],
declarations: [ExamplePage]
})
export class ExampleModule {}
將組件的名稱添加到最近的.module.ts
文件的聲明部分。
@NgModule({
imports: [your-other-modules],
declarations: [your-component-name-here]
})
在你的app-routing.module.ts而不是main-routing.module你應該導入main-page-module 。
取而代之的是:
const routes: Routes = [
{
path: '',
loadChildren: () => import('./pages/yourpage/yourpage-routing.module').then(m => m.YourPageRoutingModule)
},
];
嘗試這個:
const routes: Routes = [
{
path: '',
loadChildren: () => import('./pages/yourpage/yourpage.module').then(m => m.YourPageModule)
},
];
你只需要需要包括IonicModule
您的進口陣列中components.module.ts
imports: [
CommonModule, IonicModule
],
1-) 刪除node_modules
文件夾並刪除package-lock.json文件,
2-) 將全局 angular-cli 更新到最新版本,
3-) 驗證 TypeScript 版本不超過 Angular 支持的版本(小於 3.8.0),
4-) 在項目上運行npm install並再次測試!
就我而言,我犯了一個愚蠢的錯誤。
盡管需要將模塊導入路由器模塊,但導入組件文件會導致錯誤。
發布此信息以防其他人遇到此問題,或者萬一我在 6 個月后遇到同樣的問題並且不記得我是如何修復它的。
我在 FoobarComponent 中有這個錯誤。 它是我為在其他項目中重用而構建的庫的一部分。
通常,當我看到這樣的錯誤時,我會檢查以確保在模塊中聲明了 FoobarComponent 並且同一模塊導入了 IonicModule。 其中任何一個都會導致編譯器(通常是 VS Code)抱怨。
我在 foobar/index.ts 中發現了這個問題,我將所有與 Foobar 相關的類都導出到一個地方。 它看起來像這樣:
export * from './foobar.component';
export * from './foobar.service';
export * from './foobar.models';
注意到有什么遺漏了嗎?
事實證明,我根本沒有導出 FoobarModule。 因此,當 Ivy 執行搖樹步驟時,我猜是確定不需要該模塊並對其進行修剪。 這解釋了為什么 VS Code 沒有問題,因為它沒有搖樹。
將導出添加到 foobar/index.ts 修復了問題:
export * from './foobar.component';
export * from './foobar.service';
export * from './foobar.models';
export * from './foobar.module'; // This is the line that was missing
在為此苦苦掙扎時,確保您在進行更改后不時重新構建您的應用程序毫無價值。 對我來說,回答https://stackoverflow.com/a/66730027/3280710是正確的,但我必須重建我的應用程序才能解決錯誤。
ctrl + c
Terminate batch job (Y/N)? Y
ng serve
我從 Ionic 5 中的錯誤報告中復制粘貼在這里,幫助我解決了我的問題:
我多次遇到這個問題 - 隨機 - 通常是在生成新組件之后,但是之前的 -prod 構建是成功的。 可能這是一個構建錯誤,因為它偶爾會發生眨眼
您可能正在嘗試在模式窗口中打開您的組件/頁面。
如果是:將YourCustomComponentModule添加到ParentModule的導入列表中,您的問題就會消失
parent.module.ts →
…
[ CommonModule, FormsModule, IonicModule, YourCustomComponentModule ] ...
對我來說,問題是在 Routes 對象中沒有路線
app-routing.module.ts
對於我的其中一個頁面(一些未使用的地圖頁面)
添加:
{
path: 'map',
loadChildren: () => import('./pages/map/map.module').then( m => m.MapPageModule)
},
制成
npm run build
成功。
希望這對某人有所幫助(從離子 5 升級到 6,角度 11 到 12)。
許多天后我解決了這個問題::
這個問題回到Angular 語言服務vs 代碼擴展。
1- 將 vscode 更新到最新版本 2- 刪除並重新安裝Angular 語言服務
3- 從 版本選項卡下載要安裝的版本的.vsix
文件。
不要直接打開.vsix 文件。 相反,在 Visual Studio 代碼中,go 到擴展選項卡。 單擊擴展選項卡右上角的“...”菜單,select“從 vsix 安裝...”,然后 select 您剛剛下載的版本的 .vsix 文件。
重啟 vscode 會像我一樣解決你的問題
有關更多信息,您可以查看ionic froum Topic
我看到有一個解決方案可以在您的app.module.ts中導入組件,我的建議是永遠不要那樣做。 如果你的項目很大或規模很大,它會導致性能問題,因為它會覆蓋組件的延遲加載。
對於那些正在尋找有父頁面並且需要在其中有子頁面的場景的人,因此使用組件是個好主意。但是在這里你會得到這個錯誤,不知道。
要解決這個問題,go 到parent.module.ts並且在聲明中它應該是
declarations:[ParentPage, ChildComponent]
這將從子組件中刪除錯誤。 如果在這種情況下它對您有用,請投票。
我有同樣的問題,我從終端運行npm install
。 這解決了問題,現在可以識別離子元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.