commit 9e856ae9b06a335e84381685b49788eba7e1f229
parent 61fcc95fe26b5a430c0cc9c123f1286d3a19120e
Author: MTRNord <mtrnord1@gmail.com>
Date: Sat, 19 May 2018 18:39:52 +0200
Fix server side rendering
Diffstat:
7 files changed, 41 insertions(+), 28 deletions(-)
diff --git a/server.ts b/server.ts
@@ -1,13 +1,11 @@
+// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
-import {enableProdMode} from '@angular/core';
-// Express Engine
-import {ngExpressEngine} from '@nguniversal/express-engine';
-// Import module map for lazy loading
-import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
+
+import { enableProdMode } from '@angular/core';
import * as express from 'express';
-import {join} from 'path';
+import { join } from 'path';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
@@ -19,9 +17,13 @@ const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
+
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
@@ -32,12 +34,8 @@ app.engine('html', ngExpressEngine({
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
-// Example Express Rest API endpoints
-// app.get('/api/**', (req, res) => { });
// Server static files from /browser
-app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
- maxAge: '1y'
-}));
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
@@ -46,5 +44,5 @@ app.get('*', (req, res) => {
// Start up the Node server
app.listen(PORT, () => {
- console.log(`Node Express server listening on http://localhost:${PORT}`);
+ console.log(`Node server listening on http://localhost:${PORT}`);
});
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
@@ -1,6 +1,5 @@
-import {Inject, Injectable} from '@angular/core';
+import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import {DOCUMENT} from '@angular/common';
import {Observable} from 'rxjs';
export interface Tweet {
@@ -47,8 +46,16 @@ export class ApiService {
userUUID: string;
inCallback: boolean;
- constructor(@Inject(DOCUMENT) private document, private http: HttpClient) {
- this.url = document.location.protocol + '//' + document.location.hostname + '/api';
+ /*constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector, @Inject(DOCUMENT) private document, private http: HttpClient) {
+ if (isPlatformServer(this.platformId)) {
+ const req = this.injector.get('request');
+ this.url = req.get('host') + '/api';
+ } else {
+ this.url = document.location.protocol + '//' + document.location.hostname + '/api';
+ }
+ }*/
+
+ constructor(private http: HttpClient) {
}
// Uses http.get() to load data from a single API endpoint
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,5 @@
import { BrowserModule } from '@angular/platform-browser';
-import {ErrorHandler, NgModule} from '@angular/core';
+import {APP_ID, ErrorHandler, Inject, NgModule, PLATFORM_ID} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import * as Raven from 'raven-js';
@@ -27,6 +27,7 @@ import { ApiService } from './api.service';
import {Lightbox} from './utils/lightbox';
import {LinkifyPipe} from './utils/linkifier';
import { NavbarComponent } from './navbar/navbar.component';
+import {isPlatformBrowser} from '@angular/common';
Raven
.config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
environment: 'development',
@@ -80,4 +81,12 @@ export class RavenErrorHandler implements ErrorHandler {
SpinnerComponent,
],
})
-export class AppModule { }
+export class AppModule {
+ constructor(
+ @Inject(PLATFORM_ID) private platformId: Object,
+ @Inject(APP_ID) private appId: string) {
+ const platform = isPlatformBrowser(platformId) ?
+ 'in the browser' : 'on the server';
+ console.log(`Running ${platform} with appId=${appId}`);
+ }
+}
diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts
@@ -1,5 +1,5 @@
import {NgModule} from '@angular/core';
-import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
+import {ServerModule} from '@angular/platform-server';
import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
import {AppModule} from './app.module';
@@ -12,7 +12,6 @@ import {AppComponent} from './app.component';
AppModule,
ServerModule,
ModuleMapLoaderModule,
- ServerTransferStateModule,
],
// Since the bootstrapped component is not inherited from your
// imported AppModule, it needs to be repeated here.
diff --git a/src/app/callback/twitter/twitter.component.ts b/src/app/callback/twitter/twitter.component.ts
@@ -1,11 +1,11 @@
import {throwError as observableThrowError, of} from 'rxjs';
import {delay, mergeMap, retryWhen, take, concat} from 'rxjs/operators';
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, Inject, OnInit, Optional} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ToastrService} from 'ngx-toastr';
import {HttpClient} from '@angular/common/http';
-import {DOCUMENT} from '@angular/common';
+import {APP_BASE_HREF, DOCUMENT} from '@angular/common';
import {ApiService} from '../../api.service';
@Component({
selector: 'app-twitter',
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -3,7 +3,6 @@ import {Component, OnInit} from '@angular/core';
import {ApiService, Paper} from '../api.service';
import * as Raven from 'raven-js';
import {ToastrService} from 'ngx-toastr';
-import {Lightbox} from '../utils/lightbox';
import {concat, delay, mergeMap, retryWhen, take} from 'rxjs/operators';
@Component({
@@ -14,7 +13,7 @@ import {concat, delay, mergeMap, retryWhen, take} from 'rxjs/operators';
export class PapersListComponent implements OnInit {
data: (Paper)[];
- constructor(private apiService: ApiService, private toastr: ToastrService, private lightbox: Lightbox) {
+ constructor(private apiService: ApiService, private toastr: ToastrService) {
Raven.captureBreadcrumb({
message: 'Listing Papers',
category: 'papers-list'
diff --git a/webpack.server.config.js b/webpack.server.config.js
@@ -5,9 +5,10 @@ module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
- mode: "production",
+ mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
- externals: [/(node_modules|main\..*\.js)/],
+ externals: [/node_modules/],
+ devtool: 'source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
