首页 文章

Spring启动运行Angular2

提问于
浏览
3

我有一个应用程序,REST作为Spring Boot应用程序,客户端作为Angular2 .

早些时候,我分别启动了应用程序 - Spring Boot通过启动SpringBootApplication主方法(它开始侦听端口8080),Angular2 - 从命令行运行 npm start (它通常在3000端口上启动) .

现在我希望Maven用一个命令运行这两个应用程序 .

  • Angular 4.0.0

  • Spring Boot 1.5.4.RELEASE

我一直试图申请answerthis tutorial . 但在第一种情况下,只启动Angular应用程序,仅次于REST .

我的package.json:

"scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy-config.json\" ",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "angular-in-memory-web-api": "~0.3.0",
    "angular2-modal": "^3.0.1",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jsplumb": "^2.4.3",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-popup": "^0.4.0",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46"
  },
  "repository": {}

3 回答

  • 1

    我同意sinedsem,对于dev我会将这两个应用分开 . 至于管理 生产环境 构建,我会做的事情略有不同 . 我不喜欢在构建中涉及任何手动步骤的想法,例如将构建文件从angular复制到spring boot app的源代码 .

    相反,我会在maven下管理整个构建,并将角度ui和spring boot应用程序构建为单独的模块 . 构建将完全由maven管理,使用frontend-maven-plugin将角度ui构建委派给npm / gulp等 . 这可以作为依赖关系添加到构建输出的spring boot app可以复制到spring boot模块的目标目录 .

    父POM

    创建一个新的父POM

    <project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <groupId>org.example.angularboot</groupId>
    <artifactId>boot-ui-parent</artifactId>
    <version>0.1</version>
    <packaging>pom</packaging>
    
    <modules>
        <module>spring-boot-app</module>
        <module>angular-ui-resources</module>
    </modules>
    

    Angular UI模块

    使用frontend-maven-plugin构建Angular UI模块以执行任何npm / bower / gulp等构建步骤 . 将构建的输出设置为 target/classes/static 或将构建的角度资源复制到 target/classes/static

    例如下面的插件安装node / npm并运行所需的npm bower和gulp步骤来构建角度应用程序 .

    <plugin>
                        <groupId>com.github.eirslett</groupId>
                        <artifactId>frontend-maven-plugin</artifactId>
                        <version>1.3</version>
                        <executions>
                            <execution>
                                <id>install node and npm</id>
                                <goals>
                                    <goal>install-node-and-npm</goal>
                                </goals>
                                <phase>generate-resources</phase>
                                <configuration>
                                    <nodeVersion>v6.10.3</nodeVersion>
                                    <npmVersion>4.6.1</npmVersion>
                                </configuration>
                            </execution>
                            <execution>
                                <id>npm install</id>
                                <goals>
                                    <goal>npm</goal>
                                </goals>
                                <phase>generate-resources</phase>
                            </execution>
                            <execution>
                                <id>bower install</id>
                                <goals>
                                    <goal>bower</goal>
                                </goals>
                                <configuration>
                                    <arguments>install --allow-root</arguments>
                                </configuration>
                            </execution>
                            <execution>
                                <id>gulp build</id>
                                <goals>
                                    <goal>gulp</goal>
                                </goals>
                                <phase>generate-resources</phase>
                            </execution>
                        </executions>
                    </plugin>
    

    Spring Boop App模块

    这应该与当前的spring boot模块相同,添加了新的parent和angular-ui模块的依赖项 .

    由于角度UI的构建版本打包在target / classes / static下,而angular-ui jar位于spring boot的类路径中,因此角度ui被打包到spring引导应用程序中 .

    或者,您可以运行copy resources maven插件将资源从angular-ui模块的build目录复制到spring-boot模块的build目录 . 虽然我不喜欢将资源文件从一个模块复制到另一个模块,例如

    <plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.0.1</version>
    <executions>
        <execution>
            <id>copy-angular-components</id>
            <phase>process-classes</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                <resources>
                    <resource>
                        <directory>${basedir}/../angular-ui/target/classes/static</directory>
                        <filtering>false</filtering>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
    
  • 2

    你的package.json是由npm使用的,这不是这里必不可少的工具 .

    我推荐你:

    • 对于开发,请分别运行两个应用程序 .

    • 用于 生产环境 :

    • 将您的角度应用程序打包 . 例如,使用webpack .

    • 将您的软件包放到/ src / main / resources / static下的spring boot项目中 .

    • 运行Spring Boot应用程序,它将从静态资源为您的Angular应用程序提供服务 .

  • 1

    tprebs提出的解决方案是有意义的,但两个maven模块是强耦合的(因为角度模块将文件存放在spring-boot模块中,这不是一个好习惯) .

    保持简单的愚蠢,如果它是一个开发前端和后端的团队,单个maven模块就足够了 . 例如 :

    单一模块模块方法(KISS)

    假设spring引导源代码位于 src/main/java 文件夹中,而角度代码位于 src/main/js 文件夹中 .

    src/main/js/angular-cli.json file :

    将Angular应用程序作为spring boot静态资源提供服务 .

    {
      [...]
      "apps": [
        {
          "root": "src",
          "outDir": "../resources/static",
          [...]
        },
       [...]
      ]
    }
    

    pom.xml :

    使用npm从maven构建Angular部分

    <plugin>
        <!-- build UI angular -->
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.0</version>
        <executions>
            <execution>
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <configuration>
                    <workingDirectory>src/main/js</workingDirectory>
                    <nodeVersion>v6.9.2</nodeVersion>
                    <npmVersion>4.1.1</npmVersion>
                </configuration>
            </execution>
    
            <execution>
                <id>npm install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <!-- Optional configuration which provides for running any npm command -->
                <configuration>
                    <workingDirectory>src/main/js</workingDirectory>
                    <arguments>install</arguments>
                </configuration>
            </execution>
    
            <execution>
                <id>npm build</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <!-- Optional configuration which provides for running any npm command -->
                <configuration>
                    <workingDirectory>src/main/js</workingDirectory>
                    <arguments>run-script build</arguments>
                </configuration>
            </execution>
        </executions>
    </plugin>
    

    另一方面,如果团队不同,我确实会选择两个独立的maven模块,但为了限制两个模块之间的耦合,我将角度部分发布为webjar(参见https://spring.io/guides/gs/spring-boot-cli-and-js) .

相关问题