與jspm捆綁angular2應用程序

我是jspm的新手，並且已經使用了它幾個月了，並且非常喜歡它。我在Angular2中開發了一個應用程序，並且非常順利地找到jspm以包含其他庫。我使用TypeScript。與jspm捆綁angular2應用程序

現在我試圖做一個開發版本，我想捆綁我的應用程序，但我無法正常工作。在捆綁應用程序之前，我沒有遇到任何問題。我懷疑這是配置system.js的一個問題。

當我試着使用捆綁：

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

並改變我的兩個腳本標記用單一指向app.js，和包複製到我的服務器，應用程序不會因這些工作錯誤：

Uncaught ReferenceError: System is not defined

和：

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


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

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

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

最後的錯誤似乎與的問題標籤問題：Template parse error: Unexpected closing tag，但我有基地標籤後頭。當我只是在本地更改腳本時，我只會得到第一個系統導入錯誤？

我JSPM的版本：

0.16.32 
Running against local jspm install.

我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" 
    } 
    },

來源

2016-04-09 DNRN

應該確定你捆綁的方式。創建我的包是這樣的：

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

而且我的HTML看起來像這樣（包腳本標籤的應用程序選擇後）：

<!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>

你可以在這裏找到一個完整的例子：

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

來源

2016-10-25 11:28:13

與jspm捆綁angular2應用程序

回答

相關問題