Angular 5部署至真实主机后出现路由Cannot Get问题求助

Hey there, let's tackle that frustrating "Cannot Get" routing issue you're hitting with your Angular 5 app once it's live! This is a super common problem with single-page apps (SPAs) like Angular, and it all boils down to how client-side routing interacts with your web server.

Why This Happens #

Angular uses client-side routing—meaning all routing logic runs in the browser, not on the server. When you navigate around your app via links, Angular handles the route changes without reloading the page. But if you directly type a route like /chat-user-dashboard into the address bar or refresh the page, your browser sends a request to the server asking for that specific path. Since there's no physical file or directory matching /chat-user-dashboard on the server, it throws the "Cannot Get" error.

Solutions: Configure Your Server to Rewrite Requests #

The fix is to tell your server to redirect all non-file/directory requests to your app's index.html file, where Angular can take over handling the route. Below are step-by-step fixes for the most common servers:

Apache Server #

1. Create a .htaccess file in the root directory of your deployed app (same folder as index.html).
2. Paste this rewrite rule into the file:

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   </IfModule>
   

3. Make sure your Apache server has the mod_rewrite module enabled (most hosting providers have this on by default, but you can check with your host if unsure).

Nginx Server #

1. Open your Nginx site configuration file (usually located at /etc/nginx/sites-available/your-app-domain.conf).
2. Update the location / block to include try_files to redirect requests to index.html:

   server {
     listen 80;
     server_name your-domain.com;
     root /path/to/your/angular/app/dist; # Path to your built Angular files
     index index.html;
   
     location / {
       try_files $uri $uri/ /index.html; # This is the key line
     }
   }
   

3. Save the file and restart Nginx to apply changes:

   sudo systemctl restart nginx
   

IIS Server #

1. Create a web.config file in your app's root directory.
2. Add this XML configuration to handle route rewriting:

   <?xml version="1.0" encoding="UTF-8"?>
   <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="Angular Routes" stopProcessing="true">
             <match url=".*" />
             <conditions logicalGrouping="MatchAll">
               <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
               <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="/index.html" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

3. Ensure the IIS URL Rewrite module is installed (you can download it from the IIS management console if missing).

Bonus: Quick Fix for Static Hosting (No Server Access) #

If you're using a static hosting service where you can't configure server rules (like GitHub Pages), you can switch Angular to use hash-based routing:

1. Update your RouterModule.forRoot configuration in app.module.ts:

   RouterModule.forRoot([
     // Your existing routes here
     { path: '', component: HomeComponent },
     { path: 'login', component: LoginComponent },
     { path:'chat-user-dashboard', component:ChatUserDashboardComponent, canActivate:[ChatAuthGuard] },
     {path:'contact-us', component:ContactUsComponent},
     {path:'about-us', component:AboutUsComponent},
     {path:'not-found',component:NotFoundComponent},
     { path: '**', redirectTo: '/not-found', pathMatch: 'full' }
   ], { useHash: true }) // Add this option
   

This will change your routes to look like /#/chat-user-dashboard—the server ignores everything after the #, so it always serves index.html, and Angular handles the rest.

Final Checks #

• Make sure you built your app for production with ng build --prod (Angular 5's production build command) and deployed the contents of the dist folder correctly.
• Double-check your wildcard route is fully configured (you had a partial redirectTo... in your code) to ensure unmatched routes go to your 404 page.

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