Ada tutorial quickstarter di angular.io yang menggunakan skrip & systemjs. Sekarang saya sudah menjalankan miniapp tersebut, bagaimana saya akan membuat sesuatu yang dapat diterapkan? Saya tidak dapat menemukan info apa pun tentang itu sama sekali.

Apakah saya memerlukan alat tambahan, pengaturan tambahan di System.config?

(Saya tahu bahwa saya dapat menggunakan webpack & membuat satu bundle.js, tetapi saya ingin menggunakan systemjs seperti yang digunakan dalam tutorial)

Bisakah seseorang membagikan proses pembuatannya dengan penyiapan ini (Angular 2, TypeScript, systemjs)

Hal utama yang harus dipahami pada level ini adalah bahwa menggunakan konfigurasi berikut, Anda tidak dapat menggabungkan file JS yang dikompilasi secara langsung.

Pada konfigurasi compiler TypeScript:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Di HTML

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

Faktanya, file JS ini akan berisi modul anonim. Modul anonim adalah file JS yang menggunakanSystem.register tetapi tanpa nama modul sebagai parameter pertama. Ini adalah apa yang dihasilkan kompilator skrip secara default ketika systemjs dikonfigurasi sebagai manajer modul.

Jadi agar semua modul Anda menjadi satu file JS, Anda perlu memanfaatkan outFileproperti dalam konfigurasi compiler TypeScript Anda.

Anda dapat menggunakan inside teguk untuk melakukan itu:

const gulp = require('gulp');
const ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                     .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

Ini dapat digabungkan dengan beberapa pemrosesan lainnya:

• untuk memperburuk hal-hal file TypeScript yang dikompilasi
• untuk membuat app.jsfile
• untuk membuat vendor.jsfile untuk perpustakaan pihak ketiga
• untuk membuat boot.js file untuk mengimpor modul yang mem-bootstrap aplikasi. File ini harus disertakan di akhir halaman (ketika semua halaman dimuat).
• untuk memperbarui index.htmluntuk memperhitungkan kedua file ini

Dependensi berikut digunakan dalam tugas gulp:

• gulp-concat
• gulp-html-replace
• gulp-typescript
• gulp-uglify

Berikut ini contoh agar bisa diadaptasi.

• Buat app.min.jsfile

  gulp.task('app-bundle', function () {
    var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
    });
  
    var tsResult = gulp.src('app/**/*.ts')
                     .pipe(ts(tsProject));
  
    return tsResult.js.pipe(concat('app.min.js'))
                  .pipe(uglify())
                  .pipe(gulp.dest('./dist'));
  });

