From 06abacb6f0f083dbac5c6b2734f72b8cb7e151df Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Oct 2023 12:57:30 -0700 Subject: [PATCH] feat(angular): use Ionic standalone components (#1798) --- angular-standalone/base/angular.json | 10 ---------- angular-standalone/base/package.json | 4 ++-- angular-standalone/base/src/app/app.component.ts | 4 ++-- angular-standalone/base/src/main.ts | 4 ++-- .../official/blank/src/app/app.component.ts | 12 ++++++++++++ .../official/blank/src/app/home/home.page.ts | 4 ++-- .../official/list/src/app/app.component.spec.ts | 1 - .../official/list/src/app/app.component.ts | 12 ++++++++++++ .../official/list/src/app/home/home.page.ts | 4 ++-- .../list/src/app/message/message.component.spec.ts | 3 +-- .../list/src/app/message/message.component.ts | 9 +++++++-- .../src/app/view-message/view-message.page.spec.ts | 3 +-- .../list/src/app/view-message/view-message.page.ts | 10 +++++++--- .../official/sidemenu/src/app/app.component.ts | 11 ++++++++--- .../sidemenu/src/app/folder/folder.page.spec.ts | 1 - .../official/sidemenu/src/app/folder/folder.page.ts | 4 ++-- .../official/tabs/src/app/app.component.ts | 10 +++------- .../official/tabs/src/app/tab1/tab1.page.ts | 4 ++-- .../official/tabs/src/app/tab2/tab2.page.ts | 4 ++-- .../official/tabs/src/app/tab3/tab3.page.ts | 4 ++-- .../official/tabs/src/app/tabs/tabs.page.ts | 10 +++++++--- 21 files changed, 76 insertions(+), 52 deletions(-) create mode 100644 angular-standalone/official/blank/src/app/app.component.ts create mode 100644 angular-standalone/official/list/src/app/app.component.ts diff --git a/angular-standalone/base/angular.json b/angular-standalone/base/angular.json index 6e857f5c5..0740e6c7f 100644 --- a/angular-standalone/base/angular.json +++ b/angular-standalone/base/angular.json @@ -29,11 +29,6 @@ "glob": "**/*", "input": "src/assets", "output": "assets" - }, - { - "glob": "**/*.svg", - "input": "node_modules/ionicons/dist/ionicons/svg", - "output": "./svg" } ], "styles": ["src/theme/variables.scss", "src/global.scss"], @@ -109,11 +104,6 @@ "glob": "**/*", "input": "src/assets", "output": "assets" - }, - { - "glob": "**/*.svg", - "input": "node_modules/ionicons/dist/ionicons/svg", - "output": "./svg" } ], "styles": ["src/theme/variables.scss", "src/global.scss"], diff --git a/angular-standalone/base/package.json b/angular-standalone/base/package.json index 66a7185d6..176fe2109 100644 --- a/angular-standalone/base/package.json +++ b/angular-standalone/base/package.json @@ -21,8 +21,8 @@ "@angular/platform-browser": "^16.0.0", "@angular/platform-browser-dynamic": "^16.0.0", "@angular/router": "^16.0.0", - "@ionic/angular": "^7.0.0", - "ionicons": "^7.0.0", + "@ionic/angular": "^7.5.0", + "ionicons": "^7.2.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/angular-standalone/base/src/app/app.component.ts b/angular-standalone/base/src/app/app.component.ts index 005ce509f..cc533ddaa 100644 --- a/angular-standalone/base/src/app/app.component.ts +++ b/angular-standalone/base/src/app/app.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonApp } from '@ionic/angular/standalone'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], standalone: true, - imports: [IonicModule], + imports: [IonApp], }) export class AppComponent { constructor() {} diff --git a/angular-standalone/base/src/main.ts b/angular-standalone/base/src/main.ts index 573269346..8b25c3181 100644 --- a/angular-standalone/base/src/main.ts +++ b/angular-standalone/base/src/main.ts @@ -1,7 +1,7 @@ import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; -import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; @@ -14,7 +14,7 @@ if (environment.production) { bootstrapApplication(AppComponent, { providers: [ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, - importProvidersFrom(IonicModule.forRoot({})), + provideIonicAngular(), provideRouter(routes), ], }); diff --git a/angular-standalone/official/blank/src/app/app.component.ts b/angular-standalone/official/blank/src/app/app.component.ts new file mode 100644 index 000000000..c5ba44f19 --- /dev/null +++ b/angular-standalone/official/blank/src/app/app.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + standalone: true, + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} diff --git a/angular-standalone/official/blank/src/app/home/home.page.ts b/angular-standalone/official/blank/src/app/home/home.page.ts index 3d2d31dc5..bd0b20423 100644 --- a/angular-standalone/official/blank/src/app/home/home.page.ts +++ b/angular-standalone/official/blank/src/app/home/home.page.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], standalone: true, - imports: [IonicModule], + imports: [IonHeader, IonToolbar, IonTitle, IonContent], }) export class HomePage { constructor() {} diff --git a/angular-standalone/official/list/src/app/app.component.spec.ts b/angular-standalone/official/list/src/app/app.component.spec.ts index 6edde74a2..5fd1ccefa 100644 --- a/angular-standalone/official/list/src/app/app.component.spec.ts +++ b/angular-standalone/official/list/src/app/app.component.spec.ts @@ -1,6 +1,5 @@ import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { IonicModule } from '@ionic/angular'; import { AppComponent } from './app.component'; diff --git a/angular-standalone/official/list/src/app/app.component.ts b/angular-standalone/official/list/src/app/app.component.ts new file mode 100644 index 000000000..c5ba44f19 --- /dev/null +++ b/angular-standalone/official/list/src/app/app.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + standalone: true, + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} diff --git a/angular-standalone/official/list/src/app/home/home.page.ts b/angular-standalone/official/list/src/app/home/home.page.ts index 60914d19b..f427c8c9e 100644 --- a/angular-standalone/official/list/src/app/home/home.page.ts +++ b/angular-standalone/official/list/src/app/home/home.page.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component, inject } from '@angular/core'; -import { IonicModule, RefresherCustomEvent } from '@ionic/angular'; +import { RefresherCustomEvent, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonList } from '@ionic/angular/standalone'; import { MessageComponent } from '../message/message.component'; import { DataService, Message } from '../services/data.service'; @@ -10,7 +10,7 @@ import { DataService, Message } from '../services/data.service'; templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], standalone: true, - imports: [IonicModule, CommonModule, MessageComponent], + imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonList, MessageComponent], }) export class HomePage { private data = inject(DataService); diff --git a/angular-standalone/official/list/src/app/message/message.component.spec.ts b/angular-standalone/official/list/src/app/message/message.component.spec.ts index 6141cfee0..c613897f9 100644 --- a/angular-standalone/official/list/src/app/message/message.component.spec.ts +++ b/angular-standalone/official/list/src/app/message/message.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideRouter } from '@angular/router'; -import { IonicModule } from '@ionic/angular'; import { ViewMessagePage } from '../view-message/view-message.page'; import { MessageComponent } from './message.component'; @@ -11,7 +10,7 @@ describe('MessageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MessageComponent, IonicModule, ViewMessagePage], + imports: [MessageComponent, ViewMessagePage], providers: [provideRouter([])] }).compileComponents(); diff --git a/angular-standalone/official/list/src/app/message/message.component.ts b/angular-standalone/official/list/src/app/message/message.component.ts index 864f35964..605c68c36 100644 --- a/angular-standalone/official/list/src/app/message/message.component.ts +++ b/angular-standalone/official/list/src/app/message/message.component.ts @@ -1,7 +1,9 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { IonicModule, Platform } from '@ionic/angular'; +import { Platform, IonItem, IonLabel, IonNote, IonIcon } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { chevronForward } from 'ionicons/icons'; import { Message } from '../services/data.service'; @Component({ @@ -10,7 +12,7 @@ import { Message } from '../services/data.service'; styleUrls: ['./message.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [CommonModule, IonicModule, RouterLink], + imports: [CommonModule, RouterLink, IonItem, IonLabel, IonNote, IonIcon], }) export class MessageComponent { private platform = inject(Platform); @@ -18,4 +20,7 @@ export class MessageComponent { isIos() { return this.platform.is('ios') } + constructor() { + addIcons({ chevronForward }); + } } diff --git a/angular-standalone/official/list/src/app/view-message/view-message.page.spec.ts b/angular-standalone/official/list/src/app/view-message/view-message.page.spec.ts index 2f844ccdb..16b80dcd5 100644 --- a/angular-standalone/official/list/src/app/view-message/view-message.page.spec.ts +++ b/angular-standalone/official/list/src/app/view-message/view-message.page.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { IonicModule } from '@ionic/angular'; import { provideRouter } from '@angular/router'; import { ViewMessagePage } from './view-message.page'; @@ -10,7 +9,7 @@ describe('ViewMessagePage', () => { beforeEach(async () => { TestBed.configureTestingModule({ - imports: [ViewMessagePage, IonicModule], + imports: [ViewMessagePage], providers: [provideRouter([])], }).compileComponents(); diff --git a/angular-standalone/official/list/src/app/view-message/view-message.page.ts b/angular-standalone/official/list/src/app/view-message/view-message.page.ts index 541c7e79c..8864d088e 100644 --- a/angular-standalone/official/list/src/app/view-message/view-message.page.ts +++ b/angular-standalone/official/list/src/app/view-message/view-message.page.ts @@ -1,7 +1,9 @@ import { CommonModule } from '@angular/common'; import { Component, inject, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { IonicModule, Platform } from '@ionic/angular'; +import { Platform, IonHeader, IonToolbar, IonButtons, IonBackButton, IonContent, IonItem, IonIcon, IonLabel, IonNote } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { personCircle } from 'ionicons/icons'; import { DataService, Message } from '../services/data.service'; @Component({ @@ -9,7 +11,7 @@ import { DataService, Message } from '../services/data.service'; templateUrl: './view-message.page.html', styleUrls: ['./view-message.page.scss'], standalone: true, - imports: [IonicModule, CommonModule], + imports: [CommonModule, IonHeader, IonToolbar, IonButtons, IonBackButton, IonContent, IonItem, IonIcon, IonLabel, IonNote], }) export class ViewMessagePage implements OnInit { public message!: Message; @@ -17,7 +19,9 @@ export class ViewMessagePage implements OnInit { private activatedRoute = inject(ActivatedRoute); private platform = inject(Platform); - constructor() {} + constructor() { + addIcons({ personCircle }); + } ngOnInit() { const id = this.activatedRoute.snapshot.paramMap.get('id') as string; diff --git a/angular-standalone/official/sidemenu/src/app/app.component.ts b/angular-standalone/official/sidemenu/src/app/app.component.ts index c90389c3f..6e9b63012 100644 --- a/angular-standalone/official/sidemenu/src/app/app.component.ts +++ b/angular-standalone/official/sidemenu/src/app/app.component.ts @@ -1,13 +1,16 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { RouterLink, RouterLinkActive } from '@angular/router'; -import { IonicModule } from '@ionic/angular'; +import { IonApp, IonSplitPane, IonMenu, IonContent, IonList, IonListHeader, IonNote, IonMenuToggle, IonItem, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, heartOutline, heartSharp, archiveOutline, archiveSharp, trashOutline, trashSharp, warningOutline, warningSharp, bookmarkOutline, bookmarkSharp } from 'ionicons/icons'; + @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], standalone: true, - imports: [IonicModule, RouterLink, RouterLinkActive, CommonModule], + imports: [RouterLink, RouterLinkActive, CommonModule, IonApp, IonSplitPane, IonMenu, IonContent, IonList, IonListHeader, IonNote, IonMenuToggle, IonItem, IonIcon, IonLabel, IonRouterOutlet], }) export class AppComponent { public appPages = [ @@ -19,5 +22,7 @@ export class AppComponent { { title: 'Spam', url: '/folder/spam', icon: 'warning' }, ]; public labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders']; - constructor() {} + constructor() { + addIcons({ mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, heartOutline, heartSharp, archiveOutline, archiveSharp, trashOutline, trashSharp, warningOutline, warningSharp, bookmarkOutline, bookmarkSharp }); + } } diff --git a/angular-standalone/official/sidemenu/src/app/folder/folder.page.spec.ts b/angular-standalone/official/sidemenu/src/app/folder/folder.page.spec.ts index 4c3d8572c..3d367e65d 100644 --- a/angular-standalone/official/sidemenu/src/app/folder/folder.page.spec.ts +++ b/angular-standalone/official/sidemenu/src/app/folder/folder.page.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { IonicModule } from '@ionic/angular'; import { FolderPage } from './folder.page'; diff --git a/angular-standalone/official/sidemenu/src/app/folder/folder.page.ts b/angular-standalone/official/sidemenu/src/app/folder/folder.page.ts index 02fc128ca..a33a5e5e8 100644 --- a/angular-standalone/official/sidemenu/src/app/folder/folder.page.ts +++ b/angular-standalone/official/sidemenu/src/app/folder/folder.page.ts @@ -1,13 +1,13 @@ import { Component, inject, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { IonicModule } from '@ionic/angular'; +import { IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent } from '@ionic/angular/standalone'; @Component({ selector: 'app-folder', templateUrl: './folder.page.html', styleUrls: ['./folder.page.scss'], standalone: true, - imports: [IonicModule], + imports: [IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent], }) export class FolderPage implements OnInit { public folder!: string; diff --git a/angular-standalone/official/tabs/src/app/app.component.ts b/angular-standalone/official/tabs/src/app/app.component.ts index a0675c72f..c5ba44f19 100644 --- a/angular-standalone/official/tabs/src/app/app.component.ts +++ b/angular-standalone/official/tabs/src/app/app.component.ts @@ -1,16 +1,12 @@ -import { Component, EnvironmentInjector, inject } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; -import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.scss'], standalone: true, - imports: [IonicModule, CommonModule], + imports: [IonApp, IonRouterOutlet], }) export class AppComponent { - public environmentInjector = inject(EnvironmentInjector); - constructor() {} } diff --git a/angular-standalone/official/tabs/src/app/tab1/tab1.page.ts b/angular-standalone/official/tabs/src/app/tab1/tab1.page.ts index 73fd7e4dd..125fdf9be 100644 --- a/angular-standalone/official/tabs/src/app/tab1/tab1.page.ts +++ b/angular-standalone/official/tabs/src/app/tab1/tab1.page.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; import { ExploreContainerComponent } from '../explore-container/explore-container.component'; @Component({ @@ -7,7 +7,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe templateUrl: 'tab1.page.html', styleUrls: ['tab1.page.scss'], standalone: true, - imports: [IonicModule, ExploreContainerComponent], + imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent], }) export class Tab1Page { constructor() {} diff --git a/angular-standalone/official/tabs/src/app/tab2/tab2.page.ts b/angular-standalone/official/tabs/src/app/tab2/tab2.page.ts index 58f7719ec..6fd1fdda6 100644 --- a/angular-standalone/official/tabs/src/app/tab2/tab2.page.ts +++ b/angular-standalone/official/tabs/src/app/tab2/tab2.page.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; import { ExploreContainerComponent } from '../explore-container/explore-container.component'; @Component({ @@ -7,7 +7,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'], standalone: true, - imports: [IonicModule, ExploreContainerComponent] + imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent] }) export class Tab2Page { diff --git a/angular-standalone/official/tabs/src/app/tab3/tab3.page.ts b/angular-standalone/official/tabs/src/app/tab3/tab3.page.ts index edceb6d20..5e29647d9 100644 --- a/angular-standalone/official/tabs/src/app/tab3/tab3.page.ts +++ b/angular-standalone/official/tabs/src/app/tab3/tab3.page.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; import { ExploreContainerComponent } from '../explore-container/explore-container.component'; @Component({ @@ -7,7 +7,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe templateUrl: 'tab3.page.html', styleUrls: ['tab3.page.scss'], standalone: true, - imports: [IonicModule, ExploreContainerComponent], + imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent], }) export class Tab3Page { constructor() {} diff --git a/angular-standalone/official/tabs/src/app/tabs/tabs.page.ts b/angular-standalone/official/tabs/src/app/tabs/tabs.page.ts index a0205f33b..62fd0c0f4 100644 --- a/angular-standalone/official/tabs/src/app/tabs/tabs.page.ts +++ b/angular-standalone/official/tabs/src/app/tabs/tabs.page.ts @@ -1,15 +1,19 @@ import { Component, EnvironmentInjector, inject } from '@angular/core'; -import { IonicModule } from '@ionic/angular'; +import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { triangle, ellipse, square } from 'ionicons/icons'; @Component({ selector: 'app-tabs', templateUrl: 'tabs.page.html', styleUrls: ['tabs.page.scss'], standalone: true, - imports: [IonicModule], + imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel], }) export class TabsPage { public environmentInjector = inject(EnvironmentInjector); - constructor() {} + constructor() { + addIcons({ triangle, ellipse, square }); + } }