feat: show front-end error in result

hsuanxyz · hsuanxyz · commit c95ef6b546a1 · 2019-12-23T17:12:39.000+08:00
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
@@ -68,6 +68,7 @@
     <div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre [innerHTML]="plainText"></pre></div>
     <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" alt="img"></div>
   </ng-container>
+  <div *ngIf="frontEndError" class="text-plain"><pre>{{frontEndError}}</pre></div>
   <div *ngIf="angularComponent">
     <ng-container *ngComponentOutlet="angularComponent.component;ngModuleFactory: angularComponent.moduleFactory;injector: injector"></ng-container>
   </div>
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
@@ -206,6 +206,7 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderDefaultDisplay() {
+    this.frontEndError = '';
     switch (this.result.type) {
       case DatasetType.TABLE:
         this.renderGraph();
@@ -240,16 +241,17 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderAngular(): void {
-    try {
-      this.runtimeCompilerService.createAndCompileTemplate(this.id, this.result.data).then(data => {
+    this.runtimeCompilerService
+      .createAndCompileTemplate(this.id, this.result.data)
+      .then(data => {
         this.angularComponent = data;
-        // this.angularComponent.moduleFactory
+        this.cdr.markForCheck();
+      })
+      .catch(error => {
+        this.angularComponent = null;
+        this.frontEndError = error.message;
         this.cdr.markForCheck();
       });
-    } catch (e) {
-      this.frontEndError = e.message;
-      console.log(e);
-    }
   }
 
   renderText(): void {
diff --git a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
@@ -11,15 +11,17 @@
  */
 
 import {
+  ChangeDetectionStrategy,
   Compiler,
   Component,
   Injectable,
-  ModuleWithComponentFactories,
   NgModule,
   NgModuleFactory,
+  NO_ERRORS_SCHEMA,
   Type
 } from '@angular/core';
 
+import { CompileDirectiveMetadata, HtmlParser, TemplateParser } from '@angular/compiler';
 import { RuntimeDynamicModuleModule } from '@zeppelin/core';
 import { NgZService } from './ng-z.service';
 
@@ -33,16 +35,17 @@ export class DynamicTemplate {
   ) {}
 }
 
+export class DynamicTemplateError {
+  constructor(public message: string) {}
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class RuntimeCompilerService {
-  // tslint:disable-next-line:no-any
-  private compiledModule?: ModuleWithComponentFactories<any>;
-
   public async createAndCompileTemplate(paragraphId: string, template: string): Promise<DynamicTemplate> {
     const ngZService = this.ngZService;
-    const dynamicComponent = Component({ template: template })(
+    const dynamicComponent = Component({ template: template, selector: `dynamic-${paragraphId}` })(
       class DynamicTemplateComponent {
         z = {
           set: (key: string, value, id: string) => ngZService.setContextValue(key, value, id),
@@ -63,8 +66,13 @@ export class RuntimeCompilerService {
       imports: [RuntimeDynamicModuleModule]
     })(class DynamicModule {});
 
-    this.compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
-    return new DynamicTemplate(template, dynamicComponent, this.compiledModule.ngModuleFactory);
+    try {
+      this.compiler.clearCache();
+      const compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
+      return new DynamicTemplate(template, dynamicComponent, compiledModule.ngModuleFactory);
+    } catch (e) {
+      throw new DynamicTemplateError(`${e}`);
+    }
   }
 
   constructor(private compiler: Compiler, private ngZService: NgZService) {}
