2016-04-09 32 views
1

Ben jspm için yeniyim ve birkaç aydır bununla çalıştım ve gerçekten beğendim. Angular2'de bir uygulama geliştirdim ve diğer kütüphaneleri de dahil etmek için çok düzgün bir şekilde jspm buldum. TypeScript kullanıyorum.jspm ile Bundle angular2 uygulaması

Şimdi, uygulamamı paketlemek istediğim bir geliştirme geliştirmesi yapmaya çalışıyorum, ancak düzgün çalışamam. Uygulamayı paketlemeden önce herhangi bir sorunla karşılaşmam. System.js'yi yapılandırma biçimimde bir sorun olduğundan şüpheleniyorum.

Birlikte paket deneyin

:

jspm bundle-sfx app/main public\app.js 

Ve tek tek app.js işaret benim iki komut dosyası etiketlerini değiştirebilir ve benim sunucuya paket kopyalamak, uygulama bu nedeniyle çalışmıyor hatalar:

Uncaught ReferenceError: System is not defined 

Ve:

EXCEPTION: Template parse errors: 
Unexpected closing tag "head" (" 


    [ERROR ->]</head> 
<body> 

"): [email protected]:2 
Unexpected closing tag "html" (" 
</body> 

[ERROR ->]</html> 
"): [email protected]:0 

son hataile ilgili bir sorun gibi görünüyoretiketi sorunu: Template parse error: Unexpected closing tag, ama baştan hemen sonra temel etiketi var. Ben sadece komut dosyalarını yerel olarak değiştirdiğimde sadece ilk sistem içe aktarma hatası alıyorum? jspm ait

Benim versiyon:

0.16.32 
Running against local jspm install. 

Benim indes.html:

<!DOCTYPE html> 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="google" content="notranslate"> 
    <meta http-equiv="Content-Language" content="en"> 

    <title>The Young Scholars Directory</title> 

    <!-- Bootstrap core CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom styles for YSI --> 
    <link href="assets/css/app.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
<body>   

    <my-app> 
     <div class="preloader"> 
     <img src="assets/img/loader.gif" alt="preloader" /> 
     </div> 
    </my-app> 

    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <!-- <script src="app.js"></script> --> 
    <script> 
     System.import("app/main"); 
    </script> 

</body>  
</html> 

config.js:

baseURL: "/", 
    defaultJSExtensions: true, 
    transpiler: "typescript", 
    typescriptOptions: { 
    "module": "commonjs", 
    "emitDecoratorMetadata": true 
    }, 

    packages: { 
    "app": { 
     "main": "main", 
     "defaultExtension": "ts" 
    } 
    }, 

cevap

0

bunu paket yolu Tamam olmalı.

jspm bundle-sfx app/main app-bundle.min.js --minify 

Ve html (uygulama seçiciden sonra paket komut etiketinde) aşağıdaki gibidir:: Bu gibi benim gruplarını oluşturmalarına

<!DOCTYPE html> 
<head> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
    <script src="app-bundle.min.js"></script> 
</body> 
</html> 

Burada eksiksiz bir örnek bulabilirsiniz:

https://github.com/fintechneo/angular2-templates