在angular2中使用angular-cli获取http：// localhost：4200 / null 404（Not Found）

时间：2016-12-29 02:24:34

标签： angular angular-cli

我使用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

＆＃13;
＆＃13; 
{
  ...
  
  "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"
  }
}
＆＃13;
＆＃13;
＆＃13;

角cli.json

＆＃13;
＆＃13; 
{
  "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
  }
}
＆＃13;
＆＃13;
＆＃13;

tsconfig.json

＆＃13;
＆＃13; 
{
  "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"
    ]
  }
}
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：73)

所以我只是花了很多精力来解决这个问题，但我做到了。

在进行更新之后，这发生在我身上，但它与此无关。

它绝对来自对具有 null 值的变量的引用，并且它很可能是图像src属性。至少对我而言，我在我的应用程序中使用来自服务器的值，而<ItemsControl ItemsSource="{Binding CheckBoxList}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="149.6*" /> <ColumnDefinition Width="149.6*" /> <ColumnDefinition Width="149.6*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="28*" /> <RowDefinition Height="28*" /> <RowDefinition Height="28*" /> </Grid.RowDefinitions> </Grid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Setter Property="Grid.Row" Value="{Binding GridRow}" /> <Setter Property="Grid.Column" Value="{Binding GridColumn}" /> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <CheckBox Margin="14,6,63,6" VerticalAlignment="Center" Content="{Binding Content}" IsChecked="{Binding IsChecked}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> src是导致这种情况的唯一因素，这是有道理的。

我有类似的东西：

img

我认为<img [src]="myData?.imageUrl">安全运算符会确保我没有得到null错误，它通常会这样做但是当你绑定到?属性时，浏览器会抛出错误，而不是编译器。由于安全操作符，编译器允许您将null绑定到它，但由于src是引用URL，浏览器仍在查找该URL，并且控制台因为无法找到该URL而引发错误src

我找到解决这个问题的两种方法：

  1. 使用ngIf：relative/app/path/null（如果没有数据，整个图像及其src属性永远不会被加载，完全避免问题）
  2. 使用插值：<img *ngIf="myData" [src]="myData.imageUrl"/>（注意在此解决方案中您仍然需要安全操作符，因为编译器将抛出错误，否则，如果预期，但现在如果值为null，则<img src="{{ myData?.imageUrl }}"/>而不是null，这是有效的HTML，不会引发引用错误）

    3. 希望这有帮助！

答案 1 :(得分：6)

发生的事情是某些浏览器（即Chrome）在toString属性上执行了一些src功能，导致null变为'null'而不是''，从而触发浏览器查找//domain.com/null。

有些人可能会记得AngularJS中的ng-src，它是为处理此问题而创建的。

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

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

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

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

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

答案 2 :(得分：5)

HauntedSmores的补充回答：您还可以使用'' - 后备：

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

因为elvis-operator ?在.ts文件中不可用，但只在模板中可用，你也可以把它放到typescript-getters中。

答案 3 :(得分：0)

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

<img [src]='imageUrl'/>

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

的属性 
imageURL: string;

所以我为imageUrl更改了imageURL，并且像魅力一样工作！

答案 4 :(得分：0)

OR 当它们为null /在我们的对象中没有图像时，我们可以改为提供静态图像

HTML

Jul 25 03:06:41 FW2 kernel: ***INVALID PACKAGES***IN=ens37 OUT=ens38 MAC=00:0c:29:b1:54:6c:00:0c:29:b8:58:eb:08:00 SRC=192.168.4.3 DST=192.168.1.3 LEN=148 TOS=0x10 PREC=0x00 TTL=63 ID=7321 DF PROTO=TCP SPT=47630 DPT=22 WINDOW=291 RES=0x00 ACK PSH FIN URGP=0

打字机 

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

类似地，我们可以对src属性使用绑定。

答案 5 :(得分：0)

使用ternary运算符：

[ngStyle]="{'background-image': myVariable? 'url(' + myVariable.image + ')' : 'none'}"
相关问题
最新问题