[Ionic 4] Can't bind to 'name' since it isn't a known property of 'ion-router-outlet'

[dtaalbers]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.6
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v8.9.4 (/Users/dtaalbers/.nvm/versions/node/v8.9.4/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /usr/local/Cellar/android-sdk/24.4.1_1

Describe the Bug
I am trying to generate tabs based of the roles the current user has. Can't bind property to name of the ion-router-outlet component. I tried both

<ion-router-outlet name="{{tab.name}}"></ion-router-outlet>
and
<ion-router-outlet [name]="tab.name"></ion-router-outlet>

When I remove the name binding of the outlet component I get the following error

Error: Cannot find a differ supporting object '[object HTMLElement]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

This error can be fixed with a pipe explained here but its still doesn't iterate over my tabs.

Related Code
My viewmodel

export class TabsPage extends BaseComponent implements OnInit {

    private availableTabs: any[] = [
        {
            label: 'Collecties',
            name: 'pictures',
            icon: 'images',
            href: '/tabs/(pictures:pictures)',
            roles: [
                UserRoles.ReadPictures
            ]
        },
        {
            label: 'Profiel',
            name: 'my-profile',
            icon: 'person',
            href: '/tabs/(my-profile:my-profile)',
        },
        {
            label: 'Over',
            name: 'about',
            icon: 'phone-portrait',
            href: '/tabs/(about:about)',
        }
    ];

    private tabs: any[] = [];

    public async ngOnInit(): Promise<void> {
        await super.ngOnInit();
        this.generateTabs();
    }

    private generateTabs(): void {
        for (const tab of this.availableTabs) {
            if (!tab.roles) {
                this.tabs.push(tab);
            } else {
                if (tab.roles.some(x => this.currentUser.roles.some(y => y === x))) {
                    this.tabs.push(tab);
                }
            }
        }
    }
}

View:

<ion-tabs *ngIf="tabs.length > 0" #tabs color="primary">
    <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab>
    <ion-tab *ngFor="let tab of tabs" [label]="tab.label" [icon]="tab.icon" [href]="tab.href">
        <ion-router-outlet name="{{tab.name}}"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

Expected Behavior
I expect to be able to bind to the name property and iterate the tabs array to generate tabs.

[wangzhe110]

能问一下 路由是怎么跳的吗，home下面的子页面要怎么定义路由
Can you ask how routing is done? How does the subpage under home define routing

[dtaalbers]

Not sure what you mean. But the routing is configured in the tabs.router.module.ts.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutPage } from '../about/about.page';
import { HomePage } from '../home/home.page';
import { MyProfilePage } from '../my-profile/my-profile.page';
import { PicturesPage } from '../pictures/pictures.page';
import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                outlet: 'home',
                component: HomePage
            },
            {
                path: 'pictures',
                outlet: 'pictures',
                component: PicturesPage
            },
            {
                path: 'my-profile',
                outlet: 'my-profile',
                component: MyProfilePage
            },
            {
                path: 'about',
                outlet: 'about',
                component: AboutPage
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsPageRoutingModule { }

[wangzhe110]

What if it's a sub-page of the home page and it's bound there

[wangzhe110]

if home's child page, where bind it

[dtaalbers]

I guess add it to the children routes of the homepage? But this issue is a bug report and not about that. Also not really a place to ask for help. If you have questions please create your own ticket or ask it on the ionic forum.

[wangzhe110]

ok , thankyou

[GuilhermeBCC]

you can not bind the name property to router-outlet. This is a problem with Angular not with Ionic.
See angular/angular#12522

[brandyscarney]

Closing as a duplicate of #14366

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.