Angular failed to load resource the server responded with a status of 404 not found

Issue

Angular failed to load resource the server responded with a status of 404 not found

This is the error im having from Google Devt Tools. Anyone knows the problem? I tried to change in many times including the file structure and the stateProvider (no controllers for that) in app.js file but it does not seem to be the issue. (script is included in app.js with correct file name and directory)

In addition, my logout and submitPost buttons arent working as well.

newpost.html

<div class="modal slide-in-up" ng-controller="NavCtrl"> <!-- Modal header bar --> <header class="bar bar-header bar-secondary"> <button class="button button-clear button-primary" ng-click="close()">Cancel</button> <h2 class="title">New Shout</h2> <button class="button button-positive" ng-click="submitPost()">Done</button> </header> <!-- Modal content area --> <ion-content class="padding has-header"> <form class ng-submit="submitPost()" ng-show="signedIn()"> <div class="form-group"> <input type="text" class="form-control" placeholder="Title" ng-model="post.title"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Link" ng-model="post.url"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </ion-content> </div>

controller.js file

app.controller('NavCtrl', function ($scope, $firebase, $location, Post, Auth, $ionicModal) { $scope.post = {url: 'http://', title: ''}; // Create and load the Modal $ionicModal.fromTemplateUrl('newpost.html', function(modal) { $scope.taskModal = modal; }, { scope: $scope, animation: 'slide-in-up' }); // Open our new task modal $scope.submitPost = function () { Post.create($scope.post).then(function (postId) { $scope.post = {url: 'http://', title: ''}; $location.path('/posts/' + postId); $scope.taskModal.show(); }); }; $scope.close = function() { $scope.taskModal.hide(); }; $scope.logout = function () { Auth.logout(); }; });

List of items page, post.html

<ion-header-bar class="bar-positive" ng-controller="NavCtrl"> <button class="button button-clear" ng-click="submitPost()">New</button> <h2 class="title"><b><a class="navbar-brand" href="#/posts">MyApp</a></b></h2> <button class="button button-clear" ng-click="logout()">Logout</button> </ion-header-bar>

Solution

404 literally means that file was not found. It’s simple as that. Check if the URL is right, and there are no rediretions being done(use fiddler). Perhaps the protocol should be https:// istead of http://? Perhaps you need “www” in url?

Click the url given in Chrome and see if the file exists.

Answered By – Erti-Chris Eelmaa

Answer Checked By – Marilyn (AngularFixing Volunteer)

Server Asp Core, Frontend Angular

Angular failed to load resource the server responded with a status of 404 not found

:4344/api/articles:1   Failed to load resource: the server responded with a status of 404 ()

sockjs.js:2999           WebSocket connection to 'wss://localhost:44344/sockjs-node/082/ckapizeh/websocket' failed: WebSocket is closed before the connection is established.

Cause:

the controller path was not called correctly

Call as an example: Controller ->Route here api/articles then the Action Method = endpoints 

Here List

Angular failed to load resource the server responded with a status of 404 not found

Aufruf unter Angular Daten Service

Aufruf aus Angular Service mit:

Falsche API URL  https://localhost:44344/api/articles  vollständig mit /list

exportclass ArticleDataService {

  private url_Api_Base: string = "https://localhost:44344/api/articles";

  resultsLength = 0;

  isLoadingResults = true;

  isRateLimitReached = false;

  constructor(private http: HttpClient) { }

  //----< get_Data_List >----

  //*read web-API : entire List top20

  get_Data_List(): Observable<ArticleModel[]> {

    returnthis.http

      .get<ArticleModel[]>(this.url_Api_Base)

      .pipe(

        map((response: ArticleModel[]) => {

          return response;

        }

        )

      )

  }

  //----</ get_Data_List >----