Ionic-framework: Invalid views to insert using lazy loading with last nightly

[mburger81]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[ ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
On last nightly which should resolve this #11168 now there are several other errors, like this:

Runtime Error
Uncaught (in promise): invalid views to insert
Stack
Error: Uncaught (in promise): invalid views to insert
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at l (http://localhost:8100/build/polyfills.js:3:3244)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:2600)
    at NavControllerBase._fireError (http://localhost:8100/build/main.js:46751:16)
    at NavControllerBase._failed (http://localhost:8100/build/main.js:46739:14)
    at http://localhost:8100/build/main.js:46794:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
    at Object.onInvoke (http://localhost:8100/build/main.js:4644:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
    at n.run (http://localhost:8100/build/polyfills.js:3:6468)
    at http://localhost:8100/build/polyfills.js:3:3767
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4635:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

    Cordova CLI: 6.5.0 
    Ionic Framework Version: 3.0.1-201704252003
    Ionic CLI Version: 3.0.0-beta7
    ios-deploy version: Not installed
    ios-sim version: Not installed
    OS: Linux 4.10
    Node Version: v6.10.2
    Xcode version: Not installed

P.S. sorry guys, bu it becomes really frustrating handling with LazyLoading router. :cry:

[jgw96]

Hello. Sorry about the frustration! We are still working on our lazy loading story and this will get better in the future. Would you mind posting a repo or plunker we can use to reproduce this issue?

[mburger81]

@jgw96
Honestley, the problem is there are several bugs we opened on ionic-angular, app-scripts and also on ionic-cli.

Some of the bugs where closed without resolving them and some bugs are still there with no attention. For other bugs after hours of tentative to reproduce them in a simple dev environment we released to you, the bugs are there without attention and as you know it's absolutely not simple to reproduce a BUG on a new environment which is not the real dev environment, so many hours of work.
So we really don't know how to continue with our app and honestly in the last few weeks we have had the problem, on releasing a new version of ionic-angular for a bug fixing you opened a few new other bugs. And this not only for one module but also over different modules (ionic-angular / app-scripts / ionic-cli).
So we have no combination of the modules which works. Some combination has bugs other combination doesn't work at all.

So really we are not able to have now a system on which we can develop, and we really don't know if we should go back to an old version where we have some bugs, or if we should go further with a never version where we have other bugs.
Until now in ionic3 we where never in a status where we had no errors on production or dev mode.
So honestly we are completely stopped on our project on production and dev mode from weeks or also from more then a month, this since releasing v3, and we can not return to v2.

Sorry, this is not a criticism, but a desperate message from a DEV team which is working with your great framework.
FIY we are located in Italy so we are all the night in your leisure showing and reading your commits and your issues and waiting for your feedback or your nightly's.

So we hope you can help us as soon as possible and follow us to resolve this issues and we hope we can help you resolve this issues.

THX at all

[mburger81]

This is one of this new BUG we have from latest releases this night:
https://github.com/driftyco/ionic-app-scripts/issues/927

This are other BUGS which was closed but are not resolved
https://github.com/driftyco/ionic-app-scripts/issues/898
https://github.com/driftyco/ionic-app-scripts/issues/877
https://github.com/driftyco/ionic-app-scripts/issues/911

This ISSUE is still there and we can not resolve it, but it is not possibile to reproduce it on a new ENVIRONMENT
https://github.com/driftyco/ionic-app-scripts/issues/893

THIS ISSUES should be closed on 3.1.0 but as we can not migrate to 3.1.0 we can not close them and thest them
https://github.com/driftyco/ionic/issues/11168
https://github.com/driftyco/ionic/issues/11090

There are other problems I tried to discuss on this PR
https://github.com/driftyco/ionic/pull/11128#issuecomment-294958625
As you can see for the last two messages version 3.1.0 probably close the promise bug but opens me a new SEVERE bug on setting the new page on a ion-nav

This are only a SET of BUGs we have and we opened and which are open.

Honestly the thing is, this are not css or other bugs we can handle with some simple workarounds. This are framework problems which stops us to work on production and also on dev.

I hope we can help you as much as possible do makes it work.

THX

[lincolnthree]

Also experiencing this issue since updating to 3.1.0.

[lincolnthree]

Also seeing this randomly, as well:

Error: Uncaught (in promise): removeView was not found at d (http://localhost:8100/build/polyfills.js:3:3991) at l (http://localhost:8100/build/polyfills.js:3:3244) at l (http://localhost:8100/build/polyfills.js:3:2930) at http://localhost:8100/build/polyfills.js:3:3758 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256) at Object.onInvokeTask (http://localhost:8100/build/main.js:4469:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177) at n.runTask (http://localhost:8100/build/polyfills.js:3:7153) at a (http://localhost:8100/build/polyfills.js:3:2312)

[Daskus1]

I am randomly seeing this error:

Error: Uncaught (in promise): nav controller was destroyed
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at l (http://localhost:8100/build/polyfills.js:3:3244)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:2600)
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:50218:16)
    at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:50197:18)
    at http://localhost:8100/build/main.js:50261:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
    at Object.onInvoke (http://localhost:8100/build/main.js:4478:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
    at n.run (http://localhost:8100/build/polyfills.js:3:6468)
    at http://localhost:8100/build/polyfills.js:3:3767
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4469:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)

Also for me upgrading to 3.1.0 broke a lot of things and lazy loading is really not working as expected...

[YouSirY]

I have same problem in lazyload mode
Error: Uncaught (in promise): removeView was not found
at d (http://localhost:8100/build/polyfills.js:3:3991)
at l (http://localhost:8100/build/polyfills.js:3:3244)
at Object.reject (http://localhost:8100/build/polyfills.js:3:2600)
at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44534:16)
at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44522:14)
at http://localhost:8100/build/main.js:44577:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
at Object.onInvoke (http://localhost:8100/build/main.js:4623:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
at n.run (http://localhost:8100/build/polyfills.js:3:6468)
at http://localhost:8100/build/polyfills.js:3:3767
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4614:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)

Ionic App Scripts: 1.3.4
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.7.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

[mburger81]

@jgw96 @brandyscarney
Has someone a solutions for this BUG?? invalid views to insert this bug is cause many other bugs or side effects!

Can you give this a priority?

[bogomips]

Hello, same problem here.
When I try to reach an inner page which is lazy loaded I often get:

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

Error: Uncaught (in promise): invalid views to insert
at d (http://localhost:8100/build/polyfills.js:3:3991)
at l (http://localhost:8100/build/polyfills.js:3:3244)
at Object.reject (http://localhost:8100/build/polyfills.js:3:2600)
at NavControllerBase._fireError (http://localhost:8100/build/main.js:43515:16)
at NavControllerBase._failed (http://localhost:8100/build/main.js:43503:14)
at http://localhost:8100/build/main.js:43558:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
at Object.onInvoke (http://localhost:8100/build/main.js:4477:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
at n.run (http://localhost:8100/build/polyfills.js:3:6468)
at http://localhost:8100/build/polyfills.js:3:3767
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4468:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)

Ionic Framework: 3.1.0
Ionic App Scripts: 1.3.4
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.9.0
OS Platform: Linux 4.10
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36

Reloading, sometimes it works, sometimes the page redirects to the rootPage

[jgw96]

Hello, all! Thanks for all the input, we greatly appreciate you guys concerns and are evaluating all this info as I write this. As I said before we are hard at work on getting our lazy loading implementation polished and ready for the big time. We are aware of some navigation and build issues with lazy loading at the moment which is why we have not pushed it as the default yet. Expect updates on all this soon and again, thanks for using Ionic everyone!

[manucorporat]

So, here's a quick insight of what "invalid views to insert" mean
https://github.com/driftyco/ionic/blob/master/src/navigation/nav-controller-base.ts#L356

Basically it means ALL the components you are trying to insert were NOT resolved (ie any ViewController was created)

[manucorporat]

Error: Uncaught (in promise): nav controller was destroyed

that means, your <ion-nav> or tab was destroyed while a transition was running. So, I believe you are doing something wrong. The good thing here is that NavController handled the error correctly, it will not break your app.

[mtpzone]

Not sure if it only fixes it here for me or could help anyone else but after getting this error

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

I did the following 2 steps and all is working fine now.. That error has stopped for now.

1. I went thru and imported NavParams to every pages' .ts file even though I am not using NavParams and injected into all constructors. YES vs code Typescript does not like that I am not actually using NavParams so puts a squiggle under the import but its ok because its just a warning/help squiggle

2. in the module.ts for each page I noticed some did and some did not have a comma after the page declaration ( probably made with different versions of ionic generate over the last few months?)
   anyway I added that comma back in all the files that didn't have it
   @NgModule({
   declarations: [
   HomePage, <- that comma right there *
   ],.....

Could just be a fluke.. but 1 or both of those things combined has everything working again.

[mburger81]

@jgw96 @manucorporat

Ok, for the third time I created a new github repository which is simulating some of the bugs I mentioned.

https://github.com/mburger81/ionic-lazy.git

This is a ionic project using [email protected] and [email protected], so please be sure to use the right ionic cli.

This repo is using a two "layer" navigation, in the AppComponent is the first ion-nav which is handling loading LoginPage or MainPage where is the second ion-nav which is handling all other pages. Also in any page there is a ionViewCanEnter livecycle where I use my AuthGuard. The AuthGuard is using HTTP calls which doesn't exists, I check always the GUARD in the ERROR handler SUBSCRITION. This is need to simulate Promise and Observable (perhpase there is a better way to do this).

If I open the LoginPage but I'm already logged in I will naviagte to MainPage. If I open MainPage or Page1, Page2, ..., Page5. but I'm not logged in I will navigate to LoginPage.

You can simple checkout repo and do (as you know)

npm install
ionic serve

After that you will see a simple LoginPage, with a button

After this cliick the button Login and you'll redirect to first Page, there you can navigate with Menu over all pages!

As you can see you are in
http://localhost:8100/#/main/page1

Now try to navigate manual in the browser to
http://localhost:8100/#/main/page2
http://localhost:8100/#/main/page3
http://localhost:8100/#/main/page4
http://localhost:8100/#/main/page5

You'll see soon or later this bug:

PLEASE check it and let me know if you where able to reproduce at least this bug.

It is possible if we are implementing something wrong, but it would be nice for us and the other guys which are having this problem if we can resolve this or check what are we doing wrong.

[meladawy]

I confirm having the same issue, restarting ionic from the terminal get it working again and after some works i got the same error message with root page "tabs"

[BOAndrew]

This problem seems to have an easy fix. I'm using it without problems:
Go to your-project/node_modules/ionic-angular/navigation and open deep-linker.js
Then search for nav.push(segment.component.
In version 3.1.1 this is on line 428.
Modify this line:
nav.push(segment.component, segment.data, {
... so it will look like this:
nav.push(segment.component || segment.name, segment.data, {

[mburger81]

@BOAndrew
Good to know this, but naturally this is not a fix in my opinion but only a temporary workaround.

I hope @manucorporat or @jgw96 follow us and can fix this.

[mburger81]

@ionic team was you able to reproduce the bug with my repro?

[jgw96]

Hello everyone! We are evaluating this issue to be added to the milestone for our next release. Thanks!

[jgw96]

And as you can see, this issue is now on the 3.2.0 milestone 🎉

[mburger81]

Great thx a lot!! We can not update ionic before the bug is resolved. We as others are stille there on 3.0.1.
I hope my repo can help you to reproduce the error! Thx

[ChomoAlmeda]

@BOAndrew thanks for the solution, it works great forme. I hope the IONIC team resolve this issue in the next release.

[mburger81]

@BOAndrew I tested your workaround now for the first time with new 3.2.0 but it seems not working for me.

[ghost]

@BOAndrew sadly your Workaround doesn't work for Me :-(

[godspeed529]

@brandyscarney @jgw96 3.2.0 has been released. Can you provide new messaging around the outstanding lazy loading issues?

[mburger81]

Yes please!!!

[ghost]

I have updated to the latest beta and now it works like a charm. It was easy for me to implement it in an existing app and i was really able to reduce size of the initial load and could push Performance also :-)
Cool Thing!

[mburger81]

@obermoserkitz What do you intend with latest beta? The latest beta as an very very old 3.0.0-beta.3, this is a pre 3.0.0! Do you have installed this one or do you intend the latest nightly which is the 3.2.0-201705121627.

[nzhtrtlc]

@jgw96

When i try to go page using url manually it says

Uncaught (in promise): invalid views to insert
Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.9.5
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

How to fix?

[shprink]

Still exists with Ionic 3.2.1

[richardmarais]

I also get it on Ionic 3.2.1

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

Was working, and all of sudden started getting this error. Even if I revert all my changes, I still get this.

(This seems to come from nav-controller-base.js . NavControllerBase.prototype._nextTrns = function ())

[richardmarais]

@vovikdrg, I just have this.nav.setRoot(page.component), which is pretty standard I think.

To test, I remove all content from my app.component.ts (just an empty constructor), and still get the error.

[shprink]

@vovikdrg I use setRoot or Push only. the problem happens when hitting the back button in my case.

[richardmarais]

Not 100% sure yet, I need to test further, but I have the following in my app.html:

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

I think this is the cause.

[will update once tested - am getting an error now for some strange reason Menu: must have a [content] element to listen for drag events on]

UPDATE

I revert my code back to what I had from a week ago (only stopped working today), and I still get:

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

If I remove:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

the error goes away, but I get:

Menu: must have a [content] element to listen for drag events on

[mburger81]

We have the same error as, @shprink. This bug is a long and painful story!

[ryanemax]

long and painful story

[mburger81]

Yea, to bug was in milestone for 3.2 and 3.3 but today was released 3.3 and the bug wasn't resolved. :'(

[tonimartir]

I had the same problem, upgraded to ionic-angular 3.3 and still fails.
Patched line 428 of deep-linker.sj and the problem solved (BOAndrew post)

[danbucholtz]

All,

We are doing a refactor of navigation right now to better facilitate lazy loading. We'll make sure this bug is resolved with the changes.

Thanks,
Dan

[nelsneider]

buenas alguien me puede decir a que llega este error
ERROR Error: Uncaught (in promise): invalid views to insert
at d (polyfills.js:3)
at l (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:322)
at NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4125)
at t.invoke (polyfills.js:3)
at n.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.es5.js:4116)
at t.invokeTask (polyfills.js:3)
at n.runTask (polyfills.js:3)
defaultErrorLogger @ core.es5.js:1084
ErrorHandler.handleError @ core.es5.js:1144
IonicErrorHandler.handleError @ ionic-error-handler.js:63
next @ core.es5.js:4754
schedulerFn @ core.es5.js:3828
SafeSubscriber.__tryOrUnsub @ Subscriber.js:234
SafeSubscriber.next @ Subscriber.js:183
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3814
NgZone.triggerError @ core.es5.js:4185
onHandleError @ core.es5.js:4146
t.handleError @ polyfills.js:3
n.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
a @ polyfills.js:3
invoke @ polyfills.js:3

[nzhtrtlc]

@nelsneider Ionic team are working on refactor for navigation. I believe they're gonna fix it soon.

[kleeb]

when can we expect the next release?

[godspeed529]

https://github.com/ionic-team/ionic/commits/url-changes

[mburger81]

As from meeting notes they should release this week a new version with emprovements on keyboard and lazyloading.
Today they released version 3.4.0, but without lazyloading

:sob: never ending story

[danbucholtz]

This will be in the next ionic release. The nav changes are taking longer than I planned. I'm going to lock this for now since we know what we need to do and it isn't overly constructive at this point.

Thanks,
Dan

[danbucholtz]

This issue is resolved in nightly 🎉 Thanks to @shprink for helping me recreate the scenarios and verify they're resolved.

@mburger81, I think your issue is behaving as designed (though it is strange). I am investigating it. For your use case, you don't need multiple navs. Please join worldwide slack if you wish to discuss further.

Thanks,
Dan