Angular+ Separate Boot

package.json

@@ -73,10 +73,10 @@
     "@fullcalendar/moment": "^5.11.3",
     "@fullcalendar/moment-timezone": "^5.11.3",
     "@fullcalendar/timegrid": "^5.11.3",
-    "@rollup/plugin-commonjs": "^23.0.4",
-    "@rollup/plugin-multi-entry": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^9.0.2",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-multi-entry": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@stratusjs/angular": "file:packages/angular",
     "@stratusjs/angularjs": "file:packages/angularjs",
     "@stratusjs/angularjs-extras": "file:packages/angularjs-extras",
@@ -120,8 +120,8 @@
     "bowser": "^2.11.0",
     "codelyzer": "^6.0.2",
     "codemirror": "^6.0.1",
-    "core-js": "^3.19.0",
-    "css-loader": "^6.7.1",
+    "core-js": "^3.34.0",
+    "css-loader": "^6.8.1",
     "cssnano": "^5.1.14",
     "del": "^5.0.0",
     "dropzone": "^5.7.1",
@@ -131,7 +131,7 @@
     "glob": "^8.0.3",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
     "gulp-cli": "^2.3.0",
     "gulp-coffee": "^3.0.3",
     "gulp-concat": "^2.6.1",

packages/angular/package.json

@@ -56,7 +56,7 @@
     "@angular/platform-browser-dynamic": "^12.2.16",
     "@angular/router": "^12.2.16",
     "@codemirror/lang-html": "^6.4.0",
-    "@stratusjs/boot": "^0.4.0",
+    "@stratusjs/boot": "^1.2.0",
     "@stratusjs/core": "^0.6.2",
     "@stratusjs/runtime": "^0.12.1",
     "angular-froala-wysiwyg": "^3.2.7",
@@ -65,6 +65,7 @@
     "hammerjs": "^2.0.8",
     "html2pdf.js": "^0.9.2",
     "lodash": "^4.17.21",
+    "ngx-json-viewer": "^3.0.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.7",
     "rxjs-compat": "^6.6.7",

packages/angular/src/app.module.ts

@@ -40,6 +40,7 @@ import {BaseComponent} from './base/base.component'
 // Stratus Custom Directives/Components
 import {ConfirmDialogComponent} from './confirm-dialog/confirm-dialog.component'
 import {EditorComponent} from './editor/editor.component'
+import {JsonComponent} from './json/json.component'
 import {MediaSelectorComponent} from './media-selector/media-selector.component'
 import {SelectorComponent} from './selector/selector.component'
 import {TreeComponent} from './tree/tree.component'
@@ -57,6 +58,11 @@ import {
     FroalaViewModule
 } from 'angular-froala-wysiwyg'
 
+// ngx-json-viewer Module (Required by JSON)
+import {
+   NgxJsonViewerModule
+} from 'ngx-json-viewer'
+
 // Editor Dialogs
 import {CitationDialogComponent} from './editor/citation-dialog.component'
 import {
@@ -111,6 +117,7 @@ const ngModuleImports: any[] = [
     HttpClientModule,
     MaterialModules,
     MatNativeDateModule,
+    NgxJsonViewerModule,
     ReactiveFormsModule,
     // SelectorComponent.forRoot()
 ]
@@ -122,6 +129,7 @@ const ngDeclarations: any[] = [
     CodeViewDialogComponent,
     ConfirmDialogComponent,
     EditorComponent,
+    JsonComponent,
     LinkDialogComponent,
     MediaDialogComponent,
     MediaSelectorComponent,
@@ -138,6 +146,7 @@ const ngEntryComponents: any[] = [
     CodeViewDialogComponent,
     ConfirmDialogComponent,
     EditorComponent,
+    JsonComponent,
     LinkDialogComponent,
     MediaDialogComponent,
     MediaSelectorComponent,
@@ -150,6 +159,7 @@ const ngEntryComponents: any[] = [
 const appModuleComponents = {
     'sa-base': BaseComponent,
     'sa-editor': EditorComponent,
+    'sa-json': JsonComponent,
     'sa-media-selector': MediaSelectorComponent,
     'sa-selector': SelectorComponent,
     'sa-tree': TreeComponent

packages/angular/src/base/base.component.ts

@@ -92,7 +92,7 @@ export class BaseComponent extends RootComponent implements OnInit, OnChanges {
     }
 
     ngOnInit() {
-        console.info('selector.ngOnInit')
+        console.info('base.ngOnInit')
     }
 
     ngOnChanges() {

packages/angular/src/boot.ts

@@ -33,6 +33,7 @@ function angularBoot() {
         // 'sa-base',
         'sa-boot', // Forcibly Boot Angular. Useful if element is not directly on a page onLoad
         'sa-editor',
+        'sa-json',
         'sa-map',
         'sa-media-selector',
         'sa-selector',

packages/angular/src/editor/editor.component.ts

@@ -733,6 +733,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             // Stratus Angular+ Tags
             'sa-boot',
             'sa-editor',
+            'sa-json',
             'sa-map',
             'sa-media-selector',
             'sa-selector',
@@ -837,6 +838,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             // Stratus Angular+ Tags
             'sa-boot',
             'sa-editor',
+            'sa-json',
             'sa-map',
             'sa-media-selector',
             'sa-selector',

packages/angular/src/json/json.component.html

@@ -0,0 +1,2 @@
+<span>Loaded!</span>
+<ngx-json-viewer [json]="data"></ngx-json-viewer>

packages/angular/src/json/json.component.scss

@@ -0,0 +1,3 @@
+sa-json {
+  // stub for now
+}