Runtime Error Uncaught (in promise): invalid views to insert

Hi Team,

I tried installing newer version of Ionic 3. Once the installation completed with the default pages such as Home, about, and contact. I removed “navcontroller” from all the pages.

I have added routers in “app.module.ts”
Look at the code below:

import { RouterModule,Routes} from ‘@angular/router’;
import { AboutPage } from ‘…/pages/about/about’;
import { ContactPage } from ‘…/pages/contact/contact’;
import { HomePage } from ‘…/pages/home/home’;

export const CoreModules =[


export const Services = [


const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },        
	{ path: 'home', component: HomePage},
	{ path: 'about', component: AboutPage},
	{ path: 'contact', component: ContactPage},		


export const CONST_ROUTING = RouterModule.forRoot(routes);

In Home.html i have given the link to all the pages

Code (home.html)

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>

I am gettling the following error when i click the anchor links.

Runtime Error
Uncaught (in promise): invalid views to insert


Error: Uncaught (in promise): invalid views to insert
at c (
at Object.reject (
at e._fireError (
at e._failed (
at t.invoke (
at Object.onInvoke (
at t.invoke (
at (

Okay, why would you remove navController and why would you prefer the Angular2 Router over the Ionic Navigation method? Ionic’s navigation is build on their own navigation stack.

I use Angular2 Router for the following purpose.

  1. Accessing the pages directly with the help of URL
    ex. http://localhost/#/home, http://localhost/#/contactus, http://localhost/#/aboutus
  2. Open links such as

If you want to do something like that in Ionic, I advice you try the deeplinker that’s used to handle this for you. As far as passing params, Ionic provides an excellent way to pass params through navParams or by getting it from the url with a little help of the IonicPage decorator. All in all I don’t think mixing the Angular Router with Ionic is going to work very well. It’s not designed to use this router and the Ionic team is trying to make Ionic more PWA suitable (i.e. with deeplinker, ionicPage decorator, lazy loading etc).

My advice:

don’t try to mix the concepts.

1 Like

We face issues when will use IonicPage decorator and Lazy loading. Angular 2 have the option to support routing concept. It is helpful when you try to figure out the issue exactly when we have used the router. Still Lazy loading is under development.

Yes that might be helpful, weren’t it the case there’s an entire discussion about this topic on the forum. You can find it over here:

I think searching through this topic is your best bet. But once again, the router isn’t implemented for a reason and the Ionic team has very good reasons for not implementing it. Let us know when you’ve figured it out.

1 Like

I think you should use IonicPage instead of angular router. There are still many problems but at the end it should be the best solution.

I had this same issue in my app and it was caused by a “href=”#" in the link where I called my pages. My code was like that: <a href="#" *ngFor=“let cbo of cbos” (click)=“cboSelected()”…

I just removed the “href=”#" from the link and everything worked well.


I got it right. I changed the following thing:

@IonicPage({segment: ‘pagename/’})


Thank you so much. That was the issue of me :slight_smile:

Check it out