aspnetcore angular universal
1.0.0
Angular SEO 활동 :
이 저장소는 Trilon.io와 Angular Universal Team에 의해 유지되며 각 ASP.NET Core 2.1을 사용하는 ASP.NET Core 2.1의 고급 스타터가 될뿐만 아니라 클라이언트 측면뿐만 아니라 인스턴트 응용 프로그램 페인트를 위해 서버에서 렌더링해야합니다 (참고 : SSR이 여기에서 비활성화하는 방법에 대해 SSR을 읽을 필요가없는 경우).
이는 모든 최신 기술, 사용 가능한 최고의 빌드 시스템을 포함하는 기능이 풍부한 스타터 애플리케이션이며, 오늘날 단일 페이지 응용 프로그램 (SPA)에 필요한 실제 예제 및 라이브러리를 포함합니다.
이는 모든 최신 표준, Gulp, Bower, 타이핑 없음, 수동으로 "건물"을 사용합니다. NPM, 웹 팩 및 .NET은 모든 것을 처리합니다!
이것들은이 스타터에서 발견 된 기능 중 일부일뿐입니다!
ASP.NET 2.1- VS2017 지원 지금!
각도 7.0.0 :
ng gc components/example-componentng gs shared/some-serviceWebpack 빌드 시스템 (Webpack 4)
테스트 프레임 워크
생산력
ASP.NET CORE 2.1
하늘빛
npm i -S @markpieszak/ng-application-insights 종속성으로 설치하십시오. // Add the Module to your imports
ApplicationInsightsModule . forRoot ( {
instrumentationKey : 'Your-Application-Insights-instrumentationKey'
} )도커
.NET Core 2.1이 설치 및/또는 vs2017 15.3인지 확인하십시오. VS2017은 프로젝트를 열 때 모든 NECCESSARY NPM 및 .NET 종속성을 자동으로 설치합니다.
F5를 눌러 디버깅을 시작하십시오!
Docker-Support : 시작 프로젝트를 Docker-Compose로 변경하고 F5를 누릅니다.
참고 : module not found: boot.server (또는 이와 유사한) 명령 줄을 열고 npm run build:dev 사용하여 모든 자산이 WebPack에 의해 올바르게 구축되었는지 확인하십시오.
참고 : C# Extension & .NET Core 디버거가 설치되어 있는지 확인하십시오.
이 프로젝트에는 구성된 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 TypeScript 구성 (여기서도 경로를 설정합니다)webpack 구성 파일 (모듈 식 번링 + 훨씬 더)karma - 구성 파일 (단위 테스트)protractor 구성 파일 (E2E 테스트)tslint 타입 스크립트 코드 라인 규칙이것이 어떻게 구조화되어 있는지 살펴 보겠습니다.
Angular Universal을 사용하면 플랫폼 당 Applicatoin 논리를 분할해야 하므로이 폴더 내부를 보면 브라우저 및 서버의 전체 논리를 각각 분기 할 수 있습니다.
여기서 우리는 클라이언트 각도 부트 스트랩을 몇 가지 설정합니다.
이 파일을 거의 터치 할 필요가 없지만 주목할만한 점은 브라우저 에서만 사용하려는 라이브러리를 가져 오는 파일입니다. (이를 수행 할 때 서버에 대한 모의 구현을 제공해야한다는 것을 알고 있습니다).
./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 에 위치)에 물건을 추가하지만 왜이 폴더에 다른 두 가지 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 라는 하나의 컨트롤러 만 있으면됩니다. 이곳은 전체 각도 응용 프로그램이 문자열로 직렬화되어 브라우저로 보내지고 클라이언트 측에서 부트 스트랩에 필요한 모든 자산과 함께 완전한 스파가됩니다.
짧은 버전은 해당 노드 프로세스를 호출하여 요청 객체를 전달하고 boot.server 파일을 호출하고 .nets ViewData 객체로 전달하는 멋진 객체를 되 찾아 Views/Shared/_Layout.cshtml 및 /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 파일을 살펴보십시오.
<!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 단순히 응용 프로그램을 렌더링하고 번들링 된 웹 팩 파일을 제공합니다.
@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 >
}이제 클라이언트 측 각도가 인수되며 완전히 기능하는 스파가 있습니다. (그러나 우리는 서버 렌더링되는이 모든 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 제거하십시오.원주민을 직접 조작하지 마십시오 . renderer2를 사용하십시오. 우리는 모든 환경에서 우리의 견해를 바꿀 수 있도록이를 수행합니다.
constructor ( element : ElementRef , renderer : Renderer2 ) {
this . renderer . setStyle ( element . nativeElement , 'font-size' , 'x-large' ) ;
}sass-loader node-sass 필요합니다.> = 4 : Docker 컨테이너 또는 LocalHost 실행 NPM Rebuild Node-Sass -F. HomeController 내의 논리를 주석으로 간단히 말하고 @html.raw (viewData <app-root></app-root> @Html.Raw(ViewData["SpaHtml"]) 만 응용 프로그램 만 루트 AppComponent 태그 ( "App-Root")로 바꾸십시오.
또한
isPlatformBrowser/etc로직을 제거하고 boot.server, app.module.browser & app.module.server 파일을 삭제할 수도 있습니다.boot.browser파일이app.module을 가리 키십시오.
isPlatformBrowser() 사용하는 방법에 대한 Gotchas를 확인하십시오.
지금은 SSR을 제거하거나 플랫폼 서버 렌더링을 처리하기 위해 지원되므로 기다릴 것입니다. 최근에 업데이트 된 각도 재료 변경으로 이제 가능합니다. 아직 이용할 수있는 튜토리얼이 없습니다.
참고 : 가능하다면 jQuery 또는 라이브러리를 사용하지 않으면 렌더러 사용 등을 사용하는 것과 같은 각도 (5+)에서 DOM을 다루는 더 많은 추상적 인 방법이 있기 때문에 그에 의존하는 jQuery 또는 라이브러리를 사용하지 마십시오.
예, 물론이 일을하기 전에 설정해야 할 몇 가지 사항이 있습니다. 먼저 JQuery가 Webpack Vendor 파일에 포함되어 있고 WebPack 플러그인 설정이 있는지 확인하십시오. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
이제 보유한 "플러그인"등이 boot.browser.ts 파일에만 포함되어 있는지 확인하십시오. (예 : import 'slick-carousel'; ) 구성 요소에서 jQuery를 사용하려는 구성 요소에서는 상단 근처에서 가져와야합니다.
import * as $ from 'jquery' ; Angular 's isPlatformBrowser() 조건부에 jQuery를 지향하는 것을 항상 래핑하십시오!
IE9를 통해 IE11을 지원하려면 polyfills.ts 파일을 polyfills 폴더에서 열고 필요에 따라 '가져 오기 Polyfills'를 무너 뜨립니다. 또한 - webpack.config 및 webpack.config.vendor ecma: 6 에서 ecma: 5 로 TerserPlugin 의 옵션 변경 옵션을 확인하십시오.
Microsoft의 Steve Sanderson (@stevesandersonms)과 JavaScriptServices에 대한 그의 놀라운 작품과 Node의 세계를 ASP.NET Core와 통합하는 데 많은 감사를드립니다.
또한 많은 기고자들에게 감사합니다!
여기에서 더 쉬운 문제를 확인하십시오
완벽한 것은 없지만, 문제를 만들어서 알려주십시오 (이미 기존의 문제가 없는지 확인하십시오). 좋은 아이디어가 있거나 기여하고 싶다면 제안서에 문제를 일으키거나 포크에서 PR을 만들 수 있습니다.
저작권 (C) 2016-2019 Mark Pieszak
자세한 내용은 Trilon.io를 확인하십시오! 트위터 @trilon_io
[email protected]로 문의하고 프로젝트 요구에 대해 이야기합시다.
트위터 : @trilon_io
