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

je travaille avec angular2 project avec angular-cli. Aujourd'hui, j'ai mis à jour la version de ci-dessous à 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é 2.0.0, il ne fait pas d'erreur, mais maintenant, il fait une erreur comme GET http://localhost:4200/null 404 (Not Found).

même si elle fait une erreur, elle fonctionne bien. Cependant, je veux savoir pourquoi cela arrive, et de corriger cette erreur. Si quelqu'un est au courant, dites-le-moi. Remercier :)

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

angulaires-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"
    ]
  }
}
18
demandé sur Mingyu Jeon 2016-12-29 05:24:34

5 réponses

alors j'ai eu un moment épuisant à comprendre cela, mais je l'ai fait.

cela m'est arrivé juste après avoir fait une mise à jour, mais ça n'avait rien à voir avec ça.

c'est certainement une référence à une variable avec un null valeur et c'est très probablement un attribut 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 choses causant cela et il fait sens.

j'ai eu quelque chose de similaire à ceci:

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

je pensais que le ? safe operator s'assurerait que je n'obtienne pas d'erreurs nulles, ce qui est généralement le cas, mais il semble que lorsque vous vous liez à un src l'attribut, le navigateur renvoie une erreur, pas le compilateur. Le compilateur vous permet de lier null à cause de l'opérateur sûr, mais parce que src est une URL de référence, le navigateur est toujours à la recherche de cette URL et la console lance l'erreur parce qu'il ne peut pas trouver L'URL relative/app/path/null

Les deux façons que j'ai trouvé pour résoudre ce problème:

  1. Utiliser ngIf: <img *ngIf="myData" [src]="myData.imageUrl"/> (image entière et son attribut src ne sont jamais chargés s'il n'y a pas de données, évitant le problème entièrement)
  2. Utiliser l'interpolation: <img src="{{ myData?.imageUrl }}"/> (notez que dans cette solution vous avez toujours besoin de l'opérateur safe car le compilateur va lancer une erreur autrement, comme prévu, mais maintenant si la valeur est nulle, alors src="" au lieu de null, qui est valide HTML et l'habitude de jeter une erreur de référence)

Espérons que cette aide!

41
répondu HauntedSmores 2018-09-25 08:44:25

un ajout à HauntedSmores réponse: vous pouvez également utiliser un ''-secours:

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

depuis l'opérateur elvis ? n'est pas disponible .ts-fichiers, mais seulement dans les modèles, vous pouvez également le mettre en machine-getters.

4
répondu Phil 2017-09-20 08:25:23

ce qui se passe, c'est que certains navigateurs (i.e. Chrome) exécutent certains toString fonction src l'attribut, ce qui provoque null devenir 'null' au lieu de '', ce qui déclenche le navigateur à chercher //domain.com/null.

Certains se souviennent peut ng-src à partir de AngularJS, qui a été créé pour gérer cela.

de toute façon, après avoir essayé beaucoup d'options, j'ai trouvé la solutions:

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

cela fonctionne pour async trop (ce qui a été principalement à l'origine de ce problème pour moi):

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

cela fonctionne car au lieu de définir src'null' ou '', l'attribut src n'est pas défini aussi longtemps que la variable/chemin utilisé n'est pas défini/résolu, ce qui ne déclenche pas l'erreur.

2
répondu Jeffrey Roosendaal 2018-04-09 10:06:31

dans mon cas, l'erreur se produisait à cause de l'utilisation d'une propriété inexistante de mon modèle (dumb me). Mon code est comme ceci:

<img [src]='imageUrl'/>

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

imageURL: string;

alors j'ai changé imageUrlimageURL et a fonctionné comme un charme!

0
répondu Gabriel Piffaretti 2017-11-03 10:06:29

OR Lorsque leur image est nulle / pas d'image dans notre objet alors nous pouvons donner l'image statique à la place

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
répondu Omkar Jadhav 2018-07-25 07:23:49