Bagaimana Anda menggunakan aplikasi Angular?


194

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?

Jawaban:


91

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


1
Saya juga akan merekomendasikan JSPM ( jspm.io ): info di sini gist.github.com/robwormald/429e01c6d802767441ec dan proyek unggulan di sini github.com/madhukard/angular2-jspm-seed
Harry

Setelah 6 bulan ketika Angular2 ada di rc5 dan akan segera dirilis, jawaban ini masih relevan karena merujuk pada proyek seed angular2. Proyek hebat, banyak kontributor!
lame_coder

3
Saya masih sangat bingung dengan poin (1). Apa yang dimaksud dengan menyebarkan 'APA ADANYA'? Apakah itu berarti menyalin semua 50.000 file node_module juga? Saya mencoba menggunakan contoh HEROES dan tidak yakin apa yang harus ditambahkan sebagai sumber skrip di file indeks.
Oliver Watkins

1
Ya - itu berarti menyalin semua dependensi Anda, ini termasuk yang dari node_modulesjuga. Catatan - Anda hanya harus menyalin dependensi yang diperlukan untuk menjalankan program. Jangan menyalin deps yang hanya digunakan untuk pengembangan (misalnya tegukan / mendengus / dll).
Di tengah

1
Iya. Dalam file itu system.js diinstruksikan apa dan di mana memuat dari semua dependensi Anda.
Di tengah

88

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


Bagaimana kamu melakukannya? Mengikuti start cepat Angular 2, saya menjalankan perintah itu alih-alih 'npm start', dan saya mendapatkan 'ng perintah tidak ditemukan'
Rahly

1
@NateBunney Saya baru mengenal web dev scene. Saya bingung. ng build menghasilkan banyak file di folder dist. Katakanlah Anda menggunakan spring boot sebagai server web, apakah Anda hanya menyalin paste file-file itu ke folder web-inf publik di spring boot? Atau apakah Anda memerlukan server nodejs di depan spring boot untuk melayani ng2 dist?
Srikanth

3
Mengapa ini tidak ada dalam dokumentasi? Tampaknya kelalaian besar!
Kokodoko

Ingat, versi pertama Angular 2 baru berumur sebulan.
Nate Bunney

1
@ user1460043, ya, tapi ada solusi mudah untuk masalah Anda. Cukup gulirkan proyek CLI sudut baru dan salin direktori src Anda ke proyek CLI.
Nate Bunney

21

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"
}
  1. 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);
  1. 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:)


menambahkan angular-cli dalam dependensi meningkatkan ukuran dist bagaimana menangani ini
Janak Bhatta

7

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!


6

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.

58
Tolong jangan Microsoft-ify hal-hal semacam ini karena hanya kompatibel dengan Azure. Ini seperti mengatakan jika Anda menggunakan Angular, Anda seharusnya hanya dapat menggunakan layanan Google Cloud.
ozanmuyes

2
Berguna untuk mengetahui ada modul npm untuk digunakan di Azure.
Anthony Brenelière

1
@ user6402762 +1 untuk Taste the cream.
Leonardo Wildt

Saya mencoba menggunakan web Angular 4 saya menggunakan jawaban ini, tetapi saya terus mendapatkan kesalahan seperti Can't resolve 'node-uuid' in path\azure-deploy\lib. Apakah ini masih mungkin? Saya mengkonfigurasi langkah 5app.module dan saya tidak yakin saya melakukan langkah 3 dan 4 dengan benar. Bisakah Anda menjelaskannya?
Wouter Vanherck

6

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.


5

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


5

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


4

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>

jenis server apa? seharusnya menjadi server nginx atau apa yang akan mengandung dist
famas23

Bisa jadi Tomcat, pilihanmu. Saya akan mengatakan menggunakan apa yang Anda kenal.
Wallace Howery

Apache Linux atau server lain apa pun, yang menggunakan aturan .htaccess.
Sumit Jaiswal

@TamaghnaBanerjee, periksa mode tulis ulang server diaktifkan atau tidak?
Sumit Jaiswal

3

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


Terima kasih untuk referensi ke kompilasi Dokumen dan untuk menyebutkan AOT. Nilainya terdengar nyata,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero

1
Terima kasih atas umpan baliknya - jika Anda belum menemukan waktu untuk menguji kompilasi AoT sendiri, saya telah menambahkan video yang menunjukkan perbedaan jumlah file dan ukuran (menggunakan proyek github yang dirujuk dalam jawaban).
Peter Salomonsen

Luar biasa! Terima kasih telah membantu Peter!
aero

2

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


1

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.


Terima kasih - ini adalah cara paling sederhana yang bisa saya temukan.
Brian Burns

1

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!


Hanya jika Anda memulai proyek Anda dengan angular-cli no?
Portekoi

Bukan seperti itu. Jika Anda belum memulai proyek angular2 Anda menggunakan angular-cli, Anda dapat membangun proyek untuk produksi. Hanya Anda yang perlu menginstal angular-cli di mesin Anda pada saat dibuat. Gunakan npm install -g @ angular / cli untuk menginstal angular-cli secara global.
Malatesh Patil

1

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.


1

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.


1

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.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.