• Buat vendors.min.jsfile

  gulp.task('vendor-bundle', function() {
    gulp.src([
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/systemjs/dist/system-polyfills.js',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/rxjs/bundles/Rx.js',
      'node_modules/angular2/bundles/angular2.dev.js',
      'node_modules/angular2/bundles/http.dev.js'
    ])
    .pipe(concat('vendors.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
  });

• Buat boot.min.jsfile

  gulp.task('boot-bundle', function() {
    gulp.src('config.prod.js')
      .pipe(concat('boot.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));
   });

  The config.prod.jshanya berisi berikut:

   System.import('boot')
      .then(null, console.error.bind(console));

• Perbarui index.htmlfile

  gulp.task('html', function() {
    gulp.src('index.html')
      .pipe(htmlreplace({
        'vendor': 'vendors.min.js',
        'app': 'app.min.js',
        'boot': 'boot.min.js'
      }))
      .pipe(gulp.dest('dist'));
  });

  The index.htmlterlihat seperti berikut:

  <html>
    <head>
      <!-- Some CSS -->
  
      <!-- build:vendor -->
      <script src="node_modules/es6-shim/es6-shim.min.js"></script>
      <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
      <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <script src="node_modules/rxjs/bundles/Rx.js"></script>
      <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
      <script src="node_modules/angular2/bundles/http.dev.js"></script>
      <!-- endbuild -->
  
      <!-- build:app -->
      <script src="config.js"></script>
      <!-- endbuild -->
    </head>
  
    <body>
      <my-app>Loading...</my-app>
  
      <!-- build:boot -->
      <!-- endbuild -->
    </body>
  </html>

Perhatikan bahwa System.import('boot');harus dilakukan di akhir bagian isi untuk menunggu semua komponen aplikasi Anda didaftarkan dari app.min.jsfile.

Saya tidak menjelaskan di sini cara menangani minifikasi CSS dan HTML.

Anda dapat menggunakan perintah build angular2-cli

ng build -prod

https://github.com/angular/angular-cli/wiki/build#bundling

Build yang dibuat dengan flag -prod melalui ng build -prodatau ng serve -prodmemaketkan semua dependensi ke dalam satu file , dan menggunakan teknik pengocokan pohon .

Memperbarui

Jawaban ini diajukan saat angular2 berada di rc4

Saya telah mencobanya lagi di angular-cli beta21 dan angular2 ^ 2.1.0 dan berfungsi seperti yang diharapkan

Jawaban ini membutuhkan inisialisasi aplikasi dengan angular-cli yang dapat Anda gunakan

ng new myApp

Atau yang sudah ada

ng init

Perbarui 08/06/2018

Untuk sudut 6 sintaksnya berbeda.

ng build --prod --build-optimizer

Periksa dokumentasinya

Anda dapat membangun proyek Angular 2 (2.0.0-rc.1) di Typecript menggunakan SystemJS dengan Gulp dan SystemJS-Builder .

Di bawah ini adalah versi sederhana tentang cara membuat, menggabungkan, dan mengecilkan Tour of Heroes yang menjalankan 2.0.0-rc.1 ( sumber lengkap , contoh langsung ).

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app'));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
  var builder = new systemjsBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'app/app.js');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
  gulp.src(['node_modules/rxjs/**/*'])
    .pipe(gulp.dest('public/lib/js/rxjs'));

  gulp.src(['node_modules/angular2-in-memory-web-api/**/*'])
    .pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api'));
  
  return gulp.src(['node_modules/@angular/**/*'])
    .pipe(gulp.dest('public/lib/js/@angular'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

gulp.task('default', ['bundle']);

system.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});

Ini boilerplate MEA2N saya untuk Angular 2: https://github.com/simonxca/mean2-boilerplate

Ini adalah boilerplate sederhana yang digunakan tscuntuk menyatukan berbagai hal. (Sebenarnya menggunakan grunt-ts , yang intinya hanya tscperintah.) Tidak perlu Wekpack, dll.

Apakah Anda menggunakan grunt atau tidak, idenya adalah:

• tulis aplikasi Anda di folder bernama ts/(contoh:public/ts/ :)
• gunakan tscuntuk mencerminkan struktur direktori ts/folder Anda ke dalam js/folder dan hanya file referensi di js/folder di index.html.

Untuk mendapatkan grunt-ts untuk bekerja (harus ada perintah yang setara untuk tsc biasa, Gulp, dll.), Anda memiliki properti di tsconfig.jsonpanggil Anda "outDir": "../js", dan referensi di Anda gruntfile.jsdengan:

grunt.initConfig({
  ts: {
    source: {tsconfig: 'app/ts/tsconfig.json'}
  },
  ...
});

Kemudian jalankan grunt ts, yang akan membawa aplikasi Anda public/ts/dan mencerminkannya public/js/.

Sana. Sangat mudah dimengerti. Bukan pendekatan terbaik, tapi pendekatan yang bagus untuk memulai.

Cara termudah yang saya temukan untuk membundel angular rc1 untuk systemJs adalah dengan menggunakan gulpdan systemjs-builder:

gulp.task('bundle', function () {
    var path = require('path');
    var Builder = require('systemjs-builder');

    var builder = new Builder('/node_modules');

    return builder.bundle([
        '@angular/**/*.js'
        ], 
        'wwwroot/bundle.js', 
        { minify: false, sourceMaps: false })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

Seperti yang ditunjukkan dalam komentar, systemJ saat ini memiliki masalah saat menggabungkan komponen menggunakan moduleId: module.id

https://github.com/angular/angular/issues/6131

Rekomendasi saat ini (sudut 2 rc1) tampaknya menggunakan jalur eksplisit yaitu moduleId: '/app/path/'

Saya menggunakan expressjs di backend untuk melayani proyek ng2 saya. Anda dapat memeriksanya dari halaman github saya: https://github.com/echonax/ng2-beta-and-test-framework

Di bawah situs web Angular.io, di bawah bagian Advanced / Deployment, disarankan bahwa cara paling sederhana untuk menyebarkan adalah 'menyalin lingkungan pengembangan ke server'.

1. melalui bagian di bawah: Penerapan sesederhana mungkin. File proyek akhir ditampilkan di dalam bagian kode. Perhatikan bahwa itu sudah menyiapkan kode untuk memuat file paket npm dari web (sebagai ganti dari folder npm_modules lokal).

2. pastikan itu berjalan di komputer lokal Anda (npm start). Kemudian di bawah folder proyek, salin semua yang ada di bawah sub-folder '/ src' ke bucket S3 yang telah Anda siapkan. Anda dapat menggunakan drag-and-drop untuk menyalin, selama proses itu, Anda mendapatkan opsi untuk memilih pengaturan izin untuk file, pastikan untuk membuatnya 'dapat dibaca' oleh 'semua orang'.

3. di bawah tab 'Properti' keranjang, cari panel 'Hosting situs web statis', centang opsi 'Gunakan keranjang ini untuk menghosting situs web', dan tentukan 'index.html' untuk dokumen Indeks dan dokumen Kesalahan.

4. klik pada situs web statis Endpoint, proyek Anda berjalan dengan baik!