Angular2 RC5: Kann nicht binden an ‚X‘, da es nicht eine bekannte Eigenschaft von ‚Child‘

Question

Meine Frage ist, ist sehr ähnlich wie diese: Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'

ich von Winkel 2 RC4 zu RC5 migriert haben. Ich habe all-menu-Komponente, die eine untergeordnete Komponente namens "Menü" verwendet. Ich habe erklärt, beide Komponenten in der app.module und erhalten diesen Fehler:

Error: Template parse errors:↵Can't bind to 'menu' since it isn't a known property of 'menu'. ("↵ ↵ ↵][menu]="selectedMenu" (menuDeleted)="removeMenu($event)">"):

all-menu.component.html

<ul class="nav nav-tabs"> 
    <li role="presentation" *ngFor="let menu of menus; trackBy:menu?.id; let i = index" [ngClass]="{active: menu?.id == selectedMenu?.id}" (click)="select($event, i)"> 
     <a>{{menu?.description}}</a> 
    </li> 
    <li role="presentation" (click)="add($event)" [ngClass]="{'disabled':isLoading}"> 
     <a><i class="glyphicon glyphicon-plus"></i></a> 
    </li> 
</ul> 

<menu [menu]="selectedMenu" (menuDeleted)="removeMenu($event)"></menu> 

menu.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 

import { MenusService } from '../../services/menus.service'; 
import { AuthService } from '../../common/auth.service'; 

import { BaseComponent } from '../base.component'; 

import { TranslateService } from 'ng2-translate/ng2-translate'; 

@Component({ 
    selector: 'menu', 
    template: require('./menu.component.html'), 
    providers: [MenusService] 
}) 

export class MenuComponent extends BaseComponent { 
    @Input() public menu: server.MenuDTO; 

    @Output() public menuChanged: EventEmitter<server.MenuDTO> = new EventEmitter<server.MenuDTO>(); 

    @Output() public menuDeleted: EventEmitter<server.MenuDTO> = new EventEmitter<server.MenuDTO>(); 

    private editingDishId: number = -1; 
    private addingDish: boolean = false; 

    constructor(private menusService: MenusService, private authService: AuthService, private translate: TranslateService) { 
     super(); 

     this.menusService.beforeRequest.subscribe(this.actionBeforeRequest); 
     this.menusService.afterRequest.subscribe(this.actionAfterRequest); 

     this.authService.beforeRequest.subscribe(this.actionBeforeRequest); 
     this.authService.afterRequest.subscribe(this.actionAfterRequest); 
    } 

    ngOnInit(): void { 
     if (this.menu) { 
      this.isLoading = false; 
     } else { 
      this.refresh(); 
     } 
    } 

    ... 
} 

app.module.ts

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule, routing], 
    providers: [RestaurantsService, 
      { provide: AuthConfig, useValue: new AuthConfig({ globalHeaders: [{ 'Content-Type': 'application/json' }] }) }, 
      AuthService, 
      LoggedInGuard, 
      { 
       provide: AuthHttp, 
       useFactory: (http: Http, options: RequestOptions, router: Router, authConfig: AuthConfig) => { 
        return new AuthHttp(authConfig, http, router, options); 
       }, 
       deps: [Http, RequestOptions, Router, AuthConfig] 
      }, 
      { provide: TranslateLoader, useClass: ResourcesLoader }, 
      TranslateService 
     ], 
    declarations: [AppComponent, 
     TranslatePipe, 
     IndexComponent, PendingOrdersComponent, LoginComponent, ProfileComponent, MenuComponent, AllMenuComponent, WorkingHoursComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Dies funktionierte in RC4 und ich kann keinen Fehler im Code finden.

Answer 1

Ok, ich habe herausgefunden - das war nicht mein Fehler.

https://github.com/angular/angular/issues/10618

https://github.com/angular/angular-cli/issues/1644

Es scheint Angular Team minification auf RC5 ruiniert hatte. Großartige Neuigkeiten.

Um zu reparieren, müssen Sie die Mangel ausschalten. In meinem Fall habe ich geändert webpack.config:

module.exports = webpackMerge(commonConfig, { 
    ... 

    plugins: [ 
     ... 
     new webpack.optimize.UglifyJsPlugin({ 
      mangle: { screw_ie8: true, keep_fnames: true } //Hack for RC5 https://github.com/angular/angular-cli/issues/1644 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'ENV': JSON.stringify(ENV) 
      } 
     }) 
    ] 
});