Bagaimana Anda menggunakan aplikasi Angular?

Bagaimana Anda menggunakan aplikasi Angular setelah mereka mencapai tahap produksi?

Semua panduan yang saya lihat sejauh ini (bahkan pada angular.io ) mengandalkan server lite untuk penyajian dan browserSync untuk mencerminkan perubahan - tetapi ketika Anda selesai dengan pengembangan, bagaimana Anda bisa menerbitkan aplikasi?

Apakah saya mengimpor semua .jsfile yang dikompilasi pada index.htmlhalaman atau apakah saya memperkecil mereka menggunakan tegukan? Akankah mereka bekerja? Apakah saya memerlukan SystemJS sama sekali dalam versi produksi?

Anda sebenarnya di sini menyentuh dua pertanyaan dalam satu.

Yang pertama adalah Bagaimana meng-host aplikasi Anda? .
Dan seperti @toskv menyebutkan pertanyaan yang sangat luas untuk dijawab dan tergantung pada banyak hal yang berbeda.

Yang kedua adalah Bagaimana Anda mempersiapkan versi penerapan aplikasi? .
Anda memiliki beberapa opsi di sini:

1. Sebarkan apa adanya. Hanya saja - tidak ada minifikasi, penggabungan, pengubahan nama, dll. Transpile semua proyek ts Anda salin semua sumber js / css / ... yang dihasilkan + dependensi ke server hosting dan Anda dapat melanjutkan.

2. Menyebarkan menggunakan alat bundling khusus, suka webpackatau systemjspembangun.
   Mereka datang dengan semua kemungkinan yang kurang di # 1.
   Anda dapat mengemas semua kode aplikasi Anda menjadi hanya beberapa file js / css / ... yang Anda referensi dalam HTML Anda. systemjsbuilder bahkan memungkinkan Anda untuk menyingkirkan kebutuhan untuk disertakan systemjssebagai bagian dari paket penerapan Anda.

3. Anda dapat menggunakan ng deployPer 8 untuk menyebarkan aplikasi Anda dari CLI Anda. ng deployperlu digunakan bersamaan dengan platform pilihan Anda (seperti @angular/fire). Anda dapat memeriksa dokumen resmi untuk melihat apa yang paling cocok untuk Anda di sini

Ya, Anda kemungkinan besar perlu menggunakan systemjsdan banyak perpustakaan eksternal lainnya sebagai bagian dari paket Anda. Dan ya Anda akan dapat membundelnya menjadi hanya beberapa file js yang Anda referensi dari halaman HTML Anda.

Anda tidak harus merujuk semua file js yang dikompilasi dari halaman - systemjskarena pemuat modul akan menangani hal itu.

Saya tahu kedengarannya berlumpur - untuk membantu Anda memulai dengan # 2 di sini adalah dua contoh aplikasi yang sangat bagus:

Pembangun SystemJS: angular2 seed

WebPack: starter webpack angular2

Jawaban sederhana Gunakan CLI Angular dan keluarkan

ng build 

perintah di direktori root proyek Anda. Situs ini akan dibuat di direktori dist dan Anda dapat menyebarkannya ke server web mana pun.

Ini akan dibangun untuk pengujian, jika Anda memiliki pengaturan produksi di aplikasi yang harus Anda gunakan

ng build --prod

Ini akan membangun proyek di distdirektori dan ini dapat didorong ke server.

Banyak yang telah terjadi sejak saya pertama kali memposting jawaban ini. CLI akhirnya berada di 1.0.0 sehingga mengikuti panduan ini, perbarui proyek Anda harus terjadi sebelum Anda mencoba membangun. https://github.com/angular/angular-cli/wiki/stories-rc-update

Dengan Angular CLI itu mudah. Contoh untuk Heroku:

1. Buat akun Heroku dan instal CLI

2. Pindahkan angular-clidep ke dependenciesdalam package.json(sehingga terinstal ketika Anda mendorong ke Heroku.

3. Tambahkan postinstallskrip yang akan berjalan ng buildketika kode didorong ke Heroku. Juga tambahkan perintah mulai untuk server Node yang akan dibuat pada langkah berikut. Ini akan menempatkan file statis untuk aplikasi dalam distdirektori di server dan memulai aplikasi sesudahnya.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Buat server Express untuk melayani aplikasi.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Buat remote Heroku dan dorong untuk merusak aplikasi.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Berikut ini langganan cepat yang saya lakukan yang memiliki detail lebih lanjut, termasuk cara memaksa permintaan untuk menggunakan HTTPS dan cara menangani PathLocationStrategy:)

Saya gunakan dengan selamanya :

1. Bangun aplikasi Angular Anda dengan folder angular-cli to distng build --prod --output-path ./dist

