Question

升级到TypeScript 1.8并将我的应用程序编译为outFile的单个文件后，我无法启动应用程序。

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

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应用程序

1 个答案: