In this chapter, you got to know Google Firebase. You have read data from a data-base with the aid of HttpClient.
You sorted and filtered data using the Lodash library to make it appealing in the app.
You got to know route parameters as a supplement to the Angular routing con-cept.
Finally, with Local Storage and Ionic Storage, you’ve used a variety of ways to store user-specific data.

The libraries of Ionic and Angular have changed somewhat since the book release of “Ionic 5” – especially for this chapter! In this PDF I’ve listed all changes.

Any remarks or questions?

29 comments

  1. Tony

    Reply

    Hi Andreas,

    Please can you provide an update for using HttpClientModule and HttpClient, I’m getting an error message that it is deprecated and that provideHttpClient should be used, but, most of the online solutions out there seem to be adding this to app.config.ts which doesn’t seem to exist.

    Thanks in advance.

    Angular CLI: 18.2.7
    Node: 22.9.0
    Package Manager: npm 10.8.3

    Ionic version 7.2.0

  2. Peter

    Reply

    HI Andreas, I’m having trouble finding how to import the JSON from the website. Do you have any help on this. I made it to creating the firebase database and am all set otherwise

  5. fafaslot

    Reply

    Nice post. I learn something new and challenging on sites I stumbleupon on a daily basis.
    It’s always helpful to read content from other authors and use
    a little something from other sites.

  6. Agung

    Reply

    I like ionic angular and this is one of the best resource for that! I want to buy the book but 79 usd is a little bit expensive for me. Waiting for some discount 😀

    • Andionic

      Reply

      Hi Agung,

      thx a lot! Yes, the price is proud. But you’re a lucky guy:
      My publisher has announced a Summer Sale week for next week.
      Then my book will be significantly cheaper for one week!

      Best
      Andreas

  7. Eugenia

    Reply

    Hello, I wish for to subscribe for this web site to obtain most up-to-date updates, therefore
    where can i do it please help out.

  8. Evandro

    Reply

    Hi Andreas!

    In section 5.9, I have executed: npm install –save @ionic/storage and I have imported it in app.module.ts: import { IonicStorageModule } from ‘@ionic/storage’;

    but, I have obtained the following error:

    Module ‘”@ionic/storage”‘ has no exported member ‘IonicStorageModule’.ts(2305)

    My environment is:

    Ionic:

    Ionic CLI : 6.16.3 (C:\Program Files\nodejs\node_modules\@ionic\cli)
    Ionic Framework : @ionic/angular 5.6.11
    @angular-devkit/build-angular : 12.0.5
    @angular-devkit/schematics : 12.1.1
    @angular/cli : 12.0.5
    @ionic/angular-toolkit : 4.0.0

    Cordova:

    Cordova CLI : not installed
    Cordova Platforms : android 9.1.0, ios broken
    Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

    Utility:

    cordova-res : 0.15.3
    native-run : 1.4.0

    System:

    NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe)
    npm : 7.20.5
    OS : Windows 10

    Could you tell me what is wrong?

    • Andionic

      Reply

      Hi Evandro, pls check, if you added IonicStorageModule.forRoot() to the imports array in app.module.ts.

    • Andionic

      Reply

      Evandro, install the @ionic/storage-angular library instead of @ionic/storage:
      npm install @ionic/storage-angular
      In app.module.ts:
      import { IonicStorageModule } from '@ionic/storage-angular';
      In favorites.service.ts:
      import { Storage } from '@ionic/storage-angular';

  9. Papy et les Resistances

    Reply

    Dear Andreas,
    So far, so good…until page 146 (last part of chapter 5 on local memory).
    In your book page 146, you import IonicStorageModule which does not exist: should we replace by Storage instead, like in page 147 for favorites.service.ts ?
    I replaced by Storage but I currently have a blank page when I restart the server. There is something wrong here.
    Could you please help ?
    Cheers,

  10. Charles Almeida

    Reply

    Hi! good evening.
    I have an error:
    core.js: 6162 ERROR TypeError: Cannot read property ‘favTours’ of undefined

    Could you help me, please.

    Grateful.

    • Andionic

      Reply

      You try to assign a property to a non existing object.
      Declare favTours and set a value for it, e.g.
      favTours = {}

  11. Tarcísio

    Reply

    Hi Andreas, thank your for your great book.
    In section 5.9, I executed: npm install –save @ionic/storage
    and I imported in app.module.ts: import { IonicStorageModule } from ‘@ionic/storage’;
    but, I obtained an error:
    ERROR in The target entry-point “@ionic/storage” has missing dependencies:
    [ng] – @angular/core
    [ng] – @angular/common
    [ng]
    [ng] ERROR in ../../../../node_modules/@ionic/storage/index.d.ts:1:37 – error TS2307: Cannot find module ‘@angular/core’ or its corresponding type declarations.
    [ng]
    [ng] 1 import { ModuleWithProviders } from ‘@angular/core’;
    [ng] ~~~~~~~~~~~~~~~
    [ng] ../../../../node_modules/@ionic/storage/storage.d.ts:2:32 – error TS2307: Cannot find module ‘@angular/core’ or its corresponding type declarations.
    [ng]
    [ng] 2 import { InjectionToken } from ‘@angular/core’;
    [ng] ~~~~~~~~~~~~~~~
    [ng]
    .
    How I can solve this?

    • Andionic

      Reply

      Did you add it to the imports section of @NgModule like described on page 147?
      And is your system up to date?

  12. Mark

    Reply

    Andreas,

    This book is wonderful! This is how these books should be written. Thank you!

    I am stuck, however in chapter 5…

    In section 5.5 we add Lodash:
    import _ from ‘lodash’;

    I am getting this problem in the Visual Studio Code error console:
    Module ‘”/home/Projects/ionic/bob-tours/node_modules/@types/lodash/ts3.1/index”‘ can only be default-imported using the ‘allowSyntheticDefaultImports’ flag
    index.d.ts[14,1]: This module is declared with using ‘export =’, and can only be used with a default import when using the ‘allowSyntheticDefaultImports’ flag.

    $ ionic -v
    6.4.3

    Any ideas?

    Thanks!!!

    • Andionic

      Reply

      You’re using TypeScript 3.1. This way you can use

      import * as _ from 'lodash';

      and it should work.

      Thanks for your kind words about my book, Mark! Maybe you would like to write a small review on amazon?

      • Mark

        Reply

        Andreas,

        That did the trick!!! Thanks!

        Thanks for the fast reply. I will mention it in my review 😉

  14. José Augusto de Godoy

    Reply

    Good Morning.
    conexao PHP: $sql = $conexao->prepare(‘SELECT * FROM municipios limit 1’);
    $sql->execute();
    $dados1 = “[“;
    while($lista = $sql->fetch()){$dados1 .=”‘”.$lista[“id”].”‘”‘.’,’;$dados1 .=”‘”.$lista[“uf”].”‘”;}$dados1 .=”]”;
    $dados1json = json_encode($dados1);
    echo ($dados1json);

    Console: “[‘1′,’MS’]”

    bob-tours-service.ts return this.http.get(“http://localhost/conexao.php”).toPromise();
    regions.page.ts: this.btService.getRegions().then(data => this.regions = data);
    So far here all ok
    There is only an error in regions.page.html
    regions.page.html:

    ERROR Error: Cannot find a differ supporting object ‘[“1″,”MS”]’ of type ‘string’. NgFor only supports binding to Iterables such as Arrays.

    Would you help me?

    Thanks.

Leave a comment

Your email address will not be published. Required fields are marked *