Question

虽然 ng serve 正在运行并在更改时重新加载应用，但应用尝试相对于当前路径加载资源（* .bundie.js）。

当然，如果当前路径不是应用程序的根目录，则会生成大量404。

<base href="/">元素是我所知道的唯一确定基本URL的元素。 这是正确的吗？

这让我感到奇怪，这将是默认行为，但从我的研究中我找不到多少。我可以通过在浏览器中重新加载到root并导航到我以前的位置来解决问题。目前这不是一个问题，但后来，随着我开发越来越多的水平，这将变得非常烦人。

我该怎么做才能解决这个问题？

这是我的控制台的截图。

这是我的 index.html ：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>App name</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
</body>

</html>

这是 index.html 的视图来源：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>App name</title>
    <base href="">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

我只需运行：

即可运行我的项目

ng serve

这是我的 .angular-cli.json ：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "app-name"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "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": [],
      "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

感谢JB Nizet我解决了我的问题。

首先，我将"baseHref: "/"添加到项目的 .angular-cli.json 文件中。这解决了这个问题。

然而，正如他所提到的，我不应该这样做。

所以我在全局和项目级别重新安装了Angular CLI，遵循以下步骤：https://github.com/angular/angular-cli#updating-angular-cli。现在，无需将该选项添加到 .angular-cli.json 文件即可解决该问题。

我现在对事情有所了解。

开发模式下的Angular app相对于当前路径加载JS / CSS

1 个答案: