Angular 2 Universal - 使用手写笔和 pug 模板的服务器端渲染

Posted 2023-03-11

【中文标题】Angular 2 Universal - 使用手写笔和 pug 模板的服务器端渲染

【英文标题】：Angular 2 Universal - Server Side Rendering with stylus and pug template

【发布时间】：2016-10-01 02:39:03

【问题描述】：

我正在尝试使用 Angular2、typescript、stylus（用于 css）和 pug（用于 html 模板）构建一个应用程序。

但是，我不能让它与 Angular2 Universal 一起工作。

问题是我使用ts-node 来运行我的服务器代码，并且每当我导入我的应用程序组件时，都会发生错误。

server.ts (node/express):

import 'angular2-universal/polyfills';

import * as path from 'path';
import * as express from 'express';
import * as bodyParser from 'body-parser';


// Angular 2 Universal
import 
  provide,
  enableProdMode,
  expressEngine,
  REQUEST_URL,
  ORIGIN_URL,
  BASE_URL,
  NODE_ROUTER_PROVIDERS,
  NODE_HTTP_PROVIDERS,
  ExpressEngineConfig
 from 'angular2-universal';

// Application
import App from './app/modules/app';

发生错误：

app/modules/app/app.styl:2 margin-bottom: 10px ^ SyntaxError: Unexpected token :

app.ts

import Component, ViewEncapsulation from '@angular/core';
import RouteConfig, Router, ROUTER_DIRECTIVES from '@angular/router-deprecated';

import Home from '../home';


/*
 * App Component
 * Top Level Component
 */
@Component(
  selector:      'app',
  pipes:         [ ],
  providers:     [ ],
  directives:    [ ],
  encapsulation: ViewEncapsulation.None,
  styles:        [
    require('./app.styl')
  ],
  template: require('./app.pug')
)

app.styl

input
  margin-bottom: 10px

另一种方法是运行构建代码（由 webpack 生成）。但是我该怎么做呢，因为代码是由webpackjsonp 函数包装的。

【问题讨论】：

如果您将代码设为runnable example，将会很有帮助。

【参考方案1】：

您可以通过预编译使用stylus：stylus -> css -> styles: [require(.css)]。

模板也可以像这样预编译或处理：

function compile(template:string)

      pug.compile(template, );


//component definition
template: compile(require('template.pug'))