使用 jspm 捆绑 angular2 应用程序答案

【问题标题】：Bundling angular2 app with jspm使用 jspm 捆绑 angular2 应用程序
【发布时间】：2016-04-09 08:39:29
【问题描述】：

我是 jspm 的新手，已经使用它几个月了，我真的很喜欢它。我在Angular2中开发了一个应用程序，发现jspm非常顺利地包含了其他库。我使用 TypeScript。

现在我正在尝试进行开发构建，我想在其中捆绑我的应用程序，但我无法让它正常工作。在捆绑应用程序之前，我没有遇到任何问题。我怀疑这是我配置 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>

"): AppComponent@21:2
Unexpected closing tag "html" ("
</body>

[ERROR ->]</html>
"): AppComponent@43:0

最后一个错误似乎是<base href="/> 标签问题的问题：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"
    }
  },

【问题讨论】：

标签： angular bundling-and-minification jspm

【解决方案1】：

你捆绑它的方式应该没问题。我像这样创建我的包：

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

【讨论】：