asp.net-core
Angular2 및 .Net Core

Angular 2 Hello World의 빠른 자습서! Visual Studio 2015에서 .Net Core를 사용하는 응용 프로그램

단계 :

1. 빈 .Net 핵심 웹 응용 프로그램 만들기 :

2. wwwroot로 이동하여 Index.html이라는 일반 html 페이지를 만듭니다.

3. 정적 파일을 받아들이도록 Startup.cs를 구성하십시오 ( "project.json"파일에 "Microsoft.AspNetCore.StaticFiles": "1.0.0"라이브러리를 추가해야 함).

4. NPN 파일 추가 :

   • WebUi 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 NPN 구성 파일 (package.json)을 추가합니다.

   • 패키지의 마지막 버전을 확인하십시오.

     참고 : Visual Studio에서 패키지 버전을 감지하지 못하면 (일부 패키지는 버전을 표시하고 일부 패키지는 버전을 표시하지 않기 때문에 모든 패키지를 확인하십시오.) Visual Studio에서 제공되는 노드 버전이 올바르게 작동하지 않기 때문일 수 있습니다 , 아마도 외부에서 노드 js를 설치 한 다음 그 설치를 Visual Studio와 연결해야 할 것입니다.

     나는. 노드 js 다운로드 및 설치 : https://nodejs.org/es/download/

     ii. 설치를 Visual Studio와 연결하십시오 : https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (선택 사항) package.json을 저장 한 후 프로젝트에 종속성을 설치하고, 그렇지 않으면 package.json 파일과 동일한 위치에서 명령 프롬프트를 사용하여 "npm install"을 실행하십시오.

     참고 : Visual Studio에 추가 할 수있는 확장 프로그램 인 "명령 줄 열기"를 설치하는 것이 좋습니다.

5. 타이프 스크립트 추가 :

   • WebUi 프로젝트 내부에 TsScript 폴더를 만듭니다 (TypeScript는 브라우저로 이동하지 않고 일반 JS 파일로 변환됩니다).이 JS 파일은 gulp를 사용하여 wwwroot foder로 갈 것입니다. 나중에 설명합니다).

   • 해당 폴더 안에 "TypeScript JSON 구성 파일"(tsconfig.json)을 추가하십시오. 그리고 다음 코드를 추가하십시오.

     

   • WebUi 프로젝트의 루트에 typings.json이라는 새 파일을 추가합니다. 그리고 다음 코드를 추가하십시오.

   • Web Project 루트에서 명령 줄을 열고 "타이핑 설치"를 실행하면 타이핑 폴더가 생성됩니다 (이 작업은 단계 4, 숫자 iii의 주에서 선택적 단계로 설명 된 "명령 줄 열기"가 필요합니다).

6. 꿀꺽 마심을 추가하여 파일을 이동하십시오.

   • 웹 프로젝트 루트에 "Gulp Configuration File"(gulpfile.js)을 추가하십시오.
   • 코드 추가 :

7. "tsScripts"폴더 안에 Angular 2 부트 스트래핑 파일을 추가하십시오 :

   app.component.ts

   app.module.ts

   main.ts

8. wwwroot 내부에서 다음 파일 구조를 만듭니다.

9. 스크립트 폴더 (그러나 앱 외부)에 systemjs.config.js를 추가합니다. 그리고 다음 코드를 추가하십시오.

10. Gulp Task를 실행하여 wwwroot에서 스크립트를 생성하십시오.

    • gulpfile.js를 마우스 오른쪽 버튼으로 클릭하십시오.
    • 작업 실행기 탐색기 나는. 작업이로드되지 않은 경우 ( "로드 실패"참조) 출력 창으로 이동하여 오류를 살펴본 후 대부분은 꿀꺽 꿀꺽 소리 파일의 구문 오류입니다.
    • "기본"작업 및 "실행"을 마우스 오른쪽 단추로 클릭하십시오 (시간이 소요되며 확인 메시지는 정확하지 않지만 작업이 완료되었음을 나타내지 만 프로세스가 계속 실행 중임을 명심하십시오).

11. Index.html을 다음과 같이 수정하십시오.

12. 이제 실행하고 즐기십시오.

    노트:

    • typescript와 함께 컴파일 오류가 발생하는 경우 (예 : "TypeScript Virtual Project") Visual Studio 용 TypeScript 버전이 "package.json"에서 선택한 버전에 따라 업데이트되지 않는다는 표시입니다. : https://www.microsoft.com/en-us/download/details.aspx?id=48593

참고 문헌 :

• Deborah Kurata의 Pluralsight에서 "Angular 2 : Getting Started"과정 :

  https://www.pluralsight.com/courses/angular-2getting-started-update

• 각도 2 공식 문서 :

  https://angular.io/

• Mithun Pattankar의 기사 :

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

.NET Core 프로젝트에서 Angular 2 구성 요소를 생성 할 때 예상되는 오류 (버전 0.8.3)

.NET Core 프로젝트에서 새로운 Angular 2 구성 요소를 생성 할 때 다음과 같은 오류가 발생할 수 있습니다 (버전 0.8.3 기준).

Error locating module for declaration
        SilentError: No module files found

또는

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[해결책]

1. app.module.client.ts의 이름을 app.client.module.ts로 변경하십시오.

2. app.client.module.ts를 엽니 다. 선언문 앞에 3 개의 점 "..."을 붙이고 선언을 대괄호로 묶습니다.

   예를 들면 다음과 같습니다. [...sharedConfig.declarations, <MyComponent>]

3. Open boot-client.ts : 새 app.client.module 참조를 사용하도록 가져 오기를 업데이트하십시오.

   예를 들면 다음과 같습니다. import { AppModule } from './app/app.client.module';

4. 이제 새 구성 요소를 생성 해보십시오. 즉 ng g component my-component

[설명]

Angular CLI는 프로젝트에서 app.module.ts라는 파일을 찾고 구성 요소를 가져 오기 위해 declarations 등록 정보에 대한 참조를 찾으려고 시도합니다. 이것은 배열이어야하며 (sharedConfig.declarations와 동일), 변경 사항은 적용되지 않습니다.

[출처]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (3.33 강의 참여자 인 Bryan Garzon)