这就像一个魅力,但暴露整个文件结构,包括node_modules和配置,这似乎是一个坏主意.

所以我试图只暴露app文件夹.为此,我做了以下事情:

复制文件app/scripts夹中引用的javascript文件

移动index.html在app

更改此文件中的引用路径

将lite脚本更改package.json为lite-server --baseDir app

运行此操作时,一切正常,但angular2-polyfills.js返回的除外:

Error: XHR error (404 Not Found) loading http://localhost:3000/app.component(…)
  run @ angular2-polyfills.js:138
  zoneBoundFn @ angular2-polyfills.js:111
  lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511
  lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523
  lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494
  lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444
  (anonymous function) @ angular2-polyfills.js:243
  run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111
  lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

当然,如果我要求http://localhost:3000/app.component.js正确返回该文件.

所以我的问题是:为什么.js扩展没有附加到app.component,导致这个错误,当服务器baseDir是项目的根目录时,哪个有用？我错过了一些配置选项吗？

您可以配置app文件夹的路径.在我的情况下,我使用角度2来生成我们的应用程序的移动版本,并且必须像这样配置系统:

System.config({
            paths: {
                'app/*': './js/mobile/dist/*'
            },
            packages: {        
              app: {
                format: 'register',
                defaultExtension: 'js'
              }
            }
          });
          System.import('app/main')
                .then(null, console.error.bind(console));

正如你所看到的,我决定将"app"映射到"dist",在那里我有我编译的js文件,以使它们与ts文件分开.

在将文件重构到新位置时,JetBrains WebStorm可能会导致此问题.它似乎在进口上附加了.ts扩展名.

因此,将新文件保存在其位置,但检查每个文件的导入.

你的所有进口都应该像这样

import {MyComponent} from './Components/MyComponent';

而不是这个

import {MyComponent} from './Components/MyComponent.ts';