단일 서버에서 Angular 2로 Spring4MVC를 실행하십시오.

저는 angular2를 처음 사용합니다. 각도 2 인 SpringMVC4의 가능한 파일 구조는 무엇입니까? 이미지에 나타낸 바와 같이,이 각도 1.x에서하지만 각도 2의 파일 구조에 대해 작동합니다단일 서버에서 Angular 2로 Spring4MVC를 실행하십시오.

는 상당히 다르다과 그 구성 요소를 구동하고,

아래에 주어진 나는 각 2 파일 구조를 사용하고 있습니다

나는 많은 것을 검색했고 프론트 엔드 (angular2 사용)와 백엔드 (서버 - 스프링/스프링 부트)를 따로 사용할 수 있다는 것을 알았지 만 응용 프로그램을 실행하려면 2 개의 서버가 필요합니다. 예를 들어 , 프론트 엔드 : 192.168.100.1:4200 그리고 백엔드 : 192.168.100.1:8080

그래서 동일한 서버에 모두 angular2 및 spring4MVC를 실행할 수있는 방법 또는 일반 파일 구조가 (192.168.100.1:8080을 같은) ?

미리 감사드립니다. 답변을 부탁드립니다!

출처

2017-02-09 BeingCoders

지금까지 답변이 없으므로 해결책을 찾았습니다. 내가 어떻게 한거야?

2 개의 컨텍스트가 필요합니다.

(1) 각도 2 프로젝트와

(2) 단일 서버에서 SPRINGMVC + Angular2을 실행하는 데, 우리의 주요 목표를 달성하기위한 단계 아래에 스프링 MVC

따릅니다.

일반적인 동적 웹 프로젝트를 만듭니다.
봄 또는 사용자 maven pom.xml에 필요한 모든 의존성 추가
CMD를 열고 angular2 애플리케이션으로 이동합니다. 명령을 히트

NPM를 설치 한 다음

NG는을 만들거나

이 명령은 "DIST"폴더를 생성합니다 모든 복사 NG 빌드 생산을 --prod 사용 모든 폴더를 포함한 파일

WebContent 디렉토리에 파일 및 폴더를 붙여 넣으십시오.
마지막으로 index.html에서 basehref = "./"를 변경해야합니다. 이제 서버를 실행할 준비가되었습니다. 또는 war 파일을 배포하고 tomcat 또는 다른 서버와 함께 제공 할 수 있습니다.

당신이 나머지 웹 서비스를 사용하여 단일 서버에 angular2 봄을 실행하려는 경우

당신은 호스트의 URL에 따라 webServiceEndPointUrl을 넣어해야합니다.예를 들어 localhost : 8080에서 앱을 실행하는 경우 URL을 유지해야합니다.

webServiceEndPointUrl = "http://localhost:8080/api/user"; 각도 측면. 그런 다음 붙여 넣기를 작성하여 WebContent 폴더에 복사 할 수 있습니다.

springMVC + ANGULAR2를 들어, 이미지 아래의 파일 구조를 참조하십시오

내가 거기에 단일 서버에서 응용 프로그램을 실행하기위한 이러한 방법을 사용하는 많은 단점이 있지만, 필요해야하는 경우이 따를 수 알고

각도면에서 아무 것도 변경하지 않으면 붙여 넣기 dist 폴더를 항상 복사 한 다음 배포 할 수 있습니다!

출처

2017-03-05 19:54:51 BeingCoders

5 단계에서 index.html의 basehref = "./"을 변경했습니다. 그것은 무엇으로 변경되어야 하는가? –

각도 2 응용 프로그램을 실행하는 경우 localhost : 4200을 말하면 basehref = "/"를 참조합니다. src/app/index.html에서 basehref 속성을 찾을 수 있습니다. 이제 SpringMVC (일반 구성 * 패턴)로이 작업을 실행하려면 dist 폴더의 모든 파일을 webapps 또는 WebcContent 폴더에 저장합니다. 여기 봄이 렌더링을 시작할 수있는 곳에서 말해야합니다. [(점선) ./은 현재 디렉토리를 의미합니다.] (슬래시) /는 루트 디렉토리입니다. 다른 구성이있는 경우 건너 뛸 수 있습니다. 일반적으로 아키텍처에서는 성공적으로 구현 및 구현했습니다. /와 함께 시도해 볼 수도 있습니다./ – BeingCoders

5 번 째 주셔서 감사합니다. 차이점/& ./ 이해하는 것이 정말로 필요합니다. –

당신은 당신의 솔루션을 자동화 할 수 있습니다 - 단지 (있는 당신이 nodejs를 설치하고 각 프로젝트를 빌드 할 수 있습니다) 프론트 엔드 - 받는다는 - 플러그인를 사용하고 받는다는 - 자원 - 플러그인/각도/DIST의 내용을 복사/.war 파일의 루트로 디렉토리

<plugin> 
     <groupId>org.apache.maven.plugins</groupId> 
     <artifactId>maven-resources-plugin</artifactId> 
     <version>3.0.2</version> 
     <executions> 
     <execution> 
      <id>default-copy-resources</id> 
      <phase>process-resources</phase> 
      <goals> 
      <goal>copy-resources</goal> 
      </goals> 
      <configuration> 
      <overwrite>true</overwrite> 
      <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory> 
      <resources> 
       <resource> 
       <directory>${project.basedir}/angular/dist</directory> 
       </resource> 
      </resources> 
      </configuration> 
     </execution> 
     </executions> 
</plugin>

를 (또한 this article 참조) 그리고 (개발하는 동안) 당신은 Angular CLI 도구 ng serve에 의해 runned nodejs 서버에 뜨거운 다시로드에게 기능을 사용할 수 있습니다.

출처

2017-03-13 12:38:46

단일 서버에서 Angular 2로 Spring4MVC를 실행하십시오.

답변

관련 문제