Ionic-framework: Ionic4.alpha2: Can't bind to 'name' since it isn't a known property of 'ion-router-outlet'.

[snowyu]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[X] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Current behavior:

Error: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'ion-router-outlet'.

1. If 'ion-router-outlet' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'ion-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("r="let tab of tabs" [label]="tab.title" [icon]="tab.icon" [href]="tab.href">
   ][name]="tab.name">
   

Expected behavior:

It should not be an error.

Steps to reproduce:

use the standard ionic4 tabs demo.

Related code:

tabs.page.html:

<ion-tabs>
  <ion-tab *ngFor="let tab of tabs" [label]="tab.title" [icon]="tab.icon" [href]="tab.href">
    <ion-router-outlet [name]="tab.name"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

tabs.module.ts:

import { CommonModule } from '@angular/common';
@NgModule({
  imports: [
    CommonModule,
    //...
  ],
})
export class TabsPageModule {}

tabs.page.ts:

import { Component } from '@angular/core';

interface ITab {
  name: string;
  title: string;
  icon: string;
  href?: string;
}

@Component({
  selector: 'app-page-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})

export class TabsPage {
  tabs: ITab[] = [
    {
      name: 'home',
      title: 'Home',
      icon: 'home'
    },
    {
      name: 'about',
      title: 'About',
      icon: 'information-circle'
    },
    {
      name: 'contacts',
      title: 'Contacts',
      icon: 'contacts'
    }
  ];

  initTabs(aTabs) {
    for (const tab of aTabs) {
      tab.href = `/tabs/(${tab.name}:${tab.name}`;
    }
  }

  constructor() {
    this.initTabs(this.tabs);
  }

}

Other information:

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

   @ionic/cli-utils  : 2.0.0-rc.5
   ionic (Ionic CLI) : 4.0.0-rc.5

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.5.7
   @angular-devkit/schematics : 0.5.7
   @angular/cli               : 6.0.0-rc.5
   @ionic/schematics-angular  : 1.0.0-rc.5
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 4.0.0-alpha.2

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.1
   npm               : 5.6.0
   OS                : Linux 4.15

[haleminh]

Hi @brandyscarney,

I add 1 more test result, can not make scrollable tabs working with scrollable="true". It working normally in StencilJS but not with ionic angular.

[haleminh]

Hi @brandyscarney,

I found another bug, tabbarPlacement="top" not working. Tabs display over Page Header.

[danielehrhardt]

It is also not working to navigate to another page inside a page

[victorjatoba]

This issue is the same reported on #15190

[brandyscarney]

Thanks for the isuse! This is a known issue with Angular: https://github.com/angular/angular/issues/12522

Please watch that issue for updates, thanks!

[ionitron-bot[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.