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

gopalanbalasubramani · May 23, 2017, 9:27am

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 =[

AboutPage,
ContactPage,
HomePage,

];
export const Services = [
AboutPage,
ContactPage,
HomePage,

];

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

Stack

luukschoen · May 23, 2017, 9:34am

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.

gopalanbalasubramani · May 23, 2017, 10:10am

I use Angular2 Router for the following purpose.

Accessing the pages directly with the help of URL
ex. http://localhost/#/home, http://localhost/#/contactus, http://localhost/#/aboutus
Open links such as
http://localhost/#/profileviewpage;param1=param1value;param2=param2value…

luukschoen · May 23, 2017, 10:14am

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.

gopalanbalasubramani · May 23, 2017, 10:37am

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.

luukschoen · May 23, 2017, 11:31am

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.

mburger81 · May 24, 2017, 10:19am

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.

Burmann · June 29, 2017, 7:53pm

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.

mateusdomingos · September 21, 2017, 2:55pm

I got it right. I changed the following thing:

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

after:
@IonicPage()

sampath · January 13, 2018, 9:27am

Thank you so much. That was the issue of me

mariomol · February 23, 2018, 3:16am

Check it out https://github.com/ionic-team/ionic/issues/13945

Topic		Replies	Views
Invalid views to insert ionic-v3	3	4185	July 19, 2021
Navigation error ionic-v3	0	476	July 26, 2017
Numerous issues with deep linking including "Uncaught (in promise): invalid views to insert" ionic-v3	1	528	July 19, 2021
Ionic 2 Error: Uncaught (in promise): invalid views to insert ionic-v3	2	4082	July 19, 2021
Show an error page for invalid segments ionic-v3	1	1146	July 19, 2021

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

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

Code (home.html)

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

Related topics

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