Express 和 Typescript 集成答案

【问题标题】：Express and Typescript integrationExpress 和 Typescript 集成
【发布时间】：2016-08-06 07:30:56
【问题描述】：

您好，感谢您花时间帮助我。

我最近用 Node.JS 做了一个 Cron 应用程序。我会用 Express 添加一个由 Node.js 服务器托管的网站。我在另一个文件夹中开发了这个打字稿网站，当需要将它集成到我的 Node.js 服务器中时，我遇到了这些错误：

shim.min.js       : 1 Uncaught SyntaxError: Unexpected token <
zone.js            : 1 Uncaught SyntaxError: Unexpected token <
Reflect.js         : 1 Uncaught SyntaxError: Unexpected token <
system.src.js      : 1 Uncaught SyntaxError: Unexpected token <
systemjs.config.js : 8 Uncaught SyntaxError: Unexpected token {
app                : 1 Uncaught SyntaxError: Unexpected token <
(index)            : 28 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost/public/app
Error loading http://localhost/public/app

这是我的文件夹组织

project_tree

这是我的 index.html 和 systemjs.config.js，我认为这是问题所在。您必须知道，如果我将 node_modules 放在公共和根目录中，它就可以工作。我认为这是一个路径问题。

<html>
  <head>
    <title>Cts</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">

    <link rel="icon" type="image/png" href="icone.png" id="icone" />

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCGhv7ryot0iu9ufz-BXlZBZxcYhB7q8c">
    </script>
     <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <!--<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC6bfdXKHUFQltpGyCgC6cmVBx-gDWvxlM"></script>-->
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>



    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
     <base href="/" >

  </head>
  <!-- 3. Display the application -->
  <body>  
          <my-app>Loading...</my-app>
  </body>
</html>

还有我的 systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   '../node_modules/@angular',
    'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api',
    'rxjs':                       '../node_modules/rxjs',
    'mapbox-gl':                  '../node_modules/mapbox-gl'

  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

希望你能理解我的问题，谢谢你的回答

【问题讨论】：

标签： node.js express typescript angular

【解决方案1】：

我认为您的问题是您的 Express 应用程序没有提供来自 ../node_modules 的静态文件，而只提供来自公用文件夹的静态文件（这是正确的做法）。这也可以解释 Unexpected token < 错误，因为如果 Express 无法提供请求的文件，则默认发送 index.html。如果您将 node_modules 放在您的 public 文件夹中，它还可以解释您的评论一切正常。

一个可能的解决方案是从您的public 文件夹内的vendor 文件夹提供客户端库。您可以在 gruntfile 中创建一个任务来自动复制您需要的供应商文件。另一种解决方案是从 CDN 为您的所有客户端库提供服务。所以在你的index.html 中，这可能看起来像这样：

<script src="vendor/core-js/client/shim.min.js"></script>

或

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>

【讨论】：

这真的很有帮助！感谢您花时间回答！
不客气。如果此答案解决了您的问题，您应该将其标记为您的问题的已接受答案。