ng2集成spring boot的后台(2)

该文件需要指定下列参数:
(1) node版本
(2) npm版本
(3) working directory
(4) 加入3个
+ 下载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路径下。

        
            com.jdriven.ng2boot
            frontend
            ${project.version}
            runtime
        
        ···
        
            
                target/frontend
                static
            
        

第六步: 执行打包和测试

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

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
  }
}

你可能感兴趣的:(ng2集成spring boot的后台(2))