I have a angularjs 1.6 that has just been configured to have hybrid bootstrap with angular 8.
I created 2 new components DriverDetail and DriverDetailLine both in angular 8:
@Component({
selector: 'driver-detail',
template: require('./driver-detail.component.html')
})
export class DriverDetail {
@Input('driver') driver: Driver;
constructor() {}
}
@Component({
selector: 'driver-detail-line',
template: require('./driver-detail-line.component.html')
})
export class DriverDetailLine {
@Input('titleKey') titleKey;
@Input('icon') icon;
constructor() {}
}
DriverDetail is downgraded to be used from angularjs like this:
app.directive(
'driverDetail',
downgradeComponent({ component: DriverDetail, inputs: ['driver'] }) as angular.IDirectiveFactory,
);
When DriverDetailLine is used inside DriverDetail passing the titleKey input parameter:
<driver-detail-line [titleKey]="'IN_TRANSIT'" [icon]="'directions_car'">
</driver-detail-line>
This error is produced:
Uncaught Error: Template parse errors: Can't bind to 'title-key' since it isn't a known property of 'driver-detail-line'. 1. If 'driver-detail-line' is an Angular component and it has 'title-key' input, then verify that it is part of this module. 2. If 'driver-detail-line' 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. (" test ][title-key]="'DRIVER_DASHBOARD.IN_TRANSIT'" [icon]="'directions_car'"> {{ 'LABEL"): ng:///DriverDetailModule/DriverDetail.html@0:51 at syntaxError (compiler.js:2687) at TemplateParser.parse (compiler.js:12254) at JitCompiler._parseTemplate (compiler.js:27526) at JitCompiler._compileTemplate (compiler.js:27513) at eval (compiler.js:27456) at Set.forEach () at JitCompiler._compileComponents (compiler.js:27456) at eval (compiler.js:27366) at Object.then (compiler.js:2678) at JitCompiler._compileModuleAndComponents (compiler.js:27365)
Note that the components work correctly if the camel case parameter is not used, or if its name is changed to a non-camel case name.
Have also tried in other formats like:
[title-key]="'IN_TRANSIT'"
[titlekey]="'IN_TRANSIT'"
But also got a similar error
The same happens when trying to use a third party component, when using a parameter in camel case it will produce the same error.
Many thanks, Miguel
Edit for more information:
@NgModule({
imports: [],
declarations: [
DriverDetail,
DriverDetailLine
],
entryComponents: [
DriverDetail,
DriverDetailLine
]
})
export class DriverDetailModule {
}