Question

您好我正在尝试将Angular 2与Spring集成。我想避免在编译时每次在webapp内部复制dist文件夹内容的手动方式。我正试图直接通过pom。

我的项目pom看起来像这样：

 <!-- Plugin to execute command "npm install" and "npm run build" inside 
            /angular directory -->
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.0</version>
            <configuration>
                <workingDirectory>angular</workingDirectory>
                <installDirectory>temp</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>v8.9.1</nodeVersion>
                        <npmVersion>5.5.1</npmVersion>
                        <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
                        <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
                    </configuration>
                </execution>

                <!-- It will execute command "npm install" inside "/angular" directory -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <!-- It will execute command "npm build" inside "/angular" 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>
            <version>2.4.2</version>
            <executions>
                <execution>
                    <id>default-copy-resources</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <overwrite>true</overwrite>
                        <!-- <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory> -->
                        <outputDirectory>${project.basedir}/src/main/webapp</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${project.basedir}/angular/dist</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

我的Initializer.java看起来像这样：

public void onStartup(ServletContext servletContext) throws ServletException {

    System.out.println("IN Initializer : onStartup");
    WebApplicationContext context = getContext();
    servletContext.addListener(new ContextLoaderListener(context));
    ServletRegistration.Dynamic dispatcher = servletContext.addServlet("DispatcherServlet", new DispatcherServlet(context));
    dispatcher.setLoadOnStartup(1);
    dispatcher.addMapping("/");

}

 private AnnotationConfigWebApplicationContext getContext() {
        AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();
        context.setConfigLocation("com.tour.config");
        return context;
    }

appConfig看起来像这样：

@Bean
public ViewResolver setupViewResolver() {
    UrlBasedViewResolver  resolver = new UrlBasedViewResolver();
    resolver.setPrefix("/");
    resolver.setSuffix(".html");
    resolver.setViewClass(JstlView.class);
    return resolver;
}

 @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index.html");
    }

但是在点击url索引时没有加载。附：我不能使用web.xml，因此也不能使用welcome-file标签。欢迎任何建议。提前谢谢。

修改：添加了代码结构屏幕截图code-structure

编辑2：我通过扩展WebMvcConfigurerAdapter而不是WebMvcConfigurationSupport解决了这个问题。但是，WebMvcConfigurerAdapter现已弃用。任何有关如何解决它的线索将不胜感激。感谢。

Answer 1

我将Angular和Spring应用程序保存在两个单独的项目中。为了自动部署dist目录，我使用了4行的npm脚本。

我在此演示文稿中展示了如何执行此操作：https://youtu.be/k8r76d8QzXs?t=2237

在没有web.xml的情况下将Angular 2与Spring集成

1 个答案: