CODEWITHSUNDEEP
angulartypescript
LbISS
LbISS

Reputation: 630

Angular2 RC5: Can't bind to 'X' since it isn't a known property of 'Child'

My question is very similar to this one: Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'

I have migrated from angular 2 RC4 to RC5. I have all-menu component, which uses a child component called 'menu'. I have declared both components in the app.module and get this error:

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 { }

This were working in RC4 and i can't find any error in the code.

Upvotes: 2

Views: 1145

Answers (1)

LbISS
LbISS

Reputation: 630

Ok, i have found out - that was not my error.

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

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

It seems Angular team had ruined minification on RC5. Great news.

To fix you have to turn mangle off. In my case i have changed 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)
            }
        })
    ]
});

Upvotes: 1

Related Questions