Not recognized camelcase parameters in downgraded component in an Angular hybrid application

Question

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

Answer 1

I finally found the problem, the code shown in the question was correct. The problem was in the webpack build process, for html it uses the webpack html-loader, with this configuration:

{
    test: /\.html$/,
    use: [
    {
        loader: 'html-loader',
        options: {
            minimize: true
        }
    }
}

The minimize option was breaking the camel case attribute. Not specifying the option or setting it to false fixes the problem.

I found the "caseSensitive" option (false by default) is the responsible. In case you want to keep the minification process:

{
    test: /\.html$/,
    use: [
    {
        loader: 'html-loader',
        options: {
            minimize: true,
            caseSensitive: true
        }
    }
}

Sources:

https://webpack.js.org/loaders/html-loader

https://github.com/kangax/html-minifier#options-quick-reference