Angular 更改ts输出目录

我目前正在学习angular 2《英雄之旅》教程，并试图将.js和.js.map文件放入它们自己的“dist”文件夹中。我可以这样做，但现在当我加载站点时，会出现控制台错误：

：3000/app/app.module加载资源失败：服务器响应状态为404（未找到）

my system.config.js

 /**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  'app': 'dist/app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
});
})(this);

我的tsconfig.json

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  }
}

我觉得我刚刚错过了一个需要更改目录路径的地方，但我看不到它

编辑：文件输出到dist/app/*.js

编辑2：

在my main.ts中，我将这个

import{AppModule}从“./app/app.module”更改为“

到

从'./dist/app/app.module'导入{AppModule}和我得到相同的错误。
步骤1
systemjs.config.js

map: {
  'app': 'dist/app',

你做到了

步骤2
tsconfig.json

"outDir": "dist"

你也做到了

步骤3
index.html

System.import('dist/main.js')

试试看：）

更新
如果您想将html保存在应用程序文件夹中，请打开

systemjs angular loader.js
归档并查找以下行：

basePath = basePath.replace(baseHref, '');

最后添加下一行：

basePath = basePath.replace('dist/', '');

所以看起来应该是这样的

步骤1
systemjs.config.js

map: {
  'app': 'dist/app',

你做到了

步骤2
tsconfig.json

"outDir": "dist"

你也做到了

步骤3
index.html

System.import('dist/main.js')

试试看：）

更新
如果您想将html保存在应用程序文件夹中，请打开

systemjs angular loader.js
归档并查找以下行：

basePath = basePath.replace(baseHref, '');

最后添加下一行：

basePath = basePath.replace('dist/', '');

所以看起来应该是这样的

您的代码是否在at
app
目录中？这意味着当文件被输出时，它们应该被输出到
dist/app/app.js
还是仅仅是
dist/app.js
？您的代码是否在
app
目录中？意思是当文件被输出时，它们应该被输出到
dist/app/app.js
还是仅仅是
dist/app.js
？这解决了这个问题，谢谢！但是现在它没有得到我的任何.html或.css文件，因为它们仍然在src/app中，但它正在src/dist/app中查找。我更愿意将它们保存在src/app中，有什么方法可以让它们工作吗？我想这是因为我使用的模板和syle URL？只需一分钟，就解决了这个问题，谢谢！但是现在它没有得到我的任何.html或.css文件，因为它们仍然在src/app中，但它正在src/dist/app中查找。我更愿意将它们保存在src/app中，有什么方法可以让它们工作吗？我想这是因为我使用的模板和syle URL？请稍等