Express和Typescript集成

Question

Hi and thanks for taking time to help me. 嗨，谢谢花时间来帮助我。

I recently did a Cron app with Node.JS. 我最近用Node.JS做了一个Cron应用程序。 I would add a website hosted by the Node.js server with Express. 我将使用Express添加由Node.js服务器托管的网站。 I developped this typescript website in another folder, and when the time came to integrate it into my Node.js server, I've got errors which are theses : 我在另一个文件夹中开发了这个打字稿网站，当时间将它集成到我的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

Here is my folder organisation 这是我的文件夹组织

project_tree project_tree

And here is my index.html and my systemjs.config.js which I think are the problems. 这是我的index.html和我的systemjs.config.js，我认为这是问题。 You have to know that if I put node_modules in public and in the root, it works. 您必须知道，如果我将node_modules放在公共和根目录中，它就可以工作。 I think it's a path problem. 我认为这是一个路径问题。

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

And my systemjs.config.js 还有我的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);

I hope you understood my problem, thanks for your answers 我希望你理解我的问题，谢谢你的回答

Answer 1

I think your problem is that your Express app is not serving static files from ../node_modules but only from the public folder (which is the right way to do it). 我认为你的问题是你的Express应用程序不是从../node_modules提供静态文件，而只是从公共文件夹提供（这是正确的方法）。 That would also explain the Unexpected token < errors as Express is sending the index.html by default if it is not able to serve a requested file. 这也可以解释Unexpected token < errors，因为如果它无法提供所请求的文件，Express默认发送index.html 。 It would also explain your remark that everything works fine if you put your node_modules in your public folder. 这也可以解释你的话，一切，如果你把你的正常工作node_modules在public文件夹中。

A possible solution is to serve client-side libraries from a vendor folder inside your public folder. 一个可能的解决方案是从一个服务客户端库vendor你的文件夹里面public文件夹。 You can create a task in your gruntfile to copy the vendor files you need automatically. 您可以在gruntfile中创建任务以自动复制所需的供应商文件。 Another solution is to serve all your client-side libraries from CDN. 另一种解决方案是从CDN服务所有客户端库。 So in your index.html this would maybe look like this: 所以在你的index.html这可能是这样的：

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

or 要么

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

Express和Typescript集成

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-05 23:16:22

Express和Typescript集成

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-05 23:16:22

解决方案1
0 已采纳 2016-08-05 23:16:22