I have been working on an angular project which worked fine. But now the images are not displayed on the browser when I run ng serve.It says 404 error. Except for the images the rest seems to work fine. I did not change any code. The angular icon on the tab of the browser(favicon) is not visible too.

Updating node-modules and reinstalling angular didn't work either.The image file and the path is correct though I get the 404 error.

 http://localhost:4200/assets/img/single_user.png 404 (Not Found)

    Image (async)       

push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute    @   platform-browser.js:1087
push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute @   core.js:11462
createElement   @   core.js:8134
createViewNodes @   core.js:10360
createEmbeddedView  @   core.js:10307
callWithDebugContext    @   core.js:11344
debugCreateEmbeddedView @   core.js:10845
push../node_modules/@angular/core/fesm5/core.js.TemplateRef_.createEmbeddedView @   core.js:8894
push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView    @   core.js:8760
push../node_modules/@angular/common/fesm5/common.js.NgIf._updateView    @   common.js:3375
set @   common.js:3343
updateProp  @   core.js:9449
checkAndUpdateDirectiveInline   @   core.js:9200
checkAndUpdateNodeInline    @   core.js:10507
checkAndUpdateNode  @   core.js:10469
debugCheckAndUpdateNode @   core.js:11102
debugCheckDirectivesFn  @   core.js:11062
(anonymous) @   LoginComponent.html:1
debugUpdateDirectives   @   core.js:11054
checkAndUpdateView  @   core.js:10451
callViewAction  @   core.js:10692
execComponentViewsAction    @   core.js:10634
checkAndUpdateView  @   core.js:10457
callViewAction  @   core.js:10692
execEmbeddedViewsAction @   core.js:10655
checkAndUpdateView  @   core.js:10452
callViewAction  @   core.js:10692
execComponentViewsAction    @   core.js:10634
checkAndUpdateView  @   core.js:10457
callWithDebugContext    @   core.js:11344
debugCheckAndUpdateView @   core.js:11022
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges  @   core.js:8838
(anonymous) @   core.js:4571
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @   core.js:4571
(anonymous) @   core.js:4462
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:391
onInvoke    @   core.js:3820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run   @   zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run  @   core.js:3734
next    @   core.js:4462
schedulerFn @   core.js:3551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub   @   Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next   @   Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next  @   Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next   @   Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @   Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit   @   core.js:3535
checkStable @   core.js:3789
onHasTask   @   core.js:3833
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask   @   zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount  @   zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount  @   zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:212
drainMicroTaskQueue @   zone.js:601
Promise.then (async)        
scheduleMicroTask   @   zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask  @   zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @   zone.js:258
scheduleResolveOrReject @   zone.js:879
ZoneAwarePromise.then   @   zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @   core.js:4345
./src/main.ts   @   main.ts:11
__webpack_require__ @   bootstrap:78
0   @   user.ts:6
__webpack_require__ @   bootstrap:78
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1

1 Answers

0
varundhariyal On Best Solutions

Rename your project name to name set at the time of application creation. Else certain changes need to be done in angular.json and package.json