e2e protractor test can't detect angular component in multi layer angular router

Question

I have an angular application, i need to implement e2e test in this project.

angular pack: 4.6.6
protractor: 5.3.0

Also i have a multi-layer router in my project, that wrap the router-outlet int o an other component in each layer.

When i need to navigate to one of the low-layer routes for example /notification/groups in the test environment, the program can't get the response from the page and return error:

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds.
This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

Also when i navigate to the login page in test environment, it will be pass without any problem just because it's on the highest layer in the router.

So the problem is about that angular can't detect the components that wrapped into other components with router-outlet.

how i can solve this problem

this is my router configuration:

[
{
        path: "",
        component: ThemeComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                component: DefaultComponent,
                children: [
                    {
                        path: "modbus-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'modbus' }
                    },
                    {
                        path: "snmp-devices",
                        component: DeviceListComponent,
                        data: { deviceType: 'snmp' }
                    },
                    {
                        path: "add-modbus-device",
                        component: ModbusAddDeviceComponent
                    },
                    {
                        path: "edit-modbus-device/:id",
                        component: ModbusEditDeviceComponent
                    },
                    {
                        path: "add-snmp-device",
                        component: SnmpAddDeviceComponent
                    },
                    {
                        path: "edit-snmp-device/:id",
                        component: SnmpEditDeviceComponent
                    },
                    {
                        path: "notification/groups",
                        component: NotificationGroupListComponent
                    },
                    {
                        path: "notification/setting",
                        component: NotificationPrioritySettingComponent
                    },
                    {
                        path: "notification/groups/add",
                        component: NotificationGroupAddComponent,
                        data: { edit: false }
                    },
                    {
                        path: "notification/groups/edit/:id",
                        component: NotificationGroupAddComponent,
                        data: { edit: true }
                    }
                ]
            }
        ],
    }, {
        path: 'login',
        component: AuthComponent
    },
    {
        path: 'logout',
        component: LogoutComponent
    }
]

Answer 1

The error you received:

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

...happens because you have long-living, asynchronous code running inside of an Angular zone.

For instance, this line of code will cause the error above if you try to run an e2e test on it:

export class MyComponent implements OnInit {
    ngOnInit() {
        // Do something in a while
        setTimeout(() => {}, 1000000);
    }
}

To fix the error on the above code, you need to run that setTimeout outside of Angular so that it does not make everything hang.

export class MyComponent implements OnInit {
    constructor(private zone: NgZone) {}

    ngOnInit() {
        this.zone.runOutsideAngular(() => {
            // Do something in a while
            setTimeout(() => {}, 1000000);
        });
    }
}

So many sure either your code or code of third party libraries you are using do not have any long-living asynchronous code, and if they do then you should run them outside of Angular and your problems should disappear. If you don't run them outside of Angular, Angular will wait for them to complete, and if it reaches a timeout (11 seconds in this case), it will give you the error you received.