feat(demo): add universal support, add dockerfile (#2925)

* feat(universal): first implementation of universal support

* feat(demo): add universal docs, move useHash to env var

* refactor(demo): fix base href, move universal scripts to subdir

* perf(demo): add gzip compression

* test gcp deploy

* fix(tabs): use renderer instead native methods

.angular-cli.json

@@ -6,7 +6,7 @@
   "apps": [
     {
       "root": "demo/src",
-      "outDir": "demo/dist",
+      "outDir": "demo/dist/browser",
       "assets": [
         "assets",
         "favicon.ico"
@@ -29,7 +29,37 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
+        "prod": "environments/environment.prod.ts",
+        "server": "environments/environment.server.ts"
+      }
+    },
+    {
+      "platform" : "server",
+      "root": "demo/src",
+      "outDir": "demo/dist/server",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.server.ts",
+      "test": "../../scripts/test.ts",
+      "tsconfig": "tsconfig.server.json",
+      "testTsconfig": "../../src/tsconfig.spec.json",
+      "prefix": "",
+      "mobile": false,
+      "serviceWorker": false,
+      "styles": [
+        "../../src/datepicker/bs-datepicker.scss",
+        "assets/css/style.scss",
+        "assets/css/prettify-angulario.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts",
+        "server": "environments/environment.server.ts"
       }
     }
   ],

Dockerfile

@@ -0,0 +1,22 @@
+FROM node
+
+RUN apt-get update
+
+RUN mkdir /home/ngx-bootstrap
+
+WORKDIR  /home/ngx-bootstrap
+
+COPY ./ ./
+
+RUN npm i
+
+RUN npm run build
+
+RUN npm run link
+
+RUN npm run build:dynamic
+
+EXPOSE 3000
+
+CMD ["node", "demo/dist/server.js"]
+

README.md

@@ -91,6 +91,9 @@ First time
  - `npm run build.watch` in first terminal
  - `ng serve` in second
 
+  If you want to run the demo with Angular Universal:
+  - `npm run demo.serve-universal`
+
 
 # Usage & Demo
 

demo/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { GettingStartedComponent } from './common/getting-started/getting-starte
 import { ThemeStorage } from './theme/theme-storage';
 import { StyleManager } from './theme/style-manager';
 import { DocsModule } from './docs';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -27,12 +28,12 @@ import { DocsModule } from './docs';
   ],
   imports: [
     DocsModule,
-    BrowserModule,
     FormsModule,
     HttpModule,
-    RouterModule.forRoot(routes, { useHash: true }),
+    RouterModule.forRoot(routes, {useHash: environment.useHash}),
     Ng2PageScrollModule.forRoot(),
-    BsDropdownModule.forRoot()
+    BsDropdownModule.forRoot(),
+    BrowserModule.withServerTransition({appId: 'ngx-bootstrap'})
   ],
   providers: [
     ThemeStorage,

demo/src/app/app.server.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+import { ServerModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ModuleMapLoaderModule
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppServerModule {}

demo/src/app/common/landing/landing.component.html

@@ -7,7 +7,7 @@
     <h1 class="slogan">Develop better. Faster.</h1>
     <p class="descr">Bootstrap components, powered by Angular</p>
     <div class="btn-block">
-      <a class="btn btn-primary" href="#/getting-started">Get started</a>
+      <a class="btn btn-primary" routerLink="/getting-started">Get started</a>
       <a class="btn btn-outline-secondary" href="https://github.com/valor-software/ngx-bootstrap">Github</a>
     </div>
     <p class="version">{{currentVersion}}</p>

demo/src/app/common/landing/landing.component.ts

@@ -27,12 +27,14 @@ export class LandingComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): any {
-    this.http
-      .get('assets/json/current-version.json')
-      .map(res => res.json())
-      .subscribe((data: any) => {
-        this.currentVersion = data.version;
-      });
+    if (typeof window !== 'undefined') {
+      this.http
+        .get('assets/json/current-version.json')
+        .map(res => res.json())
+        .subscribe((data: any) => {
+          this.currentVersion = data.version;
+        });
+    }
   }
 
   installTheme(theme: 'bs3' | 'bs4') {

demo/src/app/common/top-menu/top-menu.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component } from '@angular/core';
 import { Http } from '@angular/http';
-import { NavigationEnd, Router, UrlSerializer } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 import 'rxjs/add/operator/map';
 
 @Component({
@@ -22,8 +22,27 @@ export class TopMenuComponent implements AfterViewInit {
 
   ngAfterViewInit(): any {
     // todo: remove this sh**
-    this.isLocalhost = location.hostname === 'localhost';
-    this.needPrefix = location.pathname !== '/';
+    if (typeof window !== 'undefined') {
+      this.isLocalhost = location.hostname === 'localhost';
+      this.needPrefix = location.pathname !== '/';
+      this.appUrl =
+        location.protocol +
+        '//' +
+        location.hostname +
+        (this.isLocalhost ? ':' + location.port + '/' : '/');
+      this.http
+        .get('assets/json/versions.json')
+        .map(res => res.json())
+        .subscribe((data: any) => {
+          this.previousDocs = data;
+        });
+      this.http
+        .get('assets/json/current-version.json')
+        .map(res => res.json())
+        .subscribe((data: any) => {
+          this.currentVersion = data.version;
+        });
+    }
     const getUrl = (router: Router) => {
       const indexOfHash = router.routerState.snapshot.url.indexOf('#');
 
@@ -32,29 +51,12 @@ export class TopMenuComponent implements AfterViewInit {
     let _prev = getUrl(this.router);
     this.router.events.subscribe((event: any) => {
       const _cur = getUrl(this.router);
-      this.appHash = location.hash === '#/' ? '' : location.hash;
+      if (typeof window !== 'undefined') {
+        this.appHash = location.hash === '#/' ? '' : location.hash;
+      }
       if (event instanceof NavigationEnd && _cur !== _prev) {
         _prev = _cur;
       }
     });
-
-    this.http
-      .get('assets/json/versions.json')
-      .map(res => res.json())
-      .subscribe((data: any) => {
-        this.previousDocs = data;
-      });
-    this.http
-      .get('assets/json/current-version.json')
-      .map(res => res.json())
-      .subscribe((data: any) => {
-        this.currentVersion = data.version;
-      });
-
-    this.appUrl =
-      location.protocol +
-      '//' +
-      location.hostname +
-      (this.isLocalhost ? ':' + location.port + '/' : '/');
   }
 }

demo/src/app/docs/api-docs/analytics/analytics.ts

@@ -24,7 +24,7 @@ export class Analytics {
   constructor(_location: Location, _router: Router) {
     this._location = _location;
     this._router = _router;
-    this._enabled = window.location.href.indexOf('bootstrap') >= 0;
+    this._enabled = (typeof window != 'undefined') && window.location.href.indexOf('bootstrap') >= 0;
   }
 
   /**

demo/src/assets/json/current-version.json

@@ -1 +1 @@
-{"version":"2.0.0-beta.6"}
+{"version":"2.0.0-beta.7"}

demo/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  useHash: true
 };

demo/src/environments/environment.server.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  useHash: false
+};

demo/src/environments/environment.ts

@@ -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,
+  useHash: true
 };

demo/src/index.html

@@ -34,13 +34,15 @@
   <noscript>Please enable JavaScript to view ngx-bootstrap documentation</noscript>
   <!-- Google analytics-->
   <script>
+    if (typeof window != 'undefined') {
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
     ga('create', 'UA-73071494-1', 'auto');
     ga('send', 'pageview');
+    }
   </script>
   <script async src="assets/js/prettify.min.js"></script>
   <!-- script files will be inserted by html-webpack-plugin -->

demo/src/main.server.ts

@@ -0,0 +1 @@
+export { AppServerModule } from './app/app.server.module';

demo/src/tsconfig.server.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noEmitHelpers" :true,
+    "lib": ["es6", "dom"],
+    "types": [
+      "jasmine",
+      "webpack"
+    ],
+    "mapRoot": "./",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../temp/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  },
+  "angularCompilerOptions": {
+    "entryModule": "app/app.server.module#AppServerModule"
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "demo.deploy-gh-pages": "gh-pages -d gh-pages",
     "demo.build": "run-s build link demo.gen-docs demo.ng-build demo.set-version",
     "demo.serve": "run-s demo.build lite-server",
+    "demo.serve-universal": "run-s build link build:dynamic serve:dynamic",
     "demo.deploy": "run-s demo.build demo.deploy-gh-pages",
     "link": "ngm link -p src --here",
     "lint-pretty": "prettier --config .prettierrc --write -l  \"{demo/src,src}/**/*.ts\"",
@@ -37,7 +38,11 @@
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
     "e2e-cross": "SAUCE=true npm run e2e",
-    "view-stats": "webpack-bundle-analyzer demo/dist/stats.json"
+    "view-stats": "webpack-bundle-analyzer demo/dist/stats.json",
+    "build:dynamic": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "serve:dynamic": "node demo/dist/server.js",
+    "build:client-and-server-bundles": "ng build -bh / --prod --env=server && ng build -bh / --prod --env=server --app 1 --output-hashing=false",
+    "webpack:server": "webpack --config ./scripts/universal/webpack.server.config.js --progress --colors"
   },
   "main": "bundles/ngx-bootstrap.umd.js",
   "module": "index.js",
@@ -70,6 +75,7 @@
     "rxjs": ">=5.4.3"
   },
   "devDependencies": {
+    "@angular/animations": "4.3.6",
     "@angular/cli": "1.5.0",
     "@angular/common": "4.3.6",
     "@angular/compiler": "4.3.6",
@@ -80,9 +86,12 @@
     "@angular/language-service": "4.3.6",
     "@angular/platform-browser": "4.3.6",
     "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/platform-server": "4.3.6",
     "@angular/router": "4.3.6",
     "@angular/service-worker": "1.0.0-beta.16",
     "@angular/tsc-wrapped": "4.3.6",
+    "@nguniversal/express-engine": "1.0.0-beta.3",
+    "@nguniversal/module-map-ngfactory-loader": "1.0.0-beta.3",
     "@types/jasmine": "2.5.54",
     "@types/marked": "0.3.0",
     "@types/node": "8.0.28",
@@ -91,6 +100,7 @@
     "classlist-polyfill": "1.2.0",
     "codecov": "2.3.1",
     "codelyzer": "3.2.0",
+    "compression": "1.7.1",
     "conventional-changelog-cli": "1.3.4",
     "conventional-github-releaser": "1.1.12",
     "core-js": "2.5.1",
@@ -126,6 +136,7 @@
     "require-dir": "0.3.2",
     "rxjs": "5.4.3",
     "ts-helpers": "^1.1.1",
+    "ts-loader": "3.0.5",
     "tslint": "5.7.0",
     "tslint-config-valorsoft": "2.1.1",
     "typedoc": "0.8.0",

scripts/archive.js

@@ -7,7 +7,7 @@ const versionsFilePath = 'assets/json/versions.json';
 const currentVersionFilePath = 'assets/json/current-version.json';
 
 const demoSrcDir = 'demo/src';
-const demoDistDir = 'demo/dist';
+const demoDistDir = 'demo/dist/browser';
 const hostname = 'ngx-bootstrap';
 
 let prevVersion;