Angular Elements using ngx-build-plus and npm publish

I am trying to build an app that:

1. contains angular elements
2. publish this app in npm as a library
3. Install the library in a different angular application
4. use the custom element created in this new application

I am half way there. I am able to publish the angular app and use it as a dependency in another app. Only issue is, I am not able to read the actual angular element. Instead I am able to only directly read and use the component exported from that library directly.

App containing angular elements:

import { SomeComponent1 } from './my-project.component';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    SomeComponent1
  ],
  imports: [
  ],
  exports: [
    SomeComponent1
  ]
  entryComponents: [
    SomeComponent1
  ]
})
export class MyProjectModule { 
  constructor(private injector: Injector){}
  ngDoBootstrap() {
    const element = createCustomElement(SomeComponent1, {injector: this.injector});
    customElements.define('my-prj-ele', element);
  }
}

This is the component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'lib-my-project',
  template: `
    <p>
      my-project works! {{msg}}
    </p>
  `,
})
export class SomeComponent1 {
  @Input() msg:string = "Initial";
}

This is the structure of the above app: *

-my-workspace
    - projects
        - my-project
            -src/lib
                -my-project.module.ts
                -my-project.component.ts
            -public-api.ts
            -package.json
            -angular.json

published this and installed in app 2:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyProjectModule  } from 'my-project';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyProjectModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { MyProjectComponent } from 'my-project';

@Component({
  selector: 'app-root',
  template: `<my-prj-ele></my-prj-ele> ***NOT working***
             <lib-my-project [msg]="'TEST'"></lib-my-project>`, ***Working***
})
export class AppComponent { }

What am I missing?