I am working on updating a project to Ionic 7 and Angular 15, I've tried all of the solutions for this problem I could find online. Angular 15 apparently doesn't really need NgModule anymore with the new standalone modules, but it also shouldn't make the existing code break.
When I use the ionic serve command, it returns:
[ng] Error: src/app/valuation/valuation.page.html:36:7 - error NG8001: 'ion-icon' is not a known element:
[ng] 1. If 'ion-icon' is an Angular component, then verify that it is part of this module.
[ng] 2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
[ng]
[ng] 36 <ion-icon slot="start" name="add"></ion-icon>
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] src/app/valuation/valuation.page.ts:26:16
[ng] 26 templateUrl: './valuation.page.html',
[ng] ~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error occurs in the template of component ValuationPage.
It does this to pretty much every ionic component in the html file.
page.html
<ion-header>
<ion-toolbar>
<ion-searchbar
(ionBlur)="false"
(ionFocus)="true"
placeholder="Buscar detalhes"
(ionChange)="onSearchChange($event)"
>
</ion-searchbar>
<ion-buttons slot="start">
<ion-back-button
class="ion-hide-sm-up"
[text]="''"
[defaultHref]="newUrl(this.router.url, 1, '')"
></ion-back-button>
<ion-back-button
class="ion-hide-sm-down"
[defaultHref]="newUrl(this.router.url, 1, '')"
></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="actionService.options(activatedRoute)">
<ion-icon slot="end" name="ellipsis-vertical"></ion-icon>
<div class="ion-hide-sm-down">Opções</div>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<app-profile-header></app-profile-header>
</ion-toolbar>
</ion-header>
<ion-content> </ion-content>
<ion-footer>
<ion-toolbar>
<ion-button [routerLink]="['../new']" expand="full" fill="solid">
<ion-icon slot="start" name="add"></ion-icon>
Nova Nota
</ion-button>
</ion-toolbar>
</ion-footer>
module.ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { Routes, RouterModule } from "@angular/router";
import { IonicModule } from "@ionic/angular";
import { ValuationPage } from "./valuation.page";
import { GlobalSharedModule } from "../shared/global-shared.module";
const routes: Routes = [
{
path: "",
redirectTo: "all",
pathMatch: "full",
},
{
path: "all",
component: ValuationPage,
},
{
path: "exam",
loadChildren: () =>
import("../exam/exam.module").then((m) => m.ExamPageModule),
},
{
path: "view",
loadChildren: () =>
import("./view/view.module").then((m) => m.ViewPageModule),
},
{
path: "filter",
loadChildren: () =>
import("./filter/filter.module").then((m) => m.FilterPageModule),
},
{
path: "help",
loadChildren: () =>
import("../help/help.module").then((m) => m.HelpPageModule),
},
{
path: "audit",
loadChildren: () =>
import("../audit/audit.module").then((m) => m.AuditPageModule),
},
{
path: "report",
loadChildren: () =>
import("../report/report.module").then((m) => m.ReportPageModule),
},
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
GlobalSharedModule,
],
declarations: [ValuationPage],
})
export class ValuationPageModule {}
package
"dependencies": {
"@angular-devkit/core": "^13.3.11",
"@angular/animations": "^13.3.4",
"@angular/cdk": "^13.3.9",
"@angular/common": "^13.3.4",
"@angular/core": "^13.3.4",
"@angular/fire": "^7.2.1",
"@angular/forms": "^13.3.4",
"@angular/platform-browser": "^13.3.4",
"@angular/platform-browser-dynamic": "^13.3.4",
"@angular/pwa": "^0.803.19",
"@angular/router": "^13.3.4",
"@angular/service-worker": "^13.3.4",
"@angular/youtube-player": "^13.2.6",
"@auth0/angular-jwt": "^5.0.2",
"@ionic-native/app-rate": "^5.31.1",
"@ionic-native/app-version": "^5.31.1",
"@ionic-native/background-mode": "^5.31.1",
"@ionic-native/badge": "^5.31.1",
"@ionic-native/base64": "^5.31.1",
"@ionic-native/camera": "^5.31.1",
"@ionic-native/contacts": "^5.31.1",
"@ionic-native/core": "^5.31.1",
"@ionic-native/date-picker": "^5.36.0",
"@ionic-native/deeplinks": "^5.31.1",
"@ionic-native/file": "^5.31.1",
"@ionic-native/file-opener": "^5.31.1",
"@ionic-native/file-transfer": "^5.31.1",
"@ionic-native/firebase-x": "^5.36.0",
"@ionic-native/in-app-browser": "^5.31.1",
"@ionic-native/ionic-webview": "^5.31.1",
"@ionic-native/keyboard": "^5.31.1",
"@ionic-native/local-notifications": "^5.31.1",
"@ionic-native/media": "^5.31.1",
"@ionic-native/media-capture": "^5.31.1",
"@ionic-native/mobile-accessibility": "^5.31.1",
"@ionic-native/network": "^5.31.1",
"@ionic-native/screen-orientation": "^5.31.1",
"@ionic-native/splash-screen": "^5.31.1",
"@ionic-native/status-bar": "^5.31.1",
"@ionic/angular": "^6.4.1",
"@ionic/cordova-builders": "^6.1.0",
"@ionic/core": "^6.4.1",
"@ionic/lab": "^1.0.19",
"@ionic/storage": "2.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@swimlane/ngx-charts": "^20.1.2",
"@swimlane/ngx-datatable": "^20.0.0",
"@tinymce/tinymce-angular": "^6.0.0",
"@types/node": "^12.11.1",
"angular-in-memory-web-api": "^0.13.0",
"angular-star-rating": "^5.0.1",
"com-badrit-base64": "^0.2.0",
"cordova": "^11.0.0",
"cordova-ios": "5.1.1",
"cordova-plugin-android-fingerprint-auth": "^1.5.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-apprate": "^1.7.2",
"cordova-plugin-background-mode": "^0.7.3",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-enable-multidex": "^0.2.0",
"cordova-plugin-file-transfer-latest": "^2.0.2-dev",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-media": "^5.0.3",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "^2.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-sqlite-storage": "^3.4.1",
"core-js": "^3.6.4",
"css-star-rating": "^1.3.1",
"es6-promise-plugin": "^4.2.2",
"file-saver": "^2.0.5",
"firebase": "9.16.0",
"hammerjs": "^2.0.8",
"html-to-image": "^1.10.8",
"ionic-plugin-deeplinks": "^1.0.20",
"ionic-selectable": "^4.9.0",
"ionic2-calendar": "^0.5.6",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.2.13",
"jszip": "^3.7.1",
"ngx-clipboard": "^15.1.0",
"ngx-doc-viewer": "^1.3.0",
"phonegap-plugin-mobile-accessibility": "^1.0.5",
"rxjs": "~6.6.0",
"swiper": "^9.3.2",
"xlsx": "^0.17.5",
"zone.js": "~0.11.4"
},
I tried checking for errors in the html file, adding the NO_ERROS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA, restarting the computer, reinstalling the node_modules and checking for any breaking changes with Ionic 7 or Angular 15 and I think I may be missing something but can't seem to find the issue.
