[SOLVED] Angular12 Attributes failing to pass from parent to child in production

Angular12 Attributes failing to pass from parent to child in production

I have a component library I've built, then imported those components into another project.

Inside of the app that I test the library in, which is just straight importing from the library into itself, everything works perfectly.

CompPar is the parent.

CompChild is inside of the parent's html template.

When I use CompPar, it's inside of other components. I am passing a variable called label.

<compar label="Hello!">

In the library project, perfect. Label passes from parent to child and the child uses it.

In the project I'm importing these into, this doesn't work. The label does not pass to the child. It's failing to pass every attribute I try to pass like this EXCEPT the id, which does work for some reason?

It feels like there's something not right when I'm compiling? I tried the "buildOptimizer": false that I've seen in some posts, but either I have it entirely in the wrong place (in the tsconfig.lib.prod.json under "angularCompilerOptions", the angular.json file is calling to this file for configuration) or this isn't the issue.

Really need some help, thank you!

CompPar.ts:

@Component({
    selector: 'lo-dropdown',
    templateUrl: 'dropdown.component.html'
})

export class Dropdown {
    @Input() label: string;
    @Input() id: string;

    constructor(public utils: Utils, private logger: Logger, private elemRef: ElementRef){}

}

CompPar.html:

    <lo-input [attr.id]="id+'_input'" [label]="label">

CompChild.ts:

    @Component({
        selector: 'lo-input',
        templateUrl: 'input.component.html'
    })

    export class InputLo implements OnInit {
        @Input() label: string;
        @Input() id: string;
        ngOnInit(): void {
            console.log("LABEL IN INPUT = " + this.label);
        }
    }

CompChild.html:

    <label [for]="id">{{label}}</label>

Solution

The solution ended up being indeed in the compiling, but not how I would have ever expected.

In the parent's module, I was importing the child component:

import { compchild } from 'library';

declarations: [ comppar, compchild ]

But it turned out, what I needed to do, was import the child's MODULE, not it's component.

import {compchildmodule } from 'library';

imports: [ CommonModule, compchildmodule ]

That's why it was acting like the child didn't exist... because it didn't, in a sense.