Add webcomponent.

Encanto · May 27, 2021 · 1a87819 · 1a87819
1 parent c07245d
commit 1a87819
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod --output-hashing none",
     "test": "ng test",
     "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "ng lint",

diff --git a/src/app/app.component.css b/src/app/app.component.css
diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,20 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { Injector, NgModule } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 
-import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { FileBrowseComponent } from './file-browse/file-browse.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    FileBrowseComponent
-  ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  declarations: [FileBrowseComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+  constructor(private injector: Injector) {
+
+  }
+
+  ngDoBootstrap(){
+    const fbComp = createCustomElement(FileBrowseComponent, { injector: this.injector });
+    customElements.define('file-browse', fbComp);
+  }
+
+ }
diff --git a/src/app/file-browse/file-browse.component.ts b/src/app/file-browse/file-browse.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import { FileServiceService } from '../services/file-service.service';
 
+
 @Component({
   selector: 'local-file-browse',
   templateUrl: './file-browse.component.html',
@@ -12,7 +14,11 @@ export class FileBrowseComponent implements OnInit {
   public selectedFile;
   private rootPath;
 
-  constructor(private fileService: FileServiceService) {
+  constructor(injector: Injector, private fileService: FileServiceService) {
+    // Convert `FileBrowseComponent` to a custom element.
+    const FileBrowseElement = createCustomElement(FileBrowseComponent, {injector});
+    // Register the custom element with the browser.
+    customElements.define('local-file-browse', FileBrowseElement);
   }
 
   ngOnInit(): void {

diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,6 @@
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+  <file-browse></file-browse>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule, { ngZone: 'noop' })
   .catch(err => console.error(err));