春季启动运行Angular2

Posted 2023-02-27

【中文标题】春季启动运行Angular2

【英文标题】：Spring boot run Angular2

【发布时间】：2017-12-04 10:07:58

【问题描述】：

我有一个使用 REST 作为 Spring Boot 应用程序和客户端作为 Angular2 的应用程序。

之前，我分别启动应用程序 - Spring Boot 通过启动 SpringBootApplication 主方法（它开始侦听端口 8080），Angular2 - 从命令行 npm start 运行（它通常在 3000 端口上启动）。

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

Angular 4.0.0 Spring Boot 1.5.4.RELEASE

我一直在尝试申请answer 和this 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": 

【参考方案1】：

我同意 sinedsem 的观点，对于开发人员，我会将这两个应用程序分开。至于管理生产构建，我会做一些稍微不同的事情。我不喜欢在构建中涉及任何手动步骤的想法，例如将构建文件从 Angular 复制到 Spring Boot 应用程序的源代码。

相反，我会在 maven 下使用 Angular UI 和 Spring Boot 应用程序构建为单独的模块来管理整个构建。构建将完全由 maven 管理，使用 frontend-maven-plugin 将 Angular UI 构建委托给 npm/gulp 等。这可以作为依赖项添加到 Spring Boot 应用程序的构建输出中，也可以复制到 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 步骤来构建 Angular 应用程序。

<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 应用模块

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

由于 Angular UI 的构建版本被打包在 target/classes/static 下，并且 angular-ui jar 位于 spring boot 的类路径中，因此 angular-ui 被打包到 spring boot 应用程序中。

或者，您可以运行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>

【讨论】：

是的，当然我的意思是自动构建 bundle 和 spring 应用程序。

很好，它可以工作，但是当我手动刷新页面时（例如 localhost:8080/welcome） - 我得到一个 Whitelabel Error Page。当我只浏览 localhost:8080 时 - 它可以很好地用于第一次手动刷新。在开发工具中，我看到所有资源都消失了。

localhost:8080 默认情况下，spring boot 会加载 index.html。我希望您会看到白标错误页面，因为您没有任何控制器映射到 /welcome。如果/welcome 映射到角度状态提供程序中，则尝试使用 url localhost:8080/#/welcome/。这将从 index.html 加载 Angular 应用程序，然后路由到映射到 url '/welcome' 的状态

【参考方案2】：

你的 package.json 被 npm 使用，这里不是必不可少的工具。

我推荐你：

对于开发，请分别运行两个应用程序。 用于生产： 将您的 Angular 应用程序打包成包。例如，使用webpack。 将你的 bundle 放到 /src/main/resources/static 下的 Spring Boot 项目中。 运行 Spring Boot 应用程序，它将从静态资源为您的 Angular 应用程序提供服务。

【参考方案3】：

tprebs 提出的解决方案是有道理的，但是两个 maven 模块是强耦合的（因为 angular 模块将文件存放在 spring-boot 模块中，这不是一个好的做法）。

让事情变得简单愚蠢，如果是一个开发前端和后端的团队，一个 maven 模块就足够了。例如：

单 maven 模块方法 (KISS)

假设spring boot源代码在src/main/java文件夹，角码在src/main/js文件夹。

src/main/js/angular-cli.json 文件：

将 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 模块，但是为了限制两个模块之间的耦合，我会将 angular 部分发布为 webjar（参见https://spring.io/guides/gs/spring-boot-cli-and-js）。