更改角度ts输出目录

时间:2017-04-24 19:00:53

标签: angular

我目前正在浏览英雄教程的角度2游,我试图将.js和.js.map文件放入他们自己的'dist'文件夹中。我可以这样做,但现在当我加载网站时,我收到控制台错误:

:3000/app/app.module Failed to load resource: the server responded with a status of 404 (Not Found)

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

Edit2:

在我的主文件中,我将此import { AppModule } from './app/app.module';更改为import { AppModule } from './dist/app/app.module';,我收到同样的错误。

1 个答案:

答案 0 :(得分:4)

第1步

<强> systemjs.config.js

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

你做到了

第2步

<强> tsconfig.json

"outDir": "dist"

你也做到了

第3步

<强>的index.html

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

尝试一下:)

更新

如果你想在应用程序文件夹中保留html,请打开

<强> systemjs-角loader.js 文件并找到该行:

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

最后添加下一行:

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

所以看起来应该是

enter image description here