如何在Eclipse中用Angular 5替换AngularJS并复用Java后端

Hey there! Let's walk through how to swap out your AngularJS frontend with Angular 5 while keeping your existing Java backend fully functional. Here's a practical, step-by-step guide tailored to your Eclipse/Tomcat setup:

1. Clean Up the AngularJS Assets #

First, remove all AngularJS-specific files from your Java web project to avoid conflicts:

• Delete old AngularJS core files (like angular.js, angular-route.js) from your web root (e.g., src/main/webapp or WebContent).
• Remove AngularJS controllers, services, directives, and view templates (typically in folders like js/controllers, views).
• Get rid of legacy dependency folders like bower_components or old node_modules if they’re tied to AngularJS.

2. Integrate Your Angular 5 Project Files #

Take the Angular 5 project you created with WebEclipse/Angular CLI and merge its core files into your Java project:

• Copy the src folder (containing your Angular 5 components, services, modules) into the root of your Java project (next to src/main for Maven projects).
• Copy the package.json, angular.json, tsconfig.json, and other Angular CLI config files into the root of your Java project.

3. Configure Angular 5 Build Output for Tomcat #

By default, Angular CLI builds to a dist folder—we need to point this to your Java web root so Tomcat can serve the Angular 5 app:

• Open angular.json in your project root.
• Find the outputPath property under projects -> [your-project-name] -> architect -> build -> options.
• Change its value to point to your web root directory. For example:

  "outputPath": "../src/main/webapp"
  

  Note: Adjust the path based on your project structure—if you’re using a traditional Eclipse Web Project, it might be ../WebContent.

4. Update the Entry Point (index.html) #

Replace your old AngularJS-powered index.html with the one from your Angular 5 project, then tweak it for Tomcat:

• Remove all AngularJS script references and the ng-app directive.
• Ensure the Angular 5 build outputs (like runtime.js, polyfills.js, main.js) are referenced correctly. When you run npm run build, these files will be generated directly in your web root.
• Add the Angular 5 root component tag (<app-root></app-root>) where your main content should load.

5. Migrate API Calls to Angular 5's HttpClient #

Your Java backend API endpoints should stay the same, but you’ll need to rewrite the frontend calls using Angular 5’s HttpClient:

• Import HttpClientModule into your Angular 5 root module (app.module.ts).
• Replace AngularJS $http or $resource calls with HttpClient methods (get(), post(), etc.). For example:

  // AngularJS way
  $http.get('/api/users').then(response => { /* handle data */ });
  
  // Angular 5 way
  this.http.get('/api/users').subscribe(data => { /* handle data */ });
  

• Make sure to handle error responses appropriately using RxJS operators (since Angular 5 uses RxJS for async operations).

6. Migrate Routing and UI Logic #

• Replace AngularJS routing (ngRoute/ui-router) with Angular 5’s RouterModule. Define your routes in app-routing.module.ts and map them to your new Angular 5 components.
• Convert AngularJS filters to Angular 5 pipes, and rewrite any custom directives as Angular 5 components or attribute directives.
• If you used state management (like ngRedux), consider switching to NgRx for Angular 5, or use shared services to manage app state.

7. Set Up Build and Deployment Workflow #

• Run npm install in your project root to install all Angular 5 dependencies.
• Configure a build command in Eclipse: Go to your project properties, add a builder that runs npm run build (or npm run build --prod for production) to compile your Angular 5 code into the web root.
• Deploy the updated project to Tomcat as you normally would—since the Angular 5 files are in the web root, Tomcat will serve them alongside your Java backend.

8. Test Thoroughly #

• Start Tomcat and navigate to your app’s URL. Check the browser console for any errors (like missing dependencies or API call issues).
• Test all key features: API interactions, page routing, form submissions, etc., to ensure everything works with the new Angular 5 frontend.

内容的提问来源于stack exchange，提问作者Juan Medina