ASP.NET 코어 기반 각도 2 앱 변경을 위해 브라우저를 자동으로 새로 고침

Question

최근 ASP.NET 코어에서 각도 2를 사용하기 시작했습니다. 나는 Webpack을 사용하여 SystemJs에서 자동 로딩 혼란을 없애기 때문에, 내 앱이 Angular에서 hello world를 위해 끔찍한 400 개의 js 파일을로드하게되었습니다. Visual Studio에서 Webpack을 통합하기 위해 WebPackTaskRunner을 찾았습니다. this 기사를 사용하여 Webpack 감시자가 프로젝트로드시 시작되도록 VS를 구성했습니다.

이 툴킷을 사용하면 CTRL + S를 사용하여 Angular 2 앱을 변경할 수 있습니다. 몇 초 후 스크립트가 컴파일되고 브라우저에서 새로 고칠 수 있습니다. 일부 js 파일이 변경되었을 때 브라우저 자체를 새로 고칠 수 있도록 자동화하고 싶습니다. 이 발견은 webpack-dev-server을 사용하여 수행 할 수 있습니다. 문제는 다음과 같습니다. 다른 웹 서버 (예 : 포트 8080)가 시작되고 모든 경로가 끊어졌습니다.

예를 들어 사용자/GetAll에서 데이터를 가져 오려면 일반적으로 디버깅 서버 (http://localhost:5000/api/Users/GetAll)에 있습니다. 응용 프로그램이 webpack devserver를 사용하여 localhost : 8080에서 실행되기 때문에이 응용 프로그램은 http://localhost:8080/api/Users/GetAll을 요청하려고 시도합니다. http://localhost:8080/api/Users/GetAll은 ASP.NET 코어 웹 서버가 없기 때문에 작동하지 않습니다. 이 문제를 해결하려면 기본 URL을 지정해야했습니다. 그리고 두 웹 서버 (ASP.NET Core 및 Webpack dev)를 시작해야합니다.

Visual Studio에서 ASP.NET Core를 사용하여 Angular 2로 실시간 새로 고침을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

WebPack은 Angular 2 앱을 번들로 제공하며 프로젝트 디렉토리에서 파일 변경 사항을 감시하기 때문에 개발 중에도 쉽게 사용할 수 있습니다. 새로운 경량 http 서버에서 실행되어 브라우저에 앱을 표시합니다.

ASP.NET 코어의 CORS를 켜야합니다. localhost : 8080에서 localhost : 5000까지의 문제로 인해 다른 도메인에서 실행중인 Angular 2 앱과 함께 작동합니다.

Enabling Cross-Origin Requests (CORS)

또한, 당신은 어딘가에 당신이 HTTP 호출을 수행 할 필요가있는 장소의 내부에 하드 코딩하지, 모두를위한 한 시간을 변경할 수 있습니다 서비스의 URL을 넣어해야합니다. 이 파일에는 개발, 준비 및 프로덕션과 같은 모든 환경의 URL이 포함되어야합니다. 빌드 매개 변수를 기반으로 URL을 선택하도록 WebPack을 구성 할 수 있습니다.

AngularClass/angular2-webpack-starter