What is the easiest method to fix a Null injector url serialiser error in weather app development with Stackblitz IDE?

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
}
}

Hi there

there is so much going on in your code… I don’t know where to start. Sorry about that.

But the code that gives an issue is : getProvWeather() { return UrlSerializerClass };. Here you have a method that returns a class (itself) to the caller. This is not the angular way to create relationships between components and services - Dependency Injection.

Same goes for getProvCity() { return CityProvider }; - not the designated way to do this.

I think you should consider following the Tour of Heroes tutorial on Angular.io. Just to get some basics right.

Also on the incorrect ngFor syntax somewhere…

And the CUSTOM_ELEMENTS_SCHEMA you inserted probably for the ion-navbar or so? That should be an ion-toolbar, at least. And CUSTOM_ELEMENTS_SCHEMA is really a last resort if you use custom components that don’t have solid angular support (like with a module). Get rid of it! It will hide issues in the templates- way too late for comfort.

Also providing the UrlSerializerClass in app.component.ts instead of app.module.ts isn’t the best idea for now I would say. And the name is not necessarily covering the meaning.

And this.navCtrl.navigateForward('app.component.html') is not likely a proper route - so this won’t work.

Also you included Storage in app.component.ts constructor (for dependency injection), but did not include it in app.module.ts, so there will be complaints here too - there is a tutorial on Ionic storage.

Overall - a piling of lots of things that make it hard to backtrack to the original problem, or even for someone else to debug. Glad you provided a Stackblitz though!

This is how far I got with the Stackblitz - I stopped at the Storage bit. Here your code a bit cleaned up - even though still not working.

My suggestion is to start over again and make sure every new steps works before going on. Especially if your biggest challenge is to get basic http right.

Of course, only after completing the angular.io Tour of heroes tutorial! Angular

(hope you are still reading this)

1 Like

Thank you, it makes sense to use html components with best angular compatibility . Therefore to use ion-toolbar instead of ion-navbar. I do remember I had little tiny errors from ion-navbar before on my host machine many months ago.

http://angular.io/ savage resource. Will go through it just by itself in angular. Should solve the issue, without the avalanche of code of course :slight_smile: to brute force an enzyme substrate, most chemistry techs just add the correct substrate.

It is good that I try stuff. I probably won’t get time to do lazy loading but will look in angular documentation how to load a certain webpage. I separated out components into pages and services into services folder in another web link. Much easier on the eye to spot things.