Imported Blazor web components into Angular project

Xenoage · Xenoage · commit f51cc7990778 · 2023-11-08T16:47:06.000+01:00
diff --git a/Angular/angular.json b/Angular/angular.json
@@ -19,7 +19,13 @@
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "../Blazor/bin/Debug/net7.0/publish/wwwroot",
+                "output": ".",
+                "ignore": ["index.html"]
+              }
             ],
             "styles": [
               "src/styles.css"
diff --git a/Angular/src/app/app-routing.module.ts b/Angular/src/app/app-routing.module.ts
@@ -14,6 +14,6 @@ const routes: Routes = [
 
 @NgModule({
   imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ]
+  exports: [ RouterModule ],
 })
 export class AppRoutingModule {}
diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html
@@ -1,7 +1,10 @@
+<blazor-counter></blazor-counter>
+<!--
 <h1>{{title}}</h1>
 <nav>
   <a routerLink="/dashboard">Dashboard</a>
   <a routerLink="/heroes">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
 <app-messages></app-messages>
+-->
diff --git a/Angular/src/app/app.module.ts b/Angular/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
@@ -37,6 +37,7 @@ import { MessagesComponent } from './messages/messages.component';
     MessagesComponent,
     HeroSearchComponent
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [ AppComponent ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
 })
 export class AppModule { }
diff --git a/Angular/src/index.html b/Angular/src/index.html
@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="BlazorComponents.styles.css">
+  <script src="_framework/blazor.webassembly.js"></script>
 </head>
 <body>
   <app-root></app-root>
