javascript - Angular 网站部署问题

Question

我使用 Angular 构建了一个网站。我是一个相当基本的 Angular 用户，但我的应用程序目前处于令我满意的状态。在整个开发过程中，我始终使用 ngserve 来测试和调试我的应用程序。

dist 在 ng build 和 ng build --prod> 上成功编译。运行 ngserve --prod 也可以正常工作。但是，当我尝试通过 dist 文件夹中的 index.html 页面打开应用程序时(在构建时使用 -- bh .flag ，我收到两个非常相似的错误之一)

Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/quent/website/PersonalWebApp/dist/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/quent/website/PersonalWebApp/dist/index.html'. Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/quent/website/PersonalWebApp/dist/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/quent/website/PersonalWebApp/dist/index.html'.

还有一个错误，页面无法正确获取图像

Failed to load resource: net::ERR_FILE_NOT_FOUND

因此，这让我相信这是我遇到的 Angular 问题，而不是部署问题。作为引用，当我尝试部署到 Azure 时，我在控制台中收到“无法加载资源:服务器错误”，并在页面上显示无法获取/。

我包含了我的 angular-cli.json 文件以供引用。如果这还不足以帮助我开始调试此问题，请告诉我。非常感谢!

我的.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "personal-web-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "web.config"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/hammerjs/hammer.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
} 

Answer 1

不是一个 Angular 人，但您可能需要通过网络服务器提供由 ng build --prod 生成的静态文件，而不是仅仅在浏览器中打开它们。后者通常不是你想要的，因为当协议(protocol)是 file 时有很多限制(来源是 null 这通过同源有很多含义政策，跨站点 XHR/获取请求等有限制)。

通过 Web 服务器提供静态文件的一种廉价方法是通过 python3 -m http.server 8080 ，它将在 http://localhost:8080 上提供文件.