fix: fixed null value display when using angular universal (#852)

fixes #764

integration/angular.json

@@ -51,6 +51,14 @@
             "scripts": []
           },
           "configurations": {
+            "server-e2e": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.server-e2e.ts"
+                }
+              ]
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -115,6 +123,14 @@
               "**/node_modules/**"
             ]
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+              "outputPath": "dist/integration-server",
+              "main": "src/main.server.ts",
+              "tsConfig": "src/tsconfig.server.json"
+          }
         }
       }
     },
@@ -142,4 +158,4 @@
     }
   },
   "defaultProject": "integration"
-}
+}

integration/e2e/protractor-server.conf.js

@@ -0,0 +1,25 @@
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs: [
+        './src/**/*.server-e2e-spec.ts'
+    ],
+    capabilities: {
+        browserName: 'chrome',
+    },
+    directConnect: true,
+    baseUrl: 'http://localhost:4000/',
+    framework: 'jasmine',
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000,
+        print: function() {}
+    },
+    onPrepare() {
+        require('ts-node').register({
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    }
+}

integration/e2e/protractor.conf.js

@@ -25,4 +25,4 @@ exports.config = {
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

integration/e2e/src/app.server-e2e-spec.ts

@@ -0,0 +1,13 @@
+import { browser, by } from 'protractor';
+
+describe('ng-select:universal', () => {
+    beforeEach(() => {
+        browser.driver.get(browser.baseUrl + '/');
+    });
+
+    it('should not have null value', async() => {
+        const input = await browser.driver.findElement(by.css('.ng-input input'));
+        const value = await input.getAttribute('value');
+        expect(value).not.toEqual('null');
+    });
+});

integration/package.json

@@ -2,39 +2,48 @@
     "name": "integration",
     "version": "0.0.0",
     "scripts": {
+        "postinstall": "webdriver-manager update --gecko false --standalone false",
         "ng": "ng",
         "start": "ng serve",
-        "build": "ng build",
+        "start:server": "node ./dist/integration-server/server",
+        "build": "yarn build:client && yarn build:server",
+        "build:client": "ng build --configuration=server-e2e",
+        "build:server": "ng run integration:server && webpack --config ./webpack.server.config.js --progress --colors",
         "test": "ng test",
         "lint": "ng lint",
-        "e2e": "ng e2e"
+        "e2e": "ng e2e",
+        "e2e:server": "concurrently \"yarn start:server\" \"protractor ./e2e/protractor-server.conf.js\" --kill-others --success first"
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^6.0.0",
-        "@angular/common": "^6.0.0",
-        "@angular/compiler": "^6.0.0",
-        "@angular/core": "^6.0.0",
-        "@angular/forms": "^6.0.0",
-        "@angular/http": "^6.0.0",
-        "@angular/platform-browser": "^6.0.0",
-        "@angular/platform-browser-dynamic": "^6.0.0",
-        "@angular/router": "^6.0.0",
+        "@angular/animations": "^6.1.0",
+        "@angular/common": "^6.1.0",
+        "@angular/compiler": "^6.1.0",
+        "@angular/core": "^6.1.0",
+        "@angular/forms": "^6.1.0",
+        "@angular/http": "^6.1.0",
+        "@angular/platform-browser": "^6.1.0",
+        "@angular/platform-browser-dynamic": "^6.1.0",
+        "@angular/platform-server": "^6.1.0",
+        "@angular/router": "^6.1.0",
+        "@nguniversal/express-engine": "^6.1.0",
+        "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
         "core-js": "^2.5.4",
         "rxjs": "^6.0.0",
+        "ts-loader": "^5.2.1",
         "zone.js": "^0.8.26",
         "@ng-select/ng-select": "file:../dist/"
     },
     "devDependencies": {
-        "@angular/compiler-cli": "^6.0.0",
         "@angular-devkit/build-angular": "~0.6.1",
-        "typescript": "~2.7.2",
         "@angular/cli": "~6.0.1",
-        "@angular/language-service": "^6.0.0",
+        "@angular/compiler-cli": "^6.1.0",
+        "@angular/language-service": "^6.1.0",
         "@types/jasmine": "~2.8.6",
         "@types/jasminewd2": "~2.0.3",
         "@types/node": "~8.9.4",
         "codelyzer": "~4.2.1",
+        "concurrently": "^4.0.1",
         "jasmine-core": "~2.99.1",
         "jasmine-spec-reporter": "~4.2.1",
         "karma": "~1.7.1",
@@ -44,6 +53,8 @@
         "karma-jasmine-html-reporter": "^0.2.2",
         "protractor": "~5.3.0",
         "ts-node": "~5.0.1",
-        "tslint": "~5.9.1"
+        "tslint": "~5.9.1",
+        "typescript": "~2.7.2",
+        "webpack-cli": "^3.1.0"
     }
-}
+}

integration/server.ts

@@ -0,0 +1,31 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import { enableProdMode } from '@angular/core';
+import * as express from 'express';
+import { join } from 'path';
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './dist/integration-server/main';
+
+enableProdMode();
+
+const app = express();
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist');
+
+app.engine('html', ngExpressEngine({
+    bootstrap: AppServerModuleNgFactory,
+    providers: [
+        provideModuleMap(LAZY_MODULE_MAP),
+    ],
+}));
+
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'integration'));
+app.get('*.*', express.static(join(DIST_FOLDER, 'integration')));
+app.get('*', (req, res) => {
+    res.render('index', {req});
+});
+app.listen(PORT, () => {
+    console.log(`Node server listening on http://localhost:${PORT}`);
+});

integration/src/app/app.module.ts

@@ -13,7 +13,7 @@ import { NgSelectModule, NG_SELECT_DEFAULT_CONFIG } from '@ng-select/ng-select';
   imports: [
     CommonModule,
     FormsModule,
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'ng-select' }),
     NgSelectModule
   ],
   providers: [

integration/src/app/app.server.module.ts

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

integration/src/environments/environment.server-e2e.ts

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

integration/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,
+  manualBootstrap: false
 };

integration/src/main.server.ts

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

integration/src/main.ts

@@ -8,4 +8,10 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+if (environment.manualBootstrap) {
+  window['doBootstrap'] = () => {
+      platformBrowserDynamic().bootstrapModule(AppModule);
+  };
+} else {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}

integration/src/tsconfig.server.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app-server",
+        "baseUrl": "."
+    },
+    "angularCompilerOptions": {
+        "entryModule": "app/app.server.module#AppServerModule"
+    }
+}

integration/webpack.server.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: { server: './server.ts' },
+    resolve: { extensions: ['.js', '.ts'] },
+    target: 'node',
+    mode: 'none',
+    externals: [/node_modules/],
+    output: {
+        path: path.join(__dirname, 'dist/integration-server'),
+        filename: '[name].js'
+    },
+    module: {
+        rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
+    },
+    plugins: [
+        // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
+        // for 'WARNING Critical dependency: the request of a dependency is an expression'
+        new webpack.ContextReplacementPlugin(
+            /(.+)?angular(\\|\/)core(.+)?/,
+            path.join(__dirname, 'src'), // location of your src
+            {} // a map of your routes
+        ),
+        new webpack.ContextReplacementPlugin(
+            /(.+)?express(\\|\/)(.+)?/,
+            path.join(__dirname, 'src'),
+            {}
+        )
+    ]
+};