Получить http://localhost:4200/null 404 (не найдено) в angular2 с angular-cli

Я работаю с проектом angular2 с angular-cli. Сегодня я обновил версию ниже в 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).

несмотря на то, что он делает ошибку, он работает хорошо. Однако, я хочу знать, почему это происходит, и исправить эту ошибку. Если кто-то знает об этом, пожалуйста, дайте мне знать. Спасибо :)

пакеты.в 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"
  }
}

угловой-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"
    ]
  }
}

5 ответов


так что у меня просто было изнурительное время, чтобы понять это, но я это сделал.

это произошло со мной сразу после обновления, но это не имело ничего общего с этим.

это определенно из ссылки на переменную с null значение, и это, скорее всего, атрибут src изображения. По крайней мере, это было для меня, и я использую значения с сервера повсюду в своем приложении и img src были единственными вещами, вызывающими это, и это делает чувство.

у меня было что-то похожее на это:

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

Я думал, что ? безопасный оператор убедился бы, что я не получил нулевых ошибок, что он обычно делает, но похоже, что при привязке к браузер выдает ошибку, а не компилятор. Компилятор позволяет привязать к нему null из-за оператора safe, но потому что src является ссылочным URL-адресом, браузер все еще ищет этот URL-адрес, и консоль выдает ошибку потому что он не может найти URL relative/app/path/null

два способа я нашел, чтобы решить эту проблему:

  1. использовать ngIf: <img *ngIf="myData" [src]="myData.imageUrl"/> (все изображение и его атрибут src никогда не загружаются, если нет данных, полностью избегая проблемы)
  2. использовать интерполяцию: <img src="{{ myData?.imageUrl }}"/> (обратите внимание, что в этом решении вам все еще нужен безопасный оператор, потому что компилятор выдаст ошибку в противном случае, как и ожидалось, но теперь, если значение равно null, то src="" вместо null, который является допустимым HTML и не будет бросать ссылочную ошибку)

надеюсь, что это помогает!


дополнение к HauntedSmores ответ: вы также можете использовать ''-запасной вариант:

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

со времен Элвиса-оператора ? недоступно .ts-файлы, но только в шаблонах, вы также можете поместить это в TypeScript-getters.


что происходит, так это то, что некоторые браузеры (например, Chrome) выполняют некоторые


в моем случае ошибка произошла из-за использования несуществующего свойства из моего шаблона (dumb me). Мой код был таким:

<img [src]='imageUrl'/>

но базовый класс для шаблона имел свойство с именем:

imageURL: string;

поэтому я изменил imageUrl на imageURL и работал как шарм!


или Когда их нет / нет изображения в нашем объекте, мы можем дать статическое изображение вместо

HTML-код

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

Typescrpit

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

аналогично мы можем использовать привязку для атрибута src.