Получить 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
два способа я нашел, чтобы решить эту проблему:
- использовать ngIf:
<img *ngIf="myData" [src]="myData.imageUrl"/>
(все изображение и его атрибут src никогда не загружаются, если нет данных, полностью избегая проблемы) - использовать интерполяцию:
<img src="{{ myData?.imageUrl }}"/>
(обратите внимание, что в этом решении вам все еще нужен безопасный оператор, потому что компилятор выдаст ошибку в противном случае, как и ожидалось, но теперь, если значение равно null, тоsrc=""
вместо null, который является допустимым HTML и не будет бросать ссылочную ошибку)
надеюсь, что это помогает!
дополнение к HauntedSmores ответ: вы также можете использовать ''
-запасной вариант:
[src]="myObj.img || ''"
со времен Элвиса-оператора ?
недоступно .ts-файлы, но только в шаблонах, вы также можете поместить это в TypeScript-getters.
в моем случае ошибка произошла из-за использования несуществующего свойства из моего шаблона (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.