角度2スタイラスとパグテンプレートを使ったユニバーサルサーバー側レンダリング

Question

Angular2、typescript、stylus（css用）、pug（html用テンプレート用）を使ってアプリケーションを構築しようとしています。

しかし、私はAngular2 Universalで動作させることはできません。

問題は、サーバーコードを実行するのに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 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関数でラップされているので、どのようにすればいいのですか？

Answer 1

プリコンパイルを使用してスタイラスを使用することができます。スタイラス - > css - >styles: [require(.css)]。あなたのコードの[実行可能な例]（http://code.runnable.comを）作られた場合、それが参考になる

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

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