2. Buat file server.js di jalur aplikasi Angular Anda:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. Mulai selamanya forever start server.js

Itu saja! aplikasi Anda harus dijalankan!

Semoga ini bisa membantu, dan mudah-mudahan saya akan mencoba ini selama seminggu.

1. Buat aplikasi Web di Azure
2. Buat aplikasi Angular 2 dalam kode vs.
3. Webpack ke bundle.js.
4. Unduh situs Azure yang diterbitkan profil xml
5. Konfigurasikan penyebaran Azure menggunakan https://www.npmjs.com/package/azure-deploy dengan profil situs.
6. Menyebarkan.
7. Rasakan krimnya.

Jika Anda menguji aplikasi seperti saya di localhost atau Anda akan memiliki beberapa masalah dengan halaman putih kosong saya menggunakan ini:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Penjelasan:

ng build

Membangun aplikasi tetapi dalam kode ada banyak ruang, tab, dan hal-hal lain yang membuat kode dapat dibaca oleh manusia. Untuk server, tidak penting bagaimana kode terlihat. Inilah mengapa saya menggunakan:

ng build --prod --build-optimizer 

Ini membuat kode keluar untuk produksi dan mengurangi ukuran [ --build-optimizer] memungkinkan untuk mengurangi lebih banyak kode].

Jadi pada akhirnya saya menambahkan --base-href="http://127.0.0.1/my-app/"untuk menampilkan aplikasi di mana 'bingkai utama' [dengan kata sederhana]. Dengannya Anda bahkan dapat memiliki beberapa aplikasi bersudut dalam folder apa pun.

Untuk menyebarkan aplikasi Angular2 Anda ke server produksi, pertama dan terutama, pastikan aplikasi Anda berjalan secara lokal di mesin Anda.

Aplikasi Angular2 juga dapat digunakan sebagai aplikasi simpul.

Jadi, buat file titik entri simpul server.js / app.js (contoh saya menggunakan express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Tambahkan juga express sebagai dependensi dalam file package.json Anda.

Kemudian sebarkan di lingkungan pilihan Anda.

Saya telah membuat sebuah blog kecil untuk ditempatkan di IIS. ikuti tautan

Untuk Menyebarkan aplikasi Anda di IIS ikuti langkah-langkah di bawah ini.

Langkah 1: Bangun aplikasi Angular Anda menggunakan perintah ng build --prod

Langkah 2: Setelah membangun semua file disimpan di folder dist jalur aplikasi Anda.

Langkah 3: Buat folder di C: \ inetpub \ wwwroot dengan nama QRCode .

Langkah 4: Salin isi folder dist ke C: \ inetpub \ wwwroot \ QRCode .

Langkah 5: Buka IIS Manager menggunakan perintah (Window + R) dan ketik inetmgr klik OK.

Langkah 6: Klik kanan pada Situs Web Default dan klik Tambah Aplikasi .

Langkah 7: Masukkan nama Alias 'QRCode' dan setel path fisik ke C: \ inetpub \ wwwroot \ QRCode .

Langkah 8: Buka file index.html dan temukan baris href = "\" dan hapus '\'.

Langkah 9: Sekarang jelajahi aplikasi di browser apa pun.

Anda juga dapat mengikuti video untuk pemahaman yang lebih baik.

Url video: https://youtu.be/F8EI-8XUNZc

Jika Anda menggunakan aplikasi Anda di Apache (server Linux) sehingga Anda dapat mengikuti langkah-langkah berikut: Ikuti langkah-langkah berikut :

Langkah 1 : ng build --prod --env=prod

Langkah 2 . (Salin dist ke server) kemudian dist folder dibuat, salin folder dist dan sebarkan di direktori root server.

Langkah 3 . Buat .htaccessfile di folder root dan rekatkan ini di.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Anda mendapatkan bundel produksi pemuatan terkecil dan tercepat dengan mengkompilasi dengan kompilator Ahead of Time, dan tree-shake / minify dengan rollup seperti yang ditunjukkan dalam buku masak AOT sudut di sini: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Ini juga tersedia dengan CLI Angular seperti yang dikatakan dalam jawaban sebelumnya, tetapi jika Anda belum membuat aplikasi menggunakan CLI Anda harus mengikuti buku masak.

Saya juga memiliki contoh kerja dengan bahan dan grafik SVG (didukung oleh Angular2) yang mencakup bundel yang dibuat dengan buku masak AOT. Anda juga menemukan semua konfigurasi dan skrip yang diperlukan untuk membuat bundel. Lihat di sini: https://github.com/fintechneo/angular2-templates/

Saya membuat video cepat yang menunjukkan perbedaan antara jumlah file dan ukuran AoT yang dikompilasi dengan lingkungan pengembangan. Ini menunjukkan proyek dari repositori github di atas. Anda dapat melihatnya di sini: https://youtu.be/ZoZDCgQwnmQ

Penerapan Angular 2 di Halaman Github

Menguji Penerapan Angular2 Webpack di ghpages

Pertama dapatkan semua file yang relevan dari dist folder aplikasi Anda, bagi saya itu adalah: + file css di folder aset + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Kemudian dorong file ini dalam repo yang telah Anda buat.

1 - Jika Anda ingin aplikasi dijalankan pada direktori root - buat repo khusus dengan nama [ nama pengguna Anda] .github.io dan dorong file-file ini di cabang master

2 - Di mana seolah-olah Anda ingin membuat halaman ini di sub direktori atau di cabang lain selain dari root, buat halaman gh cabang dan dorong file-file ini di cabang itu.

Dalam kedua kasus cara kita mengakses halaman yang digunakan ini akan berbeda.

Untuk case pertama adalah https: // [nama pengguna yourgith] .github.io dan untuk kasus kedua itu adalah [nama pengguna yourgith] .github.io / [Repo name] .

Jika seandainya Anda ingin menyebarkannya menggunakan case kedua pastikan untuk mengubah url dasar dari file index.html di dist karena semua pemetaan rute tergantung pada jalur yang Anda berikan dan itu harus diatur ke [/ branchname].

Tautan ke halaman ini

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Untuk cara yang cepat dan murah untuk meng-host aplikasi sudut, saya telah menggunakan hosting Firbase. Gratis di tingkat pertama dan sangat mudah untuk menyebarkan versi baru menggunakan Firebase CLI. Artikel ini di sini menjelaskan langkah-langkah yang diperlukan untuk menggunakan aplikasi angular 2 produksi Anda ke Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Singkatnya, Anda menjalankan ng build --prodyang membuat folder dist dalam paket dan itulah folder yang akan digunakan untuk Firebase Hosting.

Menyebarkan Angular 2 dalam warna biru mudah

1. Jalankan ng build --prod , yang akan menghasilkan folder dist dengan semua yang dibundel dalam beberapa file termasuk index.html.

2. Buat grup sumber daya dan aplikasi web di dalamnya.

3. Tempatkan file folder dist Anda menggunakan FTP. Di biru itu akan mencari index.html untuk menjalankan aplikasi.

Itu dia. Aplikasi Anda sedang berjalan!

Pada 2017 cara terbaik adalah menggunakan angular-cli (v1.4.4) untuk proyek sudut Anda.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

Anda tidak perlu menambahkan - secara eksplisit karena dihidupkan secara default dengan --prod. Dan penggunaan --output-hashing sesuai dengan preferensi pribadi Anda mengenai peledakan cache.

Anda dapat secara eksplisit menambahkan dukungan CDN dengan menambahkan:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

jika Anda berencana untuk menggunakan CDN untuk hosting yang sangat cepat.

Dengan Angular CLI , Anda dapat menggunakan perintah berikut:

ng build --prod

Ini menghasilkan folder dist dengan semua yang Anda butuhkan untuk menggunakan aplikasi.

Jika Anda tidak berlatih dengan server web, saya sarankan Anda menggunakan Angular to Cloud . Anda hanya perlu mengompres folder dist sebagai file zip dan mengunggahnya di platform.

Saya akan mengatakan banyak orang dengan pengalaman Web sebelum sudut, digunakan untuk menyebarkan artefak web mereka di dalam perang (yaitu jquery dan html di dalam proyek Java / Spring). Saya akhirnya melakukan ini untuk mengatasi masalah CORS, setelah mencoba untuk menjaga proyek sudut dan REST saya terpisah.

Solusi saya adalah memindahkan semua konten sudut (4), dihasilkan dengan CLI, dari aplikasi saya ke MyJavaApplication / angular. Kemudian saya memodifikasi build Maven saya untuk menggunakan maven-resources-plugin untuk memindahkan konten dari / angular / dist ke root dari distribusi saya (mis. $ Project.build.directory} / MyJavaApplication). Angular memuat sumber daya dari root perang secara default.

Ketika saya mulai menambahkan perutean ke proyek sudut saya, saya memodifikasi maven build untuk menyalin index.html dari / dist ke WEB-INF / app. Dan, menambahkan pengontrol Java yang mengalihkan semua panggilan sisi server sisanya untuk diindeks.

Ikuti saja tautan di bawah ini,

Ubah halaman Index.html Anda Script Path file Ubah path component.html Anda jika Anda mendapatkan kesalahan yang tidak dapat menemukan lokasi

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy