Question

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

现在我正在尝试进行开发构建，我希望将应用程序捆绑在一起，但我无法正常运行。在捆绑应用之前，我没有遇到任何问题。我怀疑我配置system.js的方式有问题。

当我尝试捆绑时：

? = <some value>

使用指向app.js的单个标记更改我的两个脚本标记，并将该包复制到我的服务器，由于这些错误，应用程序无法正常工作：

jspm bundle-sfx app/main public\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代码问题：Template parse error: Unexpected closing tag的问题，但我的头部后面有基本标记。当我只更改脚本本地时，我只得到第一个系统导入错误？

我的jspm版本：

<base href="/>

我的indes.html：

0.16.32
Running against local jspm install.

config.js：

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

Answer 1

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

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

我的html看起来像这样（在app选择器之后捆绑脚本标签）：

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

用jspm捆绑angular2应用程序

1 个答案: