来自system.src.js的Angular2和express-traceur 404(未找到)

在我的express中，我有以下配置来提供静态js文件。

app.use('/scripts', express.static(__dirname + '/node_modules'));

我所在的链接是http://localhost:3000/user/

user.ejs

<!DOCTYPE html>
<html lang="en" ng-app="acApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Responsive Onepage HTML Template | Multi</title>
    <!-- core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/userpage.css" rel="stylesheet">
    <link href="/css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/images/ico/apple-touch-icon-57-precomposed.png">
    <!-- Angular 2 starts -->
        <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="/scripts/es6-shim/es6-shim.min.js"></script>
    <script src="/scripts/systemjs/dist/system-polyfills.js"></script>
    <script src="/scripts/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="/scripts/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/scripts/systemjs/dist/system.src.js"></script>
    <script src="/scripts/rxjs/bundles/Rx.js"></script>
    <script src="/scripts/angular2/bundles/angular2.dev.js"></script> 
    <!-- 2. Configure SystemJS -->
    <script>
      console.log('reach system.config');
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('../js/acApp/main.ts')
            .then(null, console.error.bind(console));
    </script>
</head>
<body ng-app="acApp">
    <div class="container-fluid">
    <mainRouter></mainRouter>
    </div>
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/mousescroll.js"></script>
    <script src="/js/smoothscroll.js"></script>
</body>
</html>

它抛出错误

system.src.js:1085 GET http://localhost:3000/user/traceur 404 (Not Found)

在chrome开发工具中，GET是由system.src.js作为ajax调用（）触发的

  xhr.open("GET", url, true);
  if (xhr.setRequestHeader) {
    xhr.setRequestHeader('Accept', 'application/x-es-module, */*');
    // can set "authorization: true" to enable withCredentials only
    if (authorization) {
      if (typeof authorization == 'string')
        xhr.setRequestHeader('Authorization', authorization);
      xhr.withCredentials = true;
    }
  }
  if (doTimeout) {
    setTimeout(function() {
      xhr.send();
    }, 0);
  } else {
    xhr.send(null);
  }

当我进行调试时，第一次是得到

http://localhost:3000/js/acApp/main.ts

这是正确的路径。知道为什么traceur是404吗？

更新

文件夹结构：

-node_modules
-public
--js
---acApp
----main.ts
----app.component.js
-views
--user.ejs
-routes
--user.js
-server.js

服务器内部.js

app.use(express.static(path.join(__dirname, 'public')));
app.use('/scripts', express.static(__dirname + '/node_modules'));

事实上，您的SystemJS配置似乎并不正确。您为模块文件配置了app根文件夹。这意味着指定的配置仅适用于模块名称以app开头的情况。

在您的情况下，这些文件似乎位于js文件夹下。所以我会这样更新这个配置：

System.config({
  map: {
    acApp: '../js/acApp'
  },
  packages: {        
    acApp: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('acApp/main')
   .then(null, console.error.bind(console));

如果您的user文件夹位于acApp下，这应该可以工作。否则，您需要将此文件夹的另一个条目配置到packages块中。。。

相关内容

最新更新

热门标签：