Angular网站部署与本地打开异常问题求助

Hey there! Let's tackle each of your problems one by one with practical, actionable fixes:

1. Local index.html SecurityError & Image Loading Failures #

When opening dist/index.html directly via the file:// protocol, you’re hitting two linked issues rooted in how browsers handle local files:

SecurityError: Cannot execute History.replaceState on origin null #

Angular’s default HTML5 routing mode relies on the browser’s History API, which is restricted in the file:// context (since the origin is null). Here are your fixes:

• Option 1: Use a local HTTP server (recommended for testing built apps)
  Install a lightweight server globally first:

  npm install -g http-server
  

  Navigate to your dist folder and run:

  http-server -o
  

  This serves your app over http://localhost:8080 (or similar), which has a valid origin and avoids the History API error entirely.
• Option 2: Switch to Hash routing
  If you need to test via file://, modify your Angular Router module to use HashLocationStrategy:

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';
  
  const routes: Routes = [/* your existing routes */];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
  })
  export class AppRoutingModule { }
  

  Rebuild with ng build --bh . and opening index.html directly will work without the SecurityError.

Image Loading Failures (net::ERR_FILE_NOT_FOUND) #

This stems from path resolution issues in the file:// context. Verify these points:

• Use relative paths for images (e.g., ./assets/logo.png instead of /assets/logo.png) when using --bh ..
• Check your .angular-cli.json to ensure your image directory is included in the assets array—this ensures images are copied to dist during build:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets", // Confirm this includes your image folder
        "favicon.ico"
      ],
      // other configs...
    }
  ]
  

2. Azure Deployment: Cannot GET / #

This is a classic SPA routing issue on Azure Web Apps. When users navigate directly to a sub-route (like /about), Azure’s server looks for a physical file at that path—which doesn’t exist—so it returns a 404. Here’s how to fix it:

For Windows-based Azure Web Apps #

Add a web.config file to your project’s src folder (it will be copied to dist during build) with these rewrite rules:

<?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>

Don’t forget to add web.config to the assets array in .angular-cli.json so it’s included in the build.

For Linux-based Azure Web Apps (using Nginx) #

Create a nginx.conf file with this key rule to redirect all non-file requests to index.html:

location / {
    try_files $uri $uri/ /index.html;
}

Configure Azure to use this custom Nginx configuration during deployment.

Also, ensure you build your app with the correct base-href for Azure:

• If deploying to the root of your Web App: ng build --prod --bh /
• If deploying to a subfolder: ng build --prod --bh /your-subfolder-name/

Final Quick Checks #

• Confirm ng build --prod completes without errors, and the dist folder contains all expected assets (images, web.config, etc.).
• When deploying to Azure, upload the entire contents of the dist folder—not just the folder itself.

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