Question

我正在尝试使用通用的，已经集成到平台服务器的角度4（4.0.3）应用程序添加服务器端渲染。我用这个项目作为例子： https://github.com/FrozenPandaz/ng-universal-demo 而且我也遵循这个指南： https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx

我的app.server.module，位于app / server文件夹中：

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配置，然后合并到公共配置：

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']
                },

            ]
        }
    }
};

一切都构建正常，main.server.bundle.js会生成但是当我启动时

nodemon dist/server/main.server.bundle.js

即使服务器空了，我也会得到干净的退出：

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");
    }
});

它应该触发成功日志消息或错误但我不能看到它们。我也尝试使用node命令启动它但没有成功。

非常感谢有关此问题的任何帮助。

P.S。我已经看到很多带有通用的示例，它们都在服务器端使用aot然后在server.ts中导入：

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

有没有办法不生成它？

angular4服务器端渲染问题

0 个答案: