aspnetcore angular universal
1.0.0
Angular SEOの動作：
このリポジトリは、Trilon.ioとAngular Universalチームによって維持されており、クライアント側だけでなく、インスタントアプリケーション塗装のためにサーバーでレンダリングされるAngular 7.0+を使用してASP.NETコア2.1の高度なスターターになることを目的としています（注：SSRが障害の方法についてここで読む必要がある場合は注目）。
これは、最新のすべてのテクノロジー、利用可能な最高のビルドシステムを含む機能が豊富なスターターアプリケーションであり、今日のシングルページアプリケーション（SPA）で必要な多くの現実世界の例とライブラリが含まれています。
これは、すべての最新の標準、ガルプ、bower、タイピングなし、手動で何も「構築」することはありません。 npm、webpack、.netはあなたのためにすべてを処理します！
これらは、このスターターに見られる機能のほんの一部です！
ASP.NET 2.1 -VS2017今すぐサポート！
角度7.0.0 ：
ng gc components/example-componentng gs shared/some-serviceWebpackビルドシステム（Webpack4）
フレームワークのテスト
生産性
ASP.NETコア2.1
azure
npm i -S @markpieszak/ng-application-insights依存関係としてインストールするだけです。 // Add the Module to your imports
ApplicationInsightsModule . forRoot ( {
instrumentationKey : 'Your-Application-Insights-instrumentationKey'
} )Docker
.NET Core 2.1がインストールされていることを確認してください。 VS2017は、プロジェクトを開くときにすべてのネクタリーNPM＆.NET依存関係を自動的にインストールします。
F5を押してデバッグを開始するだけです！
Docker-Support ：スタートアッププロジェクトをDocker-ComposeとPress F5に変更する
注： module not found: boot.server （または類似）、コマンドラインを開き、 npm run build:devすべての資産がWebpackによって適切に構築されていることを確認します。
注：C＃extension＆.Netコアデバッガーがインストールされていることを確認してください。
このプロジェクトには、構成されたlaunch.jsonファイルが付属しており、F5をプッシュしてプロジェクトを開始できます。
# cd into the directory you cloned the project into
npm install && npm run build:dev && dotnet restore
# or yarn install dotnet runでコマンドラインからプロジェクトを実行している場合は、環境変数を開発に設定することを確認してください（それ以外の場合は、HMRのようなものが機能しない可能性があります）。
# on Windows:
set ASPNETCORE_ENVIRONMENT=Development
# on Mac/Linux
export ASPNETCORE_ENVIRONMENT=Development dotnet publishを使用して、生成されたフォルダーをサーバーに配置し、IISを使用してすべてを起動します。
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 注：このアプリケーションには、同じプロジェクト内にWebAPI（REST API）のセットアップがありますが、もちろん、これらすべてを完全に個別のプロジェクト（理想的に）に抽象化することができます。 .NETコアのものはすべて、Simplicityのために同じプロジェクトで行われます。
ルートレベルファイル
ここでは、ルートレベルで通常の容疑者が見つかりました。
フロントエンド指向ファイル：
package.json -NPMプロジェクトの依存関係とスクリプト.tsconfigタイプスクリプト構成（ここでもパスもセットアップします）webpack構成ファイル（モジュラーバンドリング +もっと多く）karma構成ファイル（単体テスト）protractor - 構成ファイル（E2Eテスト）tslint -TypeScriptコードの糸くずルールこれがどのように構造化されているかを見てみましょう。
Angular Universalを使用すると、プラットフォームごとにApplicatoinロジックを分割する必要があります。このフォルダー内を見ると、2つのルートファイルが表示されます。そのロジック全体がそれぞれBrowser＆Serverに分岐します。
ここでは、クライアントの角度ブートストラップ、いくつかのことをセットアップします。
このファイルをタッチする必要はほとんどありませんが、注意すべきことは、ブラウザでのみ使用したいライブラリをインポートするファイルです。 （それを行うときは、サーバーに模擬実装を提供する必要があることを知ってください）。
ここのフォルダー構造に注意してください./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アプリケーションに新機能/コンポーネント/などを追加すると、一般的にルートngmodule （ /ClientApp/app/app.module.tsにあります）に物事を追加しますが、なぜこのフォルダーに他の2つのngmodulesがあるのですか？
これは、プラットフォームごとのロジックを分割したいためですが、どちらもapp.module.tsという名前の一般的なngmoduleを共有していることに注意してください。ほとんどのものをアプリケーションに追加するとき、これは新しいコンポーネント /ディレクティブ /パイプ /などを追加する必要がある唯一の場所ですapp.module.browser || app.module.server 。
この点を例で説明するために、依存関係インジェクションを使用してブラウザとサーバーの異なるStorageServiceを挿入する方法を確認できます。
// For the Browser (app.module.browser)
{ provide : StorageService , useClass : BrowserStorage }
// For the Server (app.module.server)
{ provide : StorageService , useClass : ServerStorage }覚えておいてください、あなたは通常、
app.module.tsについて心配する必要があるだけです。それがあなたのアプリケーションのほとんどを新しい側面を追加する場所です！
私たちが指摘したように、これらは単純化のためにここにあり、現実的には、すべてのマイクロサービス / REST APIプロジェクトなどの個別のプロジェクトが必要になる場合があります。
このアプリケーション内でMVCを利用していますが、 HomeControllerという名前のコントローラーが1つだけ必要です。これは、Angularアプリケーション全体が文字列にシリアル化され、ブラウザに送信され、クライアント側でブートストラップし、その後本格的なスパになるために必要なすべてのアセットとともに送信されます。
ショートバージョンは、そのノードプロセスを呼び出し、リクエストオブジェクトを渡し、 boot.serverファイルを呼び出し、nets nets ViewDataオブジェクトに渡す素晴らしいオブジェクトを取り戻し、 Views/Shared/_Layout.cshtml and /Views/Home/index.cshtmlファイルを振り返ることです。
より詳細な説明はこちらをご覧ください：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たとえば、 _Layout.cshtmlファイルをご覧ください。すべてのSEOマジック（Angular自体から抽出したもの）をすべて処理および挿入する方法に注意してください。
<!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は、単にアプリケーションをレンダリングし、バンドルされたWebpackファイルを提供します。
@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 >
}さて、クライアント側のAngularが引き継ぎ、完全に機能するスパがあります。 （しかし、サーバーレンダリングされることのこれらすべての大きなSEOの利点を獲得しました）！
Angular 7にコンポーネントを構築するとき、留意すべきことがいくつかあります。
APIを呼び出すときは、必ず絶対URLを提供してください。 （サーバーは相対パスを理解できないため、 /api/whatever ）。
API呼び出しはサーバー中に実行され、クライアントレンダリング中にもう一度再度通話が行われます。そのため、フリッカーが表示されないように、重要なデータを転送するデータを使用していることを確認してください。
window 、 document 、 navigator 、およびその他のブラウザタイプ -サーバーには存在しません- したがって、それらを使用するか、それらを使用するライブラリ（たとえばjquery）は機能しません。この機能の一部が本当に必要な場合は、いくつかのオプションがあります。
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使用を制限または避けるようにしてください。サーバー側のレンダリングプロセスが遅くなります。コンポーネントでngOnDestroy削除してください。ネイティブエレメントを直接操作しないでください。レンダラー2を使用します。これを行い、どんな環境でも見解を変えることができるようにします。
constructor ( element : ElementRef , renderer : Renderer2 ) {
this . renderer . setStyle ( element . nativeElement , 'font-size' , 'x-large' ) ;
}sass-loaderにはnode-sass > = 4：DockerコンテナまたはLocalHost Run NPM Rebuild Node-Sass -fのいずれかが必要です。 HomeController内のロジックをコメントして、 @Html.Raw(ViewData["SpaHtml"])アプリケーションルートappcomponentタグ（この場合は "app-root"）に置き換えるだけで： <app-root></app-root> 。
また、
isPlatformBrowser/etcロジックを削除して、boot.server、app.module.browser＆app.module.serverファイルを削除することもできますboot.browserファイルポイントをapp.moduleに削除することもできます。
isPlatformBrowser()使用方法については、Gotchasを確認してください。
今のところSSRを削除するか、サポートがプラットフォームサーバーレンダリングを処理するためにサポートが来る必要があるかどうかを待ちます。これは、最近更新された角度材料の変更により、現在可能になりました。これはまだ利用できるチュートリアルがありません。
注：可能な場合は、レンダラーなどの使用など、Angular（5+）でDOMを処理するより良い、より抽象的な方法があるため、jQueryまたはライブラリの使用を避けてください。
はい、もちろんですが、これを行う前にセットアップする必要があることがいくつかあります。まず、jQueryがWebpackベンダーファイルに含まれていることを確認し、Webpackプラグインが設定されていることを確認してください。 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
これで、あなたが持っている「プラグイン」などが、 boot.browser.tsファイルにのみ含まれていることを確認してください。 （つまり： import 'slick-carousel'; ）jqueryを使用するコンポーネントで、そのように上部の近くにインポートするようにしてください。
import * as $ from 'jquery' ; AngularのisPlatformBrowser()条件付きでjqueryに向けられたものを必ずラップしてください！
IE9を介してIE9をサポートするには、 polyfillsフォルダーのpolyfills.tsファイルを開き、必要に応じて「ポリフィルをインポート」してから外れます。また、 ecma: 6からecma: 5へのTerserPluginのwebpack.configおよびwebpack.config.vendor変更オプションを確認してください。
MicrosoftのSteve Sanderson（@stevesandersonms）に感謝し、JavaScriptServicesでの彼の素晴らしい作品とASP.NET Coreとノードの世界を統合します。
また、多くの貢献者に感謝します！
ここで簡単な問題をご覧ください
完璧なことは何もありませんが、問題を作成してお知らせください（既存の既存のものが既にないことを確認してください）、修正を試してみてください！良いアイデアがある場合、または貢献したい場合は、提案に問題を抱えているか、フォークからPRを作成してください。
Copyright（c）2016-2019 Mark Pieszak
詳細については、 Trilon.ioをご覧ください！ Twitter @trilon_io
[email protected]までお問い合わせください。プロジェクトのニーズについてお話しましょう。
Twitter：@trilon_io
