Angular 2 RC 5 - Cannot be attached to "...", as this is not a known property of "..."

Since upgrading to Angular 2 RC 5, I am asking some problems. I have 3 components (battery, signal and cards) that are used in another component. These 3 components are declared in one module: helpers module. Here is the code:

@NgModule({
    declarations: [
        SignalComponent,
        BatteryComponent,
        MapsComponent
    ],
    imports : [
        BrowserModule,
        FormsModule
    ],
    exports: [
        SignalComponent,
        BatteryComponent,
        MapsComponent
    ]
})
export class HelpersModule {
}

The battery component is as follows:

@Component({
    selector: 'as-my-battery',
    template: `
        <i class="fa fa-{{icon}}" aria-hidden="true"></i>
        `
})

export class BatteryComponent {
    @Input() level: number;
    @Output() icon: string;
    // constructor() { }

    ngOnInit () {
        if (this.level < 5) {
            this.icon = 'battery-empty';
        } else if (this.level >= 5 && this.level < 25) {
            this.icon = 'battery-quarter';
        } else if (this.level >= 25 && this.level < 50) {
            this.icon = 'battery-half';
        } else if (this.level >= 50 && this.level < 75) {
            this.icon = 'battery-three-quarters';
        } else {
            this.icon = 'battery-full';
        }
    }
}

But when I try to use as-my-battery with an input level, I get this error:

Error: Uncaught (in promise): Template parse errors:
Can't bind to 'level' since it isn't a known property of 'as-my-battery'.
1. If 'as-my-battery' is an Angular component and it has 'level' input, then verify that it is part of this module.
2. If 'as-my-battery' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 (""checkbox" name={{data.name}} value={{data.name}}> {{data.name}}
                    <as-my-battery [ERROR ->][level]='data.battery'></as-my-battery>
                    <as-my-signal [level]='data.signal'></as-"): a@19:35

Does anyone else have these problems and end up solving this problem?

I also found this topic, but that was not the answer for me: It is impossible to bind to “data”, because this is not a known property of “training data” '

And finally, this is the bootstrap of my application:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NavbarModule,
        LoginModule,
        HelpersModule,
        KaartModule,
        LijstModule,
        LogsModule,
        InstellingenModule,
        StatistiekenModule,
        routing
    ],
    providers: [ APP_PROVIDERS, appRoutingProviders ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

LijstComponent, :

@NgModule({
    declarations: [
        LijstComponent
    ],
    imports: [
        BrowserModule,
        HelpersModule
    ],
    exports: [
        LijstComponent
    ]
})
export class LijstModule {
}

LijstComponent:

@Component({
    selector: 'as-lijst',
    providers: [DataService, MarkerService, AlertService],
    templateUrl: 'app/lijst/lijst.html',
})

export class LijstComponent {
...
}

html ( - * ngFor, ):

<as-my-battery [level]='data.battery'></as-my-battery>
+4
1

, uglify gulp. mangle false ( config.js) !

0

Source: https://habr.com/ru/post/1651499/


All Articles