web-dev-qa-db-fra.com

GET http: // localhost: 4200/null 404 (non trouvé) dans angular2 avec angular-cli

Je travaille avec le projet angular2 avec angular-cli . Aujourd'hui, j'ai mis à jour la version ci-dessous vers la version 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"

Quand j'ai utilisé la version 2.0.0, cela ne faisait pas d'erreur, mais maintenant, ça ressemble à GET http://localhost:4200/null 404 (Not Found).

Même si cela fait une erreur, cela fonctionne bien ... Cependant, je veux savoir pourquoi cela se produit et corriger cette erreur ... Si quelqu'un sait à ce sujet, faites-le-moi savoir ... Merci :)

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"
    ]
  }
}

angularangular-cli
24
Mingyu Jeon

Donc, je venais de passer un temps épuisant à comprendre cela, mais je l’ai fait.

Cela m’est arrivé juste après une mise à jour, mais cela n’a rien à voir avec cela.

Cela provient certainement d'une référence à une variable avec une valeur null et il s'agit probablement d'un attribut d'image src. Au moins c'était pour moi et j'utilise les valeurs d'un serveur partout dans mon application et img src étaient les seules causes de ceci et cela a du sens.

J'ai eu quelque chose de semblable à ceci:

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

Je pensais que l'opérateur sûr ? s'assurerait de ne pas avoir d'erreurs nulles, ce qui est généralement le cas, mais il semble que lorsque vous vous liez à un attribut src, le navigateur génère une erreur, pas le compilateur. Le compilateur vous permet de lier la valeur null à celui-ci en raison de l'opérateur sûr, mais comme src est une URL de référence, le navigateur est toujours à la recherche de cette URL et la console renvoie l'erreur car il ne trouve pas l'URL relative/app/path/null.

Les deux manières que j'ai trouvées pour résoudre ceci:

  1. Utilisez ngIf: <img *ngIf="myData" [src]="myData.imageUrl"/> (l'image entière et son attribut src ne sont même jamais chargés s'ils n'y ont pas de données, évitant ainsi totalement le problème)
  2. Utilisez l'interpolation: <img src="{{ myData?.imageUrl }}"/> (AVIS dans cette solution, vous avez toujours besoin de l'opérateur de sécurité, car le compilateur renvoie une erreur sinon, comme prévu, mais si la valeur est null, alors src="" au lieu de null, qui est HTML valide et ne renvoie pas de référence. Erreur)

J'espère que cela t'aides!

59
HauntedSmores

Ce qui se passe, c’est que certains navigateurs (tels que Chrome) exécutent une fonction toString sur l’attribut src, ce qui fait que null devient 'null' au lieu de '', ce qui entraîne le navigateur à rechercher //domain.com/null.

Certains se souviendront peut-être de ng-src de AngularJS, qui a été créé pour gérer cela.

Quoi qu’il en soit, après avoir essayé beaucoup d’options, j’ai trouvé les solutions suivantes:

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

Cela fonctionne aussi pour async (ce qui me causait principalement ce problème):

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

Cela fonctionne car au lieu de définir src sur 'null' ou '', l'attribut src n'est pas défini du tout tant que la variable/chemin utilisé n'est pas défini/résolu, il ne provoque pas l'erreur.

5
Jeffrey Roosendaal

Un ajout à la réponse HauntedSmores: vous pouvez également utiliser un ''- fallback:

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

puisque elvis-operator ? n'est pas disponible dans les fichiers .ts, mais uniquement dans les modèles, vous pouvez également le placer dans TypeScript-getters.

5
Phil

Dans mon cas, l'erreur était due à l'utilisation d'une propriété inexistante de mon modèle (dumb me). Mon code était comme ça:

<img [src]='imageUrl'/>

Mais la classe sous-jacente pour le modèle avait une propriété nommée:

imageURL: string;

Alors j'ai changé imageUrl pour imageURL et ai travaillé comme un charme!

0
Gabriel Piffaretti

OU Lorsque leur objet est null/aucune image dans notre objet, nous pouvons donner à la place l'image statique 

HTML

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

Typescrpit 

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

De même, nous pouvons utiliser la liaison pour l'attribut src.

0
Omkar Jadhav