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/server/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.

PS 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?

链接地址: http://www.djcxy.com/p/31382.html

上一篇: 使用Asp.net Core诊断Angular4服务器端渲染问题

下一篇: angular4服务器端渲染问题