使用手写笔和pug模板的服务器端呈现

Question

我正在尝试用Angular2、类型记录、手写笔(用于css)和pug (用于html模板)构建一个应用程序。

但是，我不能让它与Angular2环球公司合作。

问题是，我使用ts-node运行服务器代码，每当我导入App时，都会发生错误。

server.ts (节点/快递)：

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页边距-底部:10 app^ SyntaxError:意外令牌：

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函数包装的。

Answer 1

您可以使用预编译：-> -> styles: [require(.css)]使用手写笔。

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

function compile(template:string)
{
      pug.compile(template, {});
}

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