Error : Error: R3InjectorError(AppModule)[NavController → UrlSerializer → UrlSerializer → UrlSerializer]: NullInjectorError: No provider for UrlSerializer!
I believe there is something to do with constructor or converting the http to a json response with the line of code //this.http.get(‘/app/lists.json’).map((res:Response) => res.json()); which would convert observable to a mapped object that is serilized into bytes, I think the main issue is with the module.ts file. In my opinion the constructor in component.ts file is not receiving bytes from the url so the alert flags a null injection. Map also has a switch map operator that I have yet to try or think on a plan.
Whenever I try implement map it is not showing as an object. My main webpage is app.component.ts . Slackblitz only has storage from @ionic/angular, the import I use.
Overall work hyperlink stackblitz IDE: Angular Ionic 6 HTTP example (forked) - StackBlitz
I am using latest angular ionic framework
module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’;
import { IonicModule } from ‘@ionic/angular’;
import { AppComponent } from ‘./app.component’;
import { HelloComponent } from ‘./hello.component’;
import { HttpClientModule } from ‘@angular/common/http’;
import { WeatherProvider } from ‘./weather’;
import { CityProvider } from ‘./city’;
//import { UrlSerializerClass } from ‘./UrlSerializerClass’;
//import { IonicStorageModule } from ‘@ionic/storage’;
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
IonicModule.forRoot(),
],
declarations: [AppComponent, HelloComponent],
bootstrap: [AppComponent],
providers: [WeatherProvider, CityProvider],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
component.ts file
import { HttpClient } from ‘@angular/common/http’;
import { Component, VERSION } from ‘@angular/core’;
import { Injectable } from ‘@angular/core’;
import { NavController } from ‘@ionic/angular’;
//import { Observable } from ‘rxjs’;
import { WeatherProvider } from ‘./weather’;
@Component({
selector: ‘my-app’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’],
})
@Injectable()
export class AppComponent {
private _storage: Storage | null = null;
city: String = “Dublin”
cityName: any = {};
weatherInfo: any = {};
units: string;
lat: string;
lng: string;
indicate = true;
constructor(
public http: HttpClient,
public navCtrl: NavController,
// public urlSrl: UrlSerializerClass,
private storage: Storage,
private wp: WeatherProvider
) {
this.init();
http
.get('http://api.weatherbit.io/v2.0/current?lat=')
.subscribe((city) => (this.weatherInfo = city));
console.log('Hello');
}
/* get navCtrl(): NavController {
return this.navCtrl.getActiveNav();
} */
async init() {
// If using, define drivers here: await this.storage.defineDriver(/…/);
const storage = await this.storage.create();
this._storage = storage;
}
// Create and expose methods that users of this service can
// call, for example:
public set(key: string, value: any) {
this._storage?.set(key, value);
}
ionViewDidEnter() {
//boolean load a method as true and else a false to show false
//load this provider to use the import
//retrieve the storage data with this function
this.storage.get('cityName').then((value) => {
//Storage of City (capital)
if (value == null) {
this.indicate = true;
console.log('No City value in storage');
} else {
this.indicate=false;
this.city = value;
console.log(value);
}
});
this.storage.get('weatherInfo').then((value) => {
//Storage of weather info
if (value == null) {
console.log('No Info found');
} else {
this.weatherInfo = value;
}
});
}
ionViewDidLoad(){
this.navCtrl.navigateForward(‘app.component.html’); //replaced push with navigate forward
}
}
to brute force an enzyme substrate, most chemistry techs just add the correct substrate.