node.js - Angular2+Spring Boot : Unable to resolve context path issue | No data on frontend

Question

我已经创建了一个 Angular2+SpringBoot 网络应用程序，我正试图将其部署在我能够成功运行的单个服务器 Tomcat 上。

但是，我无法理解生成的上下文路径或请求如何从 UI 流向后端 Rest 服务 并填充数据。

我在 UI 上有几个下拉菜单，我正在通过服务调用填充这些菜单，但未获取数据。

看看表单组件:显示两个下拉菜单调用

   getBrands() {
    this.http.get('/brands')
      .map(res => res.json())
      .subscribe(
        data => { this.brandsArray = data;
                  this.brand = this.defaultStringValue;
        },
        err => console.error(err),
        () => console.log('All brands fetched.'));
  }
  getNetworks() {
    this.http.get('/mylab/networks')
      .map(res => res.json())
      .subscribe(
        data => { this.networksArray = data;
                  this.network = this.defaultStringValue;
        },
        err => console.error(err),
        () => console.log('All networks fetched.'));
  }

这是 proxy.json 的样子:

{
"/mylab" :{
"target" : "http://localhost:8081",
"secure" : false
}
}

这是后端服务:

 @RestController
 public class DropDownController {

   @Autowired
   DropDownService dropdownService;


/**
 * Returns list of brands to populate dropdown
 * @return
 */
@RequestMapping(value = "/brands", method = RequestMethod.GET)
public List<String> getBrands(){
    return dropdownService.getBrands();
}

/**
 * Returns list of networks to populate dropdown
 * @return
 */
@RequestMapping(value = "/networks", method = RequestMethod.GET)
public List<String> getPlatform(){
    return dropdownService.getNetworks();
}

}

浏览器控制台输出显示以下错误:

GET http://localhost:8081/brands    404 Not Found     2ms
GET http://localhost:8081/mylab/networks  404 Not Found  1ms 

这清楚地表明两条路径都没有解析。

此外，pom.xml 显示构建信息:

<build>
        <finalName>MyLab</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-failsafe-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>integration-test</goal>
                            <goal>verify</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <configuration>
                    <workingDirectory>${angular.project.location}</workingDirectory>
                    <installDirectory>${angular.project.nodeinstallation}</installDirectory>
                </configuration>
                <executions>
                    <!-- It will install nodejs and npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v9.2.0</nodeVersion>
                            <npmVersion>5.6.0</npmVersion>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                        to clean and create "/dist" directory -->
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Plugin to copy the content of /angular/dist/ directory to output 
            directory (ie/ /target/transactionManager-1.0/) -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>default-copy-resources</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <overwrite>true</overwrite>
                            <outputDirectory>${project.basedir}/src/main/webapp/</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${project.basedir}/${angular.project.location}/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>

不确定如何解决这个问题。

Answer 1

打开您的 application.properties 文件并添加以下两行。

port: 8081
server.contextPath=/mylab

然后尝试以下 URL

http://localhost:8081/mylab/networks

如果您的应用程序没有其他错误并且已启动，则上述 URL 应该有效。