Added support for Angular 9

browserslist

@@ -9,4 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.

builders/plugin-builder/index.ts

@@ -114,15 +114,22 @@ function patchWebpackConfig(config: webpack.Configuration, options: Options) {
   const [modulePath, moduleName] = options.modulePath.split('#');
 
   const factoryPath = `${
+    // modulePath.includes('.') ? modulePath : `${modulePath}/${modulePath}`
+    // }.ngfactory`;
     modulePath.includes('.') ? modulePath : `${modulePath}/${modulePath}`
-    }.ngfactory`;
-  const entryPointContents = `
-       export * from '${modulePath}';
-       export * from '${factoryPath}';
-       import { ${moduleName}NgFactory } from '${factoryPath}';
-       export default ${moduleName}NgFactory;
-    `;
-  patchEntryPoint(entryPointContents);
+    }`;
+  // const entryPointContents = `
+  //      export * from '${modulePath}';
+  //      export * from '${factoryPath}';
+  //      import { ${moduleName}NgFactory } from '${factoryPath}';
+  //      export default ${moduleName}NgFactory;
+  //   `;
+    const entryPointContents = `
+    export * from '${modulePath}';
+    import { ${moduleName} } from '${modulePath}';
+    export default ${moduleName};
+ `;
+patchEntryPoint(entryPointContents);
 
   config.output.filename = `${pluginName}.js`;
   config.output.library = pluginName;

package.json

@@ -18,42 +18,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.0.0",
-    "@angular/common": "~8.0.0",
-    "@angular/compiler": "~8.0.0",
-    "@angular/core": "~8.0.0",
-    "@angular/forms": "~8.0.0",
-    "@angular/http": "~7.2.0",
-    "@angular/platform-browser": "~8.0.0",
-    "@angular/platform-browser-dynamic": "~8.0.0",
-    "@angular/platform-server": "~8.0.0",
-    "@angular/router": "~8.0.0",
+    "@angular/animations": "~9.1.0",
+    "@angular/common": "~9.1.0",
+    "@angular/compiler": "~9.1.0",
+    "@angular/core": "~9.1.0",
+    "@angular/forms": "~9.1.0",
+    "@angular/platform-browser": "~9.1.0",
+    "@angular/platform-browser-dynamic": "~9.1.0",
+    "@angular/platform-server": "9.1.0",
+    "@angular/router": "~9.1.0",
     "@nguniversal/express-engine": "^7.1.1",
     "@nguniversal/module-map-ngfactory-loader": "7.1.1",
     "core-js": "^3.1.3",
+    "dominio": "^1.1.1",
     "express": "^4.15.2",
-    "rxjs": "~6.5.2",
+    "rxjs": "~6.5.4",
     "systemjs": "3.1.6",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.1",
-    "@angular-devkit/build-ng-packagr": "~0.800.1",
-    "@angular/cli": "~8.0.1",
-    "@angular/compiler-cli": "~8.0.0",
-    "@angular/language-service": "~8.0.0",
-    "@types/node": "~12.0.4",
-    "codelyzer": "^5.0.0",
-    "karma": "~4.1.0",
+    "@angular-devkit/build-angular": "~0.901.0",
+    "@angular-devkit/build-ng-packagr": "~0.901.0",
+    "@angular/cli": "~9.1.0",
+    "@angular/compiler-cli": "~9.1.0",
+    "@angular/language-service": "~9.1.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "karma": "~4.4.1",
     "ng-packagr": "^5.2.0",
     "prettier": "^1.16.4",
     "ts-loader": "^6.0.2",
-    "ts-node": "~8.2.0",
+    "ts-node": "~8.3.0",
     "tsickle": ">=0.34.0",
-    "tslib": "^1.9.0",
-    "tslint": "~5.17.0",
-    "typescript": "~3.4.5",
-    "webpack-cli": "^3.1.0"
+    "tslib": "^1.10.0",
+    "tslint": "~6.1.0",
+    "typescript": "~3.8.3",
+    "webpack-cli": "^3.3.12"
   }
 }

projects/shared/package.json

@@ -2,7 +2,7 @@
   "name": "shared",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^7.2.0",
-    "@angular/core": "^7.2.0"
+    "@angular/common": "~9.1.0",
+    "@angular/core": "~9.1.0"
   }
 }

projects/shared/src/public-api.ts

@@ -4,3 +4,6 @@
 
 export * from './lib/shared.component';
 export * from './lib/shared.module';
+export * from './lib/button/button.component';
+export * from './lib/tabs/tab.component';
+export * from './lib/tabs/tabs.component';

server.ts

@@ -8,14 +8,35 @@ import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
 import * as express from 'express';
 import {join} from 'path';
 
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+
+const domino = require('domino');
+const fs = require('fs');
+const path = require('path');
+const template = fs.readFileSync(path.join(DIST_FOLDER, 'index.html')).toString();
+const win = domino.createWindow(template);
+
+global['window'] = win;
+Object.defineProperty(win.document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    };
+  },
+});
+global['document'] = win.document;
+global['CSS'] = null;
+// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
+global['Prism'] = null;
+
 // Faster server renders w/ Prod mode (dev mode never needed)
 enableProdMode();
 
 // Express server
 const app = express();
 
 const PORT = process.env.PORT || 4000;
-const DIST_FOLDER = join(process.cwd(), 'dist/browser');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
 const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
@@ -48,6 +69,10 @@ app.get('*.*', express.static(DIST_FOLDER, {
   maxAge: '1y'
 }));
 
+app.get("/", (req, res) => {
+  res.sendFile(DIST_FOLDER + '/index.html');
+})
+
 // All regular routes use the Universal engine
 app.get('*', (req, res) => {
   res.render('index', { req });

src/app/app.component.ts

@@ -1,10 +1,15 @@
 import {
+  Compiler,
   Component,
   Injector,
+  NgModuleFactory,
   OnInit,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
+
+// import { Compiler, Component, ComponentFactory, Injector, NgModuleFactory, Type, ViewChild, ViewContainerRef } from '@angular/core';
+
 import { PluginLoaderService } from './services/plugin-loader/plugin-loader.service';
 
 @Component({
@@ -16,6 +21,7 @@ export class AppComponent implements OnInit {
   @ViewChild('targetRef', { read: ViewContainerRef, static: true }) vcRef: ViewContainerRef;
 
   constructor(
+    private compiler: Compiler,
     private injector: Injector,
     private pluginLoader: PluginLoaderService
   ) {}
@@ -25,13 +31,32 @@ export class AppComponent implements OnInit {
   }
 
   loadPlugin(pluginName: string) {
-    this.pluginLoader.load(pluginName).then(moduleFactory => {
-      const moduleRef = moduleFactory.create(this.injector);
-      const entryComponent = (moduleFactory.moduleType as any).entry;
-      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
-        entryComponent
-      );
-      this.vcRef.createComponent(compFactory);
-    });
+    this.pluginLoader.load(pluginName).then(elementModuleOrFactory => {
+        if (elementModuleOrFactory instanceof NgModuleFactory) {
+          // if ViewEngine
+          return elementModuleOrFactory;
+        } else {
+          try {
+            // if Ivy
+            return this.compiler.compileModuleAsync(elementModuleOrFactory);
+          } catch (err) {
+            throw err;
+          }
+        }
+      })
+      .then(moduleFactory => {
+        try {
+          const elementModuleRef = moduleFactory.create(this.injector);
+          const moduleInstance = elementModuleRef.instance;
+
+          const entryComponent = (moduleFactory.moduleType as any).entry;
+          const compFactory = elementModuleRef.componentFactoryResolver.resolveComponentFactory(
+            entryComponent
+          );
+          this.vcRef.createComponent(compFactory);
+            } catch (err) {
+          throw err;
+        }
+      });
   }
 }

src/app/app.server.module.ts

@@ -6,7 +6,6 @@ import {
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 import { PluginLoaderService } from './services/plugin-loader/plugin-loader.service';
 import { ServerPluginLoaderService } from './services/plugin-loader/server-plugin-loader.service';
 
@@ -15,7 +14,6 @@ import { ServerPluginLoaderService } from './services/plugin-loader/server-plugi
     AppModule,
     ServerModule,
     ServerTransferStateModule,
-    ModuleMapLoaderModule
   ],
   providers: [
     { provide: PluginLoaderService, useClass: ServerPluginLoaderService }

src/polyfills.ts

@@ -35,15 +35,15 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
  * The following flags will work for all browsers.
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
@@ -55,7 +55,8 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

tsconfig.json

@@ -10,7 +10,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],