Friday, 12 May 2017

angular4 server side rendering issue

I am trying to add server-side rendering to my angular 4 (4.0.3) app using the universal, already integrated to platform-server. I used this project as an example: https://github.com/FrozenPandaz/ng-universal-demo and also I was following this guide: https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx

My app.server.module, which is in app/server folder:

import {AppModule} from "../app.module";
import {ServerModule} from "@angular/platform-server";
import {NgModule} from "@angular/core";
import {AppComponent} from "../app.component";
import {BrowserModule} from "@angular/platform-browser";
import {APP_BASE_HREF} from '@angular/common';
import {routing} from "../app.routes";


@NgModule({
        bootstrap: [AppComponent],
        imports: [
            BrowserModule.withServerTransition({
                appId: 'kassir'
            }),
            ServerModule,
            AppModule,
            routing

        ],
    providers: [
        {provide: APP_BASE_HREF, useValue: "/site/"}
    ]
    }
)

export class ServerAppModule {

}

tsconfig.server.json:

 {
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },

  "angularCompilerOptions": {
    "entryModule": "./app/server/app.server.module#ServerAppModule"
  },

  "exclude": [
    "node_modules",
    "dist",
    "src/**/*.spec.ts",
    "src/**/*.e2e.ts",
    "../src/main.browser.aot.ts"

  ],

  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },

  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

webpack config for server, which is merged then to the common config:

const ngtools = require('@ngtools/webpack');
const path = require('path');
const ngcWebpack = require('ngc-webpack');
const helpers = require('./helpers');


module.exports = function(env){
    return {
        entry:{
            "main":  helpers.root('./src/main.server.ts')
        },
        output: {
            path: path.join(process.cwd(), "dist/server"),
            filename: "[name].server.bundle.js",
            //chunkFilename: "[id].server.chunk.js"
        },

        node: {
            fs: 'empty'
        },

        plugins: [
            new ngtools.AotPlugin({
                "entryModule":  helpers.root('/src/app/server/app.server.module.ts#ServerAppModule'),
                "exclude": [],
                "tsConfigPath": helpers.root("./tsconfig.server.json"),
                "skipCodeGeneration": true
            }),

        ],

        target: 'node',
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loaders: ['@ngtools/webpack', 'angular2-template-loader']
                },

            ]
        }
    }
};

Everything builds ok, main.server.bundle.js gets generated but when i start it

nodemon dist/main.server.bundle.js

i get a clean exit even with an empty server:

import * as express from 'express';
var server = express();
  server.listen(8080, function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log("server started at port 8080");
    }
});

It supposed to fire either success log message or error but I can't see none of them. I also tried to launch it with node command with no success.

Would appreciate any help regarding this issue.

P.S. I've seen plenty of examples with universal, all them are using aot for server-side and then import in server.ts like that:

import { AppServerModuleNgFactory } from './aot/src/app/app.server.module.ngfactory'; 

Is there any way to not generate it?



via tammy

No comments:

Post a Comment