ng2集成spring boot的后台(2)

该文件需要指定下列参数:
(1) node版本
(2) npm版本
(3) working directory
(4) 加入3个<execution>:
+ 下载node和npm到node和node_modules路径下。
+ npm下载该项目的依赖包
+ npm 进行项目的build

默认情况下,angular-cli会把最终的ng2应用放在src\main\frontend\dist路径下,可以通过修改angular-cli.json文件将最终生成的路径修改成我们需要打包放置的位置上。

  {
    "root": "src",
    "outDir": "../../../target/frontend",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
      "styles.css"
    ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

第五步: 使spring boot打包时候能联动angular2.

由于maven打包时候,会默认把resource路径下的东西拷贝到jar包中,因此,可以将打包后的ng2程序添加到maven的resource路径下。

        <dependency>
            <groupId>com.jdriven.ng2boot</groupId>
            <artifactId>frontend</artifactId>
            <version>${project.version}</version>
            <scope>runtime</scope>
        </dependency>
        ···
        <resources>
            <resource>
                <directory>target/frontend</directory>
                <targetPath>static</targetPath>
            </resource>
        </resources>

第六步: 执行打包和测试

在主目录下执行下列的命令:

mvn clean install
cd backend
mvn spring-boot:run

从浏览器中进行测试:
http://localhost:8080

多说一句

在ng2中要实现服务端不同端口的通信,需要在前端这样实现。

  1. 修改package.json代码,添加如下:
"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.conf.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

修改proxy.conf.json文件,添加如下:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容