使用 angular-cli 在 angular2 中获取 http://localhost:4200/null 404（未找到）答案

【问题标题】：GET http://localhost:4200/null 404 (Not Found) in angular2 with angular-cli使用 angular-cli 在 angular2 中获取 http://localhost:4200/null 404（未找到）
【发布时间】：2017-05-13 08:15:01
【问题描述】：

我正在使用 angular-cli 处理 angular2 项目。今天我将下面的版本更新为2.4.1。

"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1",
"@angular/compiler-cli": "^2.4.1",
"@angular/core": "~2.4.1",
"@angular/forms": "~2.4.1",
"@angular/http": "~2.4.1",
"@angular/platform-browser": "~2.4.1",
"@angular/platform-browser-dynamic": "~2.4.1",
"@angular/router": "~3.4.1",
"angular-cli": "^1.0.0-beta.24"

当我使用2.0.0时，它不会出错，但是现在，它会出现GET http://localhost:4200/null 404 (Not Found)这样的错误。

即使它出错，它也运行良好。但是，我想知道它为什么会发生，并修复这个错误。如果有人知道这件事，请告诉我。谢谢你:)

Packages.json

{
  ...
  
  "private": true,
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/material": "^2.0.0-beta.0",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/router": "~3.4.1",
    "@types/moment-timezone": "^0.2.33",
    "angular-cli": "^1.0.0-beta.24",
    "angular2-google-maps": "^0.17.0",
    "bootstrap": "^3.3.7",
    "bourbon": "^4.2.7",
    "core-js": "^2.4.1",
    "es6-promise": "^4.0.5",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.10",
    "node-sass": "^3.13.0",
    "primeng": "^1.1.0",
    "pubnub-angular2": "^1.0.0-beta.6",
    "quill": "^1.1.8",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.0.10",
    "typings": "^2.1.0",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.33",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "bootstrap-sass": "^3.3.7",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-loader": "^1.3.3",
    "ts-node": "1.2.1",
    "tslint": "4.2.0",
    "typescript": "2.0.2"
  }
}

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "five-delivery-admin"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss",
        "../node_modules/hammerjs/hammer.min.js",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/quill/dist/quill.core.css",
        "../node_modules/quill/dist/quill.snow.css",
        "../node_modules/quill/dist/quill.bubble.css"
      ],
      "scripts": [
        "../node_modules/quill/dist/quill.min.js",
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

【问题讨论】：

从您的帖子中可以看出，您正在浏览器中输入http://localhost:4200/null。是真的吗？
@K.Daniek，不，我什么也没输入。我刚刚使用 ng build 构建。
转到您的index.html 文件并确保您在head 标签中有<base href="./">。
@K.Daniek base href=/
@K.Daniek 以前不是问题。会不会有问题？？

标签： angular angular-cli

【解决方案1】：

所以我花了很长时间才弄清楚这一点，但我做到了。

我在更新后也发生了这种情况，但与此无关。

它肯定来自对具有 null 值的变量的引用，并且很可能是图像 src 属性。至少对我来说是这样，而且我在我的应用程序中使用来自服务器的值，而 img src 是唯一导致这种情况的原因，这是有道理的。

我有类似的东西：

<img [src]="myData?.imageUrl">

我认为? 安全运算符会确保我没有得到空错误，通常情况下会出现这种情况，但似乎当您绑定到src 属性时，浏览器会抛出错误，而不是编译器.由于安全运算符，编译器允许您将 null 绑定到它，但因为 src 是参考 URL，浏览器仍在寻找该 URL，控制台抛出错误，因为它找不到 URL relative/app/path/null

我发现解决这个问题的两种方法：

使用 ngIf:<img *ngIf="myData" [src]="myData.imageUrl"/>（如果没有数据，整个图像及其 src 属性甚至永远不会被加载，完全避免了这个问题）
使用插值：<img src="{{ myData?.imageUrl }}"/>（注意在这个解决方案中你仍然需要安全操作符，因为编译器会抛出错误，正如预期的那样，但现在如果值为 null，那么 src="" 而不是 null，即有效的 HTML 并且不会抛出引用错误）

希望这会有所帮助！

【讨论】：

这似乎不是预期的行为。 @HauntedSmores，您是否有机会使用 AngularFire2？
不，不使用 AngularFire2
@jaruesink 太棒了！
老兄！这让我今天发疯了。我找不到导致此错误的原因。你搞定了。我在 src 绑定上有一个安全的操作符，这确实是根本原因。谢谢一百万。
完美！但我仍然不知道哪个是修复的最佳选择。通常我使用'？符号。

【解决方案2】：

HauntedSmores 答案的补充：您还可以使用''-fallback：

[src]="myObj.img || ''"

由于 elvis-operator ? 在 .ts-files 中不可用，而只能在模板中使用，因此您也可以将其放入 typescript-getters。

【讨论】：

【解决方案3】：

在我的情况下，发生错误是因为使用了我的模板中不存在的属性（愚蠢的我）。我的代码是这样的：

<img [src]='imageUrl'/>

但模板的基础类有一个名为：

imageURL: string;

所以我将imageUrl 更改为imageURL 并且工作得像个魅力！

【讨论】：

【解决方案4】：

发生的情况是某些浏览器（即 Chrome）对 src 属性执行了一些 toString 函数，导致 null 变为 'null' 而不是 ''，从而触发浏览器查找//domain.com/null.

有些人可能还记得来自 AngularJS 的 ng-src，它是为了处理这个问题而创建的。

无论如何，在尝试了很多选项后，我找到了解决方案：

<img [attr.src]="myImageUrl"/>

它也适用于async（这对我来说主要是导致这个问题）：

<img [attr.src]="myImageUrl | async"/>

这是因为只要没有设置使用的变量/路径，src 属性根本没有设置，而不是将src 设置为'null' 或''已解决，因此不会触发错误。

【讨论】：

【解决方案5】：

或当它们在我们的对象中为空/无图像时，我们可以改为提供静态图像

HTML

<img src={{row.webimage?row.webimage:localpath}} />

打字稿

localpath = '../assets/img/default-user.png'

同样我们可以对 src 属性使用绑定。

【讨论】：

【解决方案6】：

使用ternary 运算符：

[ngStyle]="{'background-image': myVariable ? 'url(' + myVariable.image + ')' : 'none'}"

【讨论】：

【解决方案7】：

就我而言，我的图像源路径取决于几个异步条件。在解决这些条件之前，图像不会加载。因此浏览器将其处理为 null 并显示此错误。处理是模板中的一个简单条件，例如：

        <span *ngIf="imagePath">
            <img [src]="imagePath" />
        </span>
        <span *ngIf=" ! imagePath">
            Loading image ...
        </span>

【讨论】：