unable to render partial html using knockoutout component

Question

I have defined component like below

module AgeModule {

export class My_Component {
    static componentName: string = 'mycomponent';
    static templateName: string = My_Component.componentName + '-template'; 
    myObs: KnockoutObservable<any>;

    constructor(params) {

        this.myObs = params && params.myObs;

    }
    static registerComponent = () => {
        ko.components.register(My_Component.componentName, { viewModel: My_Component, template: { element: My_Component.templateName } });
    }
}

}

Then in cshtml i registered component like

  AgeModule.My_Component.registerComponent();

and load partial view like

  @Html.Partial("~/Areas/Views/Home/Partials/MyComponent.cshtml", Model)

Then in partial view "MyComponent.cshtml"

<script type="text/html" id="mycomponent-template">
   <div> KSJSDSSSSSSSSSSSSSSSSSSSSSSSSSSSS</div>

 </script>

and i call component like

<mycomponent params="age: ageobs"></mycomponent>

i dont get any sort of errors in console but my partial view is not rendering at all. I dont know how to debug either. How to solve this?

Update

This works when i am binding component

<div data-bind="component: {name: 'mycomponent', params: {age:ageobs}}">


</div>

But doesnt work if u use component tag directly.

Answer 1

I believe the component name must match the id in your "MyComponent.cshtml", so try either changing the static componentName: string = 'mycomponent'; to be editshipment-typeOfGoods or the id to be mycomponent-template