Опитвам се да създам приложение с Angular2, машина, стилус (за CSS) и мопс (за HTML шаблониране).

Но не мога да работя с Angular2 Universal.

Проблемът е, че използвам ts-node за да стартирам кода на сървъра си и когато импортирам моя компонент на приложението, възникна грешка.

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: Неочаквано означение:

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

Алтернативата е да изпълните кода за създаване (генериран от уеб пакета). Но как мога да направя това, тъй като кодът е обвит webpackjsonp функция.

Отговори:

Можете да използвате стилуса с помощта на предварително компилиране: стилус -> css -> styles: [require(.css)].

Шаблоните могат да бъдат предварително компилирани или обработени така:

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

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