how to run angular component from .net MAUI blazer app

how to place/integrate angular component inside MAUI blazer by using angular web component and creating custom elements. i am using VS 2022 17.3.0 Preview 2.0 version. i have already developed angular components and its routing which is perfectly running fine individually. after that i have created custom element.

app.module.ts code

  declarations: [  
    AppComponent,  
    UserComponent  
  ],  
  imports: [  
    BrowserModule,  
    CommonModule,  
    AppRoutingModule  
  ],  
  providers: []  
})  
export class AppModule {  
  constructor(injector: Injector) {  
    const e1 = createCustomElement(AppComponent, { injector: injector });  
    customElements.define('wc-app-component', e1);  
  }  
  ngDoBootstrap() { }  
}  

index.html (from wwwroot folder of blazer)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

    <title>Angular Blazer</title>
    <base href="/" />
</head>

<body>
    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <!-- TODO >> add Angular UI as a component here -->
    <script src="main.js" type="module"></script>
    <script src="polyfills.js" type="module"></script>
    <script src="runtime.js" type="module"></script>
    <script src="scripts.js" type="module"></script>
    <script src="vendor.js" type="module"></script>
</body>

</html>

app.component.html

<div class="wrapper">  
  <div class="content">  
    <router-outlet></`outer-outlet>  
  </div>    
</div>  

MyFrontEnd.razor file

@page "/"

@implements IDisposable

@inject IJSRuntime JavaScriptRuntime

<div class="container">
    <div class="row">
@*
        TODO >> add Angular UI as a component here
*@
        <wc-app-component></wc-app-component>

    </div>
</div>

app.routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: '/user', pathMatch: 'full' },
    { path: 'user', component: UserComponent },
  { path: '**', redirectTo: '/user' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

after this when i am building app by command ng build --configuration="development" generated all 4 files like polyfills.js, runtime.js, scripts.js, vendor.js in dist folder so i copied all those files and pasted inside wwwroot folder near index.html. when i am trying to run application Visul Studio by selecting that folder and window option it shows only html(div and texts) of app.components.html but routing is not working. default page or component of user list is not getting display. why routing is not working? did i missed something?