},
"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": {
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';
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(),
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]);
- }
-
-}
-
--- /dev/null
+/**
+ * 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]);
+ }
+}
+
+
--- /dev/null
+// 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
+};
--- /dev/null
+// 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
+};
export const environment = {
- production: true
+ production: true,
+ migration: false
};
// 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
};
<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>
--- /dev/null
+/**
+ * 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));
+
+<!--
+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>