2016-12-29 15 views
13

Pracuję z projektem kątowym2 z kątem-cli. Dzisiaj zaktualizowałem wersję poniżej do wersji 2.4.1.GET http: // localhost: 4200/null 404 (Nie znaleziono) w angular2 z kątowym-cli

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

Kiedy użyłem 2.0.0, nie popełniła błędu, ale teraz, to popełni błąd jak GET http://localhost:4200/null 404 (Not Found).

Mimo że powoduje błąd, działa dobrze. Chciałbym jednak wiedzieć, dlaczego tak się dzieje i naprawić ten błąd. Jeśli ktoś wie o tym, proszę dać mi znać. Dziękuję :)

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

kątowe-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" 
 
    ] 
 
    } 
 
}

+0

Ze swojego wpisu wynika, że ​​w przeglądarce wpisujesz 'http: // localhost: 4200/null'. Czy to prawda? –

+0

@ K.Daniek, Nie, nic nie wpisuję. Właśnie zbudowałem przy użyciu ng build. –

+0

Przejdź do pliku 'index.html' i upewnij się, że masz w tagu' head' ''. –

Odpowiedz

26

Więc miałem tylko wyczerpujący czasu na zastanawianie się to, ale ja.

Zdarzyło mi się to zaraz po aktualizacji, ale nie miało to z tym nic wspólnego.

Jest to z pewnością odniesienie do zmiennej o wartości null i najprawdopodobniej atrybutu src obrazu. Przynajmniej dla mnie i dla mnie używanie wartości z serwera w całym miejscu w mojej aplikacji i img src były jedynymi powodami tego i ma to sens.

miałem coś podobnego do tego:

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

myślałem, że bezpieczny operator ? by upewnić się, że nie zrobił dostać zerowych błędów, które zazwyczaj robi, ale wydaje się, gdy wiążą się z src atrybut, przeglądarka zgłasza błąd, a nie kompilator.Kompilator pozwala na powiązanie z nim wartości null ze względu na bezpieczny operator, ale ponieważ src jest referencyjnym adresem URL, przeglądarka wciąż szuka tego adresu URL, a konsola zgłasza błąd, ponieważ nie może znaleźć adresu URL, ponieważ nie może znaleźć adresu URL: http://europa.eu.int/comm/default.aspx?ln=pl&hl=pl Znalazłem rozwiązanie tego:

  1. Używaj ngIf: <img *ngIf="myData" [src]="myData.imageUrl"/> (cały obraz, a jego atrybut src nigdy nawet ładowane jeśli tam nie ma danych, unikając problemu całkowicie)
  2. Zastosowanie interpolacji: <img src="{{ myData?.imageUrl }}"/> (Zawiadomienie w tym roztworze ty nadal potrzebuje bezpiecznego operatora, ponieważ kompilator zgłosi błąd inaczej, jak expe cted, ale teraz, jeśli wartość jest zerowa, to src="" zamiast wartości zerowej, która jest poprawnym HTML i nie będzie powodowała błędu odniesienia)

Mam nadzieję, że to pomoże!

+0

To nie wydaje się być zamierzonym zachowaniem. @HauntedSmores, czy używasz AngularFire2 przez przypadek? –

+0

Nie, nie używając AngularFire2 – HauntedSmores

+3

pomógł mi! dzięki :-) – jaruesink

2

Dodatek do HauntedSmores odpowiedzieć: można też użyć '' -fallback:

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

ponieważ Elvis-operator ? nie jest dostępny w .TS-plików, ale tylko w szablonach, można również umieścić to do ściągaczy maszynopisów.

0

W moim przypadku błąd wystąpił z powodu użycia nieistniejącej właściwości z mojego szablonu (głupi mnie). Mój kod to tak:

<img [src]='imageUrl'/> 

Ale podstawowa klasa dla szablonu był mający właściwość o nazwie:

imageURL: string; 

więc zmieniłem imageUrl dla imageURL i pracował jak urok!

Powiązane problemy