I believe best practice is to have two separate projects. That said, here's how we've incorporated an angular project into our Spring MVC project.
- Renamed
src
folder in our angular project to ng-src
.
- Copied the contents of the angular project, not the folder itself, into our Spring MVC project. This added
e2e
, node_modules
, and ng-src
and several files to the root of our Spring MVC project.
- Renamed
index.html
in ng-src
to index.jsp
Edit a few things in .angular-cli.json
"root": "ng-src",
"outDir": "src/main/webapp/app",
and
"index": "index.jsp",
If DispatcherServlet
is mapped to /
, add a resource mapping to spring config
In XML:
<mvc:resources mapping="/app/**" location = "/app/"/>
Java Config:
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/app/**")
.addResourceLocations("/app/")
}
As we develop, we have a process running in the background building angular:
ng build --bh "${pageContext.request.contextPath}/app/" --w
The --bh
sets the baseHref used in generating index.jsp
. --w
tells angular-cli to watch the directory and build anytime things change.
Any changes made to the angular project are made under ng-src. Angular-cli will see those changes and build the project. Your angular project is built to /your-context-path/app/
Our IDE watches the project for changes on the filesystem. Depending on your IDE, you may need to configure it to watch. I know eclipse doesn't by default.
You'll need to refresh the page in your browser to see changes (ctrl+F5).