aspnetcore angular universal
1.0.0
SEO Angular beraksi:
Repositori ini dikelola oleh trilon.io dan tim universal sudut dan dimaksudkan untuk menjadi starter canggih untuk kedua ASP.NET Core 2.1 Menggunakan Angular 7.0+, tidak hanya untuk sisi klien, tetapi untuk diberikan di server untuk cat aplikasi instan (Catatan: jika Anda tidak perlu SSR dibaca di sini tentang cara menonaktifkannya).
Ini dimaksudkan untuk menjadi aplikasi starter kaya fitur yang berisi semua teknologi terbaru, sistem pembuatan terbaik yang tersedia, dan mencakup banyak contoh dunia nyata dan perpustakaan yang diperlukan dalam aplikasi satu halaman hari ini (SPA).
Ini memanfaatkan semua standar terbaru, tidak ada tegukan, tidak ada bower, tidak ada pengetikan, tidak ada "membangun" apa pun secara manual. NPM, Webpack, dan .NET menangani semuanya untuk Anda!
Ini hanya beberapa fitur yang ditemukan dalam starter ini!
ASP.NET 2.1 - Dukungan VS2017 Sekarang!
Angular 7.0.0 :
ng gc components/example-componentng gs shared/some-serviceSistem Bangun Webpack (Webpack 4)
Kerangka kerja pengujian
Produktivitas
ASP.NET Core 2.1
Biru langit
npm i -S @markpieszak/ng-application-insights sebagai dependensi. // Add the Module to your imports
ApplicationInsightsModule . forRoot ( {
instrumentationKey : 'Your-Application-Insights-instrumentationKey'
} )Buruh pelabuhan
Pastikan Anda memiliki .NET Core 2.1 yang diinstal dan/atau VS2017 15.3. VS2017 akan secara otomatis menginstal semua dependensi NPM & .NET yang baru saat Anda membuka proyek.
Cukup dorong F5 untuk memulai debugging!
DOCKER-SUPPORT : Ubah Proyek Startup menjadi Docker-Compose dan tekan F5
Catatan : Jika Anda mendapatkan kesalahan setelah ini seperti module not found: boot.server (atau serupa), buka baris perintah dan jalankan npm run build:dev untuk memastikan semua aset telah dibangun dengan benar oleh Webpack.
Catatan: Pastikan Anda memiliki C# Extension & .NET Core Debugger yang diinstal.
Proyek ini dilengkapi dengan file peluncuran.JSON yang dikonfigurasi untuk memungkinkan Anda mendorong F5 untuk memulai proyek.
# cd into the directory you cloned the project into
npm install && npm run build:dev && dotnet restore
# or yarn install Jika Anda menjalankan proyek dari baris perintah dengan dotnet run pastikan Anda mengatur variabel lingkungan Anda untuk pengembangan (jika tidak, hal -hal seperti HMR mungkin tidak berfungsi).
# on Windows:
set ASPNETCORE_ENVIRONMENT=Development
# on Mac/Linux
export ASPNETCORE_ENVIRONMENT=Development Menggunakan dotnet publish , setelah selesai, tempatkan folder yang dihasilkan ke server Anda dan gunakan IIS untuk menyalakan semuanya.
git remote add azure https://[email protected]:443/my-angular2-site.git
// ^ get this from Azure (Web App Overview section - Git clone url)
git push --set-upstream azure master CATATAN: Aplikasi ini memiliki pengaturan WebAPI (API REST kami) di dalam proyek yang sama, tetapi tentu saja semua ini dapat diabstraksi menjadi proyek yang sepenuhnya terpisah (') secara ideal. .NET Core Things dilakukan dalam proyek yang sama demi kesederhanaan.
File level root
Di sini kita memiliki tersangka yang biasa ditemukan di tingkat akar.
File berorientasi front-end:
package.json - dependensi & skrip proyek NPM.tsconfig - Konfigurasi TypeScript (di sini kami mengatur jalur juga)webpack - File Konfigurasi (Bundling Modular + Lebih Banyak)karma - File Konfigurasi (Pengujian Unit)protractor - file konfigurasi (pengujian E2E)tslint - aturan aturan linting kode tipeMari kita lihat bagaimana ini terstruktur sehingga kita dapat memahami semuanya!
Dengan Angular Universal, kita perlu membagi logika aplikasi per platform kita, jadi jika kita melihat ke dalam folder ini, Anda akan melihat 2 file root, masing -masing cabang seluruh logika untuk browser & server.
Di sini kami mengatur beberapa hal, bootstrap sudut klien.
Anda hampir tidak perlu menyentuh file ini, tetapi sesuatu yang perlu diperhatikan, ini adalah file di mana Anda akan mengimpor perpustakaan yang hanya ingin Anda gunakan di browser. (Ketahuilah bahwa Anda harus memberikan implementasi tiruan untuk server saat melakukan itu).
Perhatikan struktur folder di sini di ./ClientApp/ :
+ /ClientApp/
+ /app/
App NgModule - our Root NgModule (you'll insert Components/etc here most often)
AppComponent / App Routes / global css styles
* Notice that we have 2 dividing NgModules:
app.module.browser & app.module.server
You'll almost always be using the common app.module, but these 2 are used to split up platform logic
for situations where you need to use Dependency Injection / etc, between platforms.
Note: You could use whatever folder conventions you'd like, I prefer to split up things in terms of whether they are re-usable
"components" or routeable / page-like components that group together and organize entire sections.
+ + > ++ > /components/
Here are all the regular Components that aren't "Pages" or container Components
+ + > ++ > /containers/
These are the routeable or "Page / Container" Components, sometimes known as "Dumb" Components
+ + > ++ > /shared/
Here we put all shared Services / Directives / Pipes etc Saat menambahkan fitur/komponen baru/dll ke aplikasi Anda, Anda akan sering menambahkan hal -hal ke root ngmodule (terletak di /ClientApp/app/app.module.ts ), tetapi mengapa ada dua ngmodule lain di folder ini?
Ini karena kami ingin membagi logika per platform kami, tetapi perhatikan mereka berdua berbagi ngmodule umum bernama app.module.ts . Saat menambahkan sebagian besar hal ke aplikasi Anda, ini adalah satu -satunya tempat yang harus Anda tambahkan dalam komponen baru / arahan / pipa / dll. Anda hanya perlu sesekali perlu menambahkan hal -hal spesifik platform ke app.module.browser || app.module.server .
Untuk mengilustrasikan poin ini dengan contoh, Anda dapat melihat bagaimana kami menggunakan injeksi ketergantungan untuk menyuntikkan StorageService yang berbeda untuk browser & server.
// For the Browser (app.module.browser)
{ provide : StorageService , useClass : BrowserStorage }
// For the Server (app.module.server)
{ provide : StorageService , useClass : ServerStorage }Ingat saja, Anda biasanya hanya perlu khawatir tentang
app.module.ts, karena di situlah Anda akan menambahkan sebagian besar aplikasi aplikasi baru Anda!
Seperti yang kami tunjukkan, ini ada di sini untuk kesederhanaan, dan secara realistis Anda mungkin menginginkan proyek terpisah untuk semua proyek Microservices / REST API Anda / dll.
Kami menggunakan MVC dalam aplikasi ini, tetapi kami hanya membutuhkan & memiliki satu pengontrol, bernama HomeController . Di sinilah seluruh aplikasi sudut kami mendapatkan serial ke dalam string, dikirim ke browser, bersama dengan semua aset yang dibutuhkan untuk kemudian bootstrap di sisi klien, dan menjadi spa penuh sesudahnya.
Versi pendeknya adalah bahwa kami memohon proses simpul itu, meneruskan objek permintaan kami & memohon file boot.server , dan kami mendapatkan kembali objek yang bagus yang kami masukkan ke .Nets ViewData Objek, dan taburkan file Views/Shared/_Layout.cshtml dan /Views/Home/index.cshtml kami!
Penjelasan yang lebih rinci dapat ditemukan di sini: NG-AspNetCore-Engine Readme
// Prerender / Serialize application
var prerenderResult = await Prerenderer . RenderToString (
/* all of our parameters / options / boot.server file / customData object goes here */
) ;
ViewData [ "SpaHtml" ] = prerenderResult . Html ;
ViewData [ "Title" ] = prerenderResult . Globals [ "title" ] ;
ViewData [ "Styles" ] = prerenderResult . Globals [ "styles" ] ;
ViewData [ "Meta" ] = prerenderResult . Globals [ "meta" ] ;
ViewData [ "Links" ] = prerenderResult . Globals [ "links" ] ;
return View ( ) ; // let's render the MVC View Lihatlah file _Layout.cshtml misalnya, perhatikan bagaimana kami membiarkan .net menangani dan menyuntikkan semua sihir SEO kami (yang kami ekstrak dari sudut itu sendiri)!
<!DOCTYPE html >
< html >
< head >
< base href =" / " />
<!-- Title will be the one you set in your Angular application -->
< title > @ViewData["Title"] - AspNET.Core Angular 7.0.0 (+) starter </ title >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
@Html.Raw(ViewData["Meta"]) <!-- <meta /> tags -->
@Html.Raw(ViewData["Links"]) <!-- <link /> tags -->
< link rel =" stylesheet " href =" ~/dist/vendor.css " asp-append-version =" true " />
@Html.Raw(ViewData["Styles"]) <!-- <style /> tags -->
</ head >
... etc ... Views/Home/index.cshtml kami cukup membuat aplikasi dan melayani file webpack yang dibundel di dalamnya.
@Html.Raw(ViewData["SpaHtml"])
< script src =" ~/dist/vendor.js " asp-append-version =" true " > </ script >
@section scripts {
< script src =" ~/dist/main-client.js " asp-append-version =" true " > </ script >
}Nah sekarang, sudut sisi klien Anda akan mengambil alih, dan Anda akan memiliki spa yang berfungsi penuh. (Tapi kami memperoleh semua manfaat SEO yang hebat dari server-diseret)!
Saat membangun komponen di Angular 7 ada beberapa hal yang perlu diingat.
Pastikan Anda memberikan URL mutlak saat memanggil API apa pun. (Server tidak dapat memahami jalur relatif, jadi /api/whatever yang akan gagal).
Panggilan API akan dijalankan selama server, dan sekali lagi selama render klien, jadi pastikan Anda menggunakan transfer data yang penting bagi Anda sehingga Anda tidak melihat kedipan.
window , document , navigator , dan jenis browser lainnya - tidak ada di server - jadi menggunakannya, atau perpustakaan apa pun yang menggunakannya (jQuery misalnya) tidak akan berfungsi. Anda memiliki beberapa opsi, jika Anda benar -benar membutuhkan beberapa fungsi ini:
import { PLATFORM_ID } from '@angular/core' ;
import { isPlatformBrowser , isPlatformServer } from '@angular/common' ;
constructor ( @ Inject ( PLATFORM_ID ) private platformId : Object ) { ... }
ngOnInit ( ) {
if ( isPlatformBrowser ( this . platformId ) ) {
// Client only code.
...
}
if ( isPlatformServer ( this . platformId ) ) {
// Server only code.
...
}
}setTimeout . Ini akan memperlambat proses rendering sisi server. Pastikan untuk menghapusnya ngOnDestroy dalam komponen.Jangan memanipulasi NativeElement secara langsung . Gunakan renderer2 . Kami melakukan ini untuk memastikan bahwa di lingkungan apa pun kami dapat mengubah pandangan kami.
constructor ( element : ElementRef , renderer : Renderer2 ) {
this . renderer . setStyle ( element . nativeElement , 'font-size' , 'x-large' ) ;
}sass-loader membutuhkan node-sass > = 4: baik di wadah Docker atau localhost menjalankan npm membangun kembali node-sass -f Cukup komentari logika di dalam homeController, dan ganti @Html.Raw(ViewData["SpaHtml"]) dengan hanya aplikasi appomponent root aplikasi Anda ("app-root" dalam kasus kami): <app-root></app-root> .
Anda juga dapat menghapus logika
isPlatformBrowser/etc, dan menghapus boot.server, app.module.browser & app.module.server file, cukup pastikan poin fileboot.browserAnda keapp.module.
Periksa gotcha tentang cara menggunakan isPlatformBrowser() .
Anda akan ingin menghapus SSR untuk saat ini, atau menunggu karena dukungan harus datang untuk menangani rendering-server platform. Ini sekarang dimungkinkan, dengan perubahan material sudut yang baru diperbarui. Kami belum memiliki tutorial yang tersedia untuk ini.
Catatan: Jika memungkinkan, cobalah untuk menghindari penggunaan jQuery atau perpustakaan yang bergantung padanya, karena ada cara yang lebih baik, lebih abstrak untuk menangani DOM dalam sudut (5+) seperti menggunakan renderer, dll.
Ya, tentu saja tetapi ada beberapa hal yang perlu Anda siapkan sebelum melakukan ini. Pertama, pastikan jQuery disertakan dalam file vendor webpack, dan bahwa Anda memiliki pengaturan plugin webpack untuk itu. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
Sekarang, pastikan "plugin" apa pun yang Anda miliki, hanya termasuk dalam file boot.browser.ts Anda. (yaitu: import 'slick-carousel'; ) Dalam komponen Anda ingin menggunakan jQuery, pastikan untuk mengimpornya di dekat bagian atas seperti itu:
import * as $ from 'jquery' ; Selalu pastikan untuk membungkus apa pun yang berorientasi jQuery di isPlatformBrowser() Angular Conditional!
Untuk mendukung IE9 melalui IE11, buka file polyfills.ts di folder polyfills dan unkromment dari 'impor polyfill' sesuai kebutuhan. Juga - pastikan opsi perubahan webpack.config dan webpack.config.vendor Anda dari TerserPlugin ecma: 6 ke ecma: 5 .
Terima kasih banyak kepada Steve Sanderson (@stevesandersonmms) dari Microsoft dan karyanya yang luar biasa di JavaScriptServices dan mengintegrasikan dunia Node dengan ASP.NET Core.
Juga terima kasih kepada banyak kontributor!
Lihat masalah kami yang lebih mudah di sini
Tidak ada yang sempurna, tapi tolong beri tahu saya dengan membuat masalah (pastikan belum ada yang sudah ada), dan kami akan mencoba dan mencari perbaikan untuk itu! Jika Anda memiliki ide bagus, atau ingin berkontribusi, jangan ragu untuk membuat masalah dengan proposal, atau hanya membuat PR dari garpu Anda.
Hak Cipta (C) 2016-2019 Mark Pieszak
Lihat trilon.io untuk info lebih lanjut! Twitter @trilon_io
Hubungi kami di [email protected], dan mari kita bicarakan kebutuhan proyek Anda.
Twitter: @trilon_io
