Hi, I just added PWA support with
ng add @angular/pwa
and added a manifest.webmanifest manually:
{
"name": "App",
"short_name": "App",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
ionic build --prod was no problem before, but now there are plenty of errors:
Error: src/app/app.component.html:37:65 - error NG8002: Can't bind to 'ios' since it isn't a known property of 'ion-icon'.
1. If 'ion-icon' is an Angular component and it has 'ios' input, then verify that it is part of this module.
2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
37 <ion-icon class="ion-hide-sm-down ion-hide-lg-up" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'">
~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:15:16
15 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:37:93 - error NG8002: Can't bind to 'md' since it isn't a known property of 'ion-icon'.
1. If 'ion-icon' is an Angular component and it has 'md' input, then verify that it is part of this module.
2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
37 <ion-icon class="ion-hide-sm-down ion-hide-lg-up" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'">
~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:15:16
15 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:41:15 - error NG8001: 'ion-icon' is not a known element:
1. If 'ion-icon' is an Angular component, then verify that it is part of this module.
2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
41 <ion-icon class="ion-hide-lg-down" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'">
…and so on. I searched around and many tipps are for the app.module.ts file and IonicModule, but I’ve changed nothing manually and it looks quite normal to me.
Here my app.module.ts:
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { MbscModule } from '@mobiscroll/angular';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/compat/firestore';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFireFunctionsModule, REGION } from '@angular/fire/compat/functions';
import { environment } from '../environments/environment';
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
MbscModule,
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
AppRoutingModule,
HttpClientModule,
NgxIonicImageViewerModule,
ReactiveFormsModule,
FormsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
BrowserAnimationsModule, ,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production,
// Register the ServiceWorker as soon as the app is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000'
}),
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: REGION, useValue: 'europe-west3' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Has anybody a hint for me please?