LP#1626157 eg-migration is a separate app
authorBill Erickson <berickxx@gmail.com>
Mon, 5 Mar 2018 22:42:21 +0000 (22:42 +0000)
committerBill Erickson <berickxx@gmail.com>
Mon, 5 Mar 2018 22:42:21 +0000 (22:42 +0000)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/eg2-src/.angular-cli.json
Open-ILS/eg2-src/src/app/app.module.ts
Open-ILS/eg2-src/src/app/migration.module.ts [new file with mode: 0644]
Open-ILS/eg2-src/src/environments/environment.migration-prod.ts [new file with mode: 0644]
Open-ILS/eg2-src/src/environments/environment.migration.ts [new file with mode: 0644]
Open-ILS/eg2-src/src/environments/environment.prod.ts
Open-ILS/eg2-src/src/environments/environment.ts
Open-ILS/eg2-src/src/index.html
Open-ILS/eg2-src/src/migration.ts [new file with mode: 0644]
Open-ILS/src/templates/staff/ang2_js.tt2

index a90b800..409f61e 100644 (file)
@@ -5,6 +5,7 @@
   },
   "apps": [
     {
+      "name": "eg",
       "root": "src",
       "outDir": "dist",
       "assets": [
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
+    }, {
+      "name": "eg-migration",
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "migration.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.migration.ts",
+      "environments": {
+        "dev": "environments/environment.migration.ts",
+        "prod": "environments/environment.migration-prod.ts"
+      }
     }
+
   ],
   "e2e": {
     "protractor": {
index b992515..146cd30 100644 (file)
@@ -8,11 +8,6 @@ import {NgModule} from '@angular/core';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; // ng-bootstrap
 import {CookieModule} from 'ngx-cookie'; // import CookieMonster
 
-// XXX required for multi-mode
-import {UpgradeModule, downgradeInjectable} from '@angular/upgrade/static';
-
-import {Router} from '@angular/router';
-
 import {EgBaseComponent} from './app.component';
 import {EgBaseRoutingModule} from './routing.module';
 import {WelcomeComponent} from './welcome.component';
@@ -27,18 +22,12 @@ import {EgPermService} from '@eg/core/perm';
 import {EgPcrudService} from '@eg/core/pcrud';
 import {EgOrgService} from '@eg/core/org';
 
-// TODO: add environment controls for enabling multi-mode?
-// XXX required for multi-mode
-declare var angular: any;
-
-
 @NgModule({
   declarations: [
     EgBaseComponent,
     WelcomeComponent
   ],
   imports: [
-    UpgradeModule, // XXX multi-mode
     EgBaseRoutingModule,
     BrowserModule,
     NgbModule.forRoot(),
@@ -55,39 +44,8 @@ declare var angular: any;
     EgOrgService
   ],
   exports: [],
-  //bootstrap: [EgBaseComponent] // XXX multi-mode
+  bootstrap: [EgBaseComponent]
 })
 
-export class EgBaseModule {
+export class EgBaseModule {}
     
-    // XXX whole class def required for multi-mode only
-
-    constructor(
-        private upgrade: UpgradeModule,
-        private router: Router
-    ) {}
-
-    ngDoBootstrap() {
-        let myWin: any = window; // make TS happy
-
-        console.log(`Ang2 loading Ang1 app ${myWin.ang1PageApp}`);
-
-        if (!myWin.ang1PageApp) {
-            console.error('NO PAGE APP DEFINED');
-            return;
-        }
-
-        angular.module(myWin.ang1PageApp)
-            /*
-            .directive('heroDetail', 
-                downgradeComponent({ component: HeroDetailComponent })
-            */
-            .factory('eg2Net', downgradeInjectable(EgNetService))
-        ;
-
-        // some of our ang1 apps are not strict-di compliant :(
-        this.upgrade.bootstrap(document.body, [myWin.ang1PageApp]);
-    }
-
-}
-
diff --git a/Open-ILS/eg2-src/src/app/migration.module.ts b/Open-ILS/eg2-src/src/app/migration.module.ts
new file mode 100644 (file)
index 0000000..c5fa3ce
--- /dev/null
@@ -0,0 +1,76 @@
+/**
+ * EgMigrationModule
+ *
+ * 1. Loads the ang1 => ang2 upgrade components.
+ * 2. Downgrades and injects shared ang2 services and components for use
+ *    by ang1.
+ * 3. Bootstraps ang1.
+ */
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+// Load ng-bootstrap because it might be used by downgraded components
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; // ng-bootstrap
+import {CookieModule} from 'ngx-cookie'; // import CookieMonster
+import {UpgradeModule, downgradeInjectable, 
+    downgradeComponent} from '@angular/upgrade/static';
+
+// Import and 'provide' globally required services.
+import {EgEventService} from '@eg/core/event';
+import {EgStoreService} from '@eg/core/store';
+import {EgIdlService} from '@eg/core/idl';
+import {EgNetService} from '@eg/core/net';
+import {EgAuthService} from '@eg/core/auth';
+import {EgPermService} from '@eg/core/perm';
+import {EgPcrudService} from '@eg/core/pcrud';
+import {EgOrgService} from '@eg/core/org';
+
+declare var angular: any;
+
+@NgModule({
+  declarations: [],
+  imports: [
+    UpgradeModule,
+    BrowserModule,
+    NgbModule.forRoot(),
+    CookieModule.forRoot()
+  ],
+  providers: [
+    EgEventService,
+    EgStoreService,
+    EgIdlService,
+    EgNetService,
+    EgAuthService,
+    EgPermService,
+    EgPcrudService,
+    EgOrgService
+  ],
+  exports: []
+})
+
+export class EgMigrationModule {
+    
+    constructor(private upgrade: UpgradeModule) {}
+
+    ngDoBootstrap() {
+        let myWin: any = window; // make TS happy
+
+        if (!myWin.ang1PageApp) {
+            console.error('NO PAGE APP DEFINED');
+            return;
+        }
+
+        console.log(`Ang2 loading Ang1 app ${myWin.ang1PageApp}`);
+
+        angular.module(myWin.ang1PageApp)
+            /* sample directive downgrade
+            .directive('heroDetail', 
+                downgradeComponent({ component: HeroDetailComponent })
+            */
+            .factory('eg2Net', downgradeInjectable(EgNetService))
+        ;
+
+        this.upgrade.bootstrap(document.body, [myWin.ang1PageApp]);
+    }
+}
+
+
diff --git a/Open-ILS/eg2-src/src/environments/environment.migration-prod.ts b/Open-ILS/eg2-src/src/environments/environment.migration-prod.ts
new file mode 100644 (file)
index 0000000..a5106bb
--- /dev/null
@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: true,
+  migration: true
+};
diff --git a/Open-ILS/eg2-src/src/environments/environment.migration.ts b/Open-ILS/eg2-src/src/environments/environment.migration.ts
new file mode 100644 (file)
index 0000000..72011ad
--- /dev/null
@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  migration: true
+};
index 3612073..5734ce1 100644 (file)
@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  migration: false
 };
index b7f639a..19c3e7e 100644 (file)
@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  migration: false
 };
index a876726..b169c21 100644 (file)
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!-- link to bootstrap manually for the time being.  With 
         ng-bootstrap, we only need the CSS, not the JS -->
-  <link rel="stylesheet" 
-    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" 
-    integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 
-    crossorigin="anonymous">
+  <link rel="stylesheet" crossorigin="anonymous"
+    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm">
 </head>
 <body>
   <eg-root></eg-root>
diff --git a/Open-ILS/eg2-src/src/migration.ts b/Open-ILS/eg2-src/src/migration.ts
new file mode 100644 (file)
index 0000000..c1454cb
--- /dev/null
@@ -0,0 +1,26 @@
+/**
+ * Evergreen AngularJS Migration Module Loader
+ *
+ * This module allows us to bootstrap the EgMigrationModule in its
+ * own environment.  
+ *
+ * It's possible to bootstrap EgBaseModule or EgMigrationModule based
+ * on an environment variable, instead of treating like separate apps, 
+ * but that is subject to the webpack lazyloading funkiness noted here:
+ * https://github.com/gdi2290/angular-starter/issues/1936
+ * This may also give us much needed flexibility down the road.
+ *
+ */
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { EgMigrationModule } from './app/migration.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(EgMigrationModule)
+  .catch(err => console.log(err));
+
index 24db613..0aa2bb6 100644 (file)
@@ -1,6 +1,13 @@
+<!-- 
+Import the compiled Angular2 shell script.
+-->
 
-<script type="text/javascript" src="/eg2/inline.bundle.js"></script>
-<script type="text/javascript" src="/eg2/polyfills.bundle.js"></script>
-<script type="text/javascript" src="/eg2/vendor.bundle.js"></script>
-<script type="text/javascript" src="/eg2/main.bundle.js"></script>
+<script type="text/javascript" 
+  src="[% ctx.media_prefix %]/js/ui/default/staff/ng2-shell/inline.bundle.js"></script>
+<script type="text/javascript" 
+  src="[% ctx.media_prefix %]/js/ui/default/staff/ng2-shell/polyfills.bundle.js"></script>
+<script type="text/javascript" 
+  src="[% ctx.media_prefix %]/js/ui/default/staff/ng2-shell/vendor.bundle.js"></script>
+<script type="text/javascript" 
+  src="[% ctx.media_prefix %]/js/ui/default/staff/ng2-shell/main.bundle.js"></script>