Question

看起来事情发生了变化，所以答案不再适用了。

Angular 2需要加载大量的js文件。对于每个组件，必须加载新的JS文件。这会导致负载和性能问题延迟。我试图实现类似于缩小器和其他框架合并的东西。

我实际上是想在一个JS文件中编译我的所有TS文件并且它无法正常工作...我没有收到任何错误消息，但是它仍然存在坚持＆＃34;正在加载...＆＃34;。

嗯，这是我的gulp档案......

var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('compile_ts', function() {
 console.log('Compiling TS files...');
 var res = gulp.src('./app/**/*.ts').pipe(tsConfig());
 return res.pipe(gulp.dest('.'));
});

这是我的tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "amd",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"out" : "./app/application.js"
},
"exclude": [
"node_modules" , "typings"
]
}

这是我的systemjs.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: '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',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './application.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}
});
})(this);

它只是一个简单的默认应用程序...快速入门，所以我只有app.module.ts和我的app.component.ts。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello World</h1>'
})
export class AppComponent { }

在Angular 2 Final中的单个JS文件中合并和编译所有TS文件

0 个答案: