编译为单个文件后无法启动 Angular 应用程序

Question

在升级到 TypeScript 1.8 并使用 outFile.

将我的应用程序编译为单个文件后，我无法启动我的应用程序

我的所有文件都被编译到我项目的 dist 文件夹中的单个 app.js。我可以在网络检查器中看到 app.js 已从服务器正确加载。没有显示错误，但似乎我的应用程序 bootstrap 函数从未执行过。该应用程序在未编译时工作正常。

SystemJS 设置

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

boot.ts

// Required for https://github.com/angular/angular/issues/7052
///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 
import {bootstrap} from 'angular2/platform/browser';
import {ComponentRef, provide} from 'angular2/core';
import {AppComponent} from './components/app/app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from 'angular2/router';
import {PanelsService} from './components/panels/panels.service';
import {StoriesService} from './components/stories/stories.service';
import {UrlService} from './components/common/url.service';
import {UserService} from './components/user/user.service';
import {AppService} from './components/app/app.service';
import {AlertsService} from './components/alerts/alerts.service';

.................
.................
.................
.................

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  PanelsService,
  .............
  .............
  .............
  AlertsService
]).catch(err => console.error(err));

我确定我在这里遗漏了一些简单的东西。我是否不需要在我的串联文件中包含我的 boot.ts？

为了完整起见，我使用 gulp-typescript 2.12.0 通过以下任务编译我的源文件....

return gulp
  .src('app/**/*.ts')
  .pipe(sourcemaps.init())
  .pipe(typescript(tscConfig.compilerOptions))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./dist'));

...我的tsconfig.json如下

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outFile": "app.js"
  },
  "exclude": [
    "node_modules"
  ]
}

如有任何帮助，我们将不胜感激。

Answer 1

我认为您已将所有已编译的 JS 代码放入单个文件中。因此，您需要将此 JS 文件包含在 script 标记中并更新您的 SystemJS 配置：

<script src="/path/to/dist/app.js"></script
<script>
  System.config({
  });
  System.import('app')
    .then(null, console.error.bind(console));
</script>

编译为单个文件后无法启动 Angular 应用程序

Can't boot Angular app after compiling to single file

typescript

systemjs

gulp-typescript

angular