Angular 7 + Ionic 4: No provider for NavController! (Clue: incorrect module name imported)

NullInjectorError: No provider for NavController!

After switching from AngularJs to Angular 7 and Ionic 4, I've came across a few new issues where led me to high dependence on StackOverflow.
For certain edge cases without a certified answer, as plus Ionic 4 is still in beta build (during my writing of this article). If SO don't has the answer, I'll have to spend more hours on the issue by diving into the error message and core library.

First thing came into my mind when I first look at the error message:

What is NavController has to do with my code while I've never imported it into any of my component. I didn't use NavController at all in my code as Ionic mentioned they are deprecated in Ionic4

After spent 2-3 days of clueless bug hunting, it's found how I imported IonicModule is the culprit!

Capital letter '@Ionic/angular' should be '@ionic/angular'

In short, the solution is to check your module name if they are written in correct case format (yes case sensitive, I've learned my painful lesson).

Quick Solution:
@Ionic/angular should be @ionic/angular

No provider for NavController

...
ERROR Error: StaticInjectorError(AppModule)[HrefDelegate -> NavController]: 
StaticInjectorError(Platform: core)[HrefDelegate -> NavController]: 
  NullInjectorError: No provider for NavController!
  at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
  at resolveToken (core.js:954)
  at tryResolveToken (core.js:898)
  at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
  at resolveToken (core.js:954)
  at tryResolveToken (core.js:898)
  at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
  at resolveNgModuleDep (core.js:17656)
  at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
  at resolveDep (core.js:18716)
...

Like the error message above, Ionic4 didn't really provide very informative clue that helps debugger identify what is rootcause. So yeah, there are risks when we use beta library building our project...
I believe soon later, the error message would be clearer once it's near its official stable build release date.
There is also a slightly useful warning message obtained from browser console, posted as below

...
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
// ... list of affected files ...
/node_modules/@ionic/angular/dist/providers/action-sheet-controller.js
/node_modules/@Ionic/angular/dist/util/overlay.js
/node_modules/@ionic/angular/dist/index.js
/node_modules/@Ionic/angular/dist/providers/action-sheet-controller.js
/node_modules/@Ionic/angular/dist/util/util.js
...

Well, the messages in debugger do shine some light about the ambiguous and conflicting module names, the list of affected files don't really tell what has gone wrong.
Hope this article could help some not-so-lucky guys out there who fell into traps set by ourselves.

Changing current $state will "back" button instead of menu button

How not to keep view history as you use $state.go()?

Menu button (icon)

In ionic (v1.2.4), when we are trying to change current state to other state,
it'll substitute "menu" button as "Back" button :

  $state.go('app.home');

Back button (icon)

or even solution below also won't help from showing the back button (icon).

  $state.go('app.home', {}, {
    location: 'replace',
    reload: true,
    inherit: false
  });

And gratefully, until I found a solution on stackoverflow, where people also facing the same issue as I did.

with code

  $ionicHistory.nextViewOptions({
    disableBack: true
  });

is enough to achieve my expected ("refresh" view history) result.

angular.controller('AppCtrl', function($state, $ionicHistory) {
  
  $scope.goHome = function () {
    $ionicHistory.nextViewOptions({
      disableBack: true
    });
    $state.go('app.home');
  };

});

Manually refresh (and clear cache on) current page on IonicView as needed

Ionic v1.2.4

If you've looked around for a solution to manually clear cache and refresh current page, you'll more likely found solution like below.

$ionicHistory.clearCache().then(function () {
  $state.go($state.current, {} , {reload: true});
});

After I've tried the solution above, it doesn't really work as expected, and I don't see how it clear the view cache for current page.
My First try with

$ionicHistory.clearCache().then(function () {
  $state.go($state.current, {} , {reload: true});
});

the page/view would just be redirected with $state.go(), and does not has it cache cleared (it still shows the old content).

As I roughly went through the ionic.bundle.js, I found $ionicHistory.clearCache() actually does accept array value, stateIds, as parameter to clear the view cache specifically.

So, the final solution to the expected result (manually clear cache and refresh current page):

$ionicHistory.clearCache([$state.current.name]).then(function () {
  $state.go($state.current, {}, {reload: true});
});

As you can see, I added the [$state.current.name] to specifically assign each required view cache to be cleared. And so, that's what required for $ionicHistory.clearCache() to work properly.