Angular JS 1 routing 404 issue

Question

I have a basic single page application in Angular Js. I have applied routing and set 'Html5Mode' to true.

My URL's have been cleaned up, but they now result in a 404 when trying to access the URL.

Now this is a front end web application so I do not have any config on IIS I can set up rewrite rules with.

Can anyone point me in the right direction to set up the URL's to prevent 404 error.

Below is my routing:

(function () {
"use strict";

angular.
    module("app", [
        "ngRoute",
        "app.home",
        "app.products",
        "app.contact"
    ])

.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/",
        {
            controller: "HomeController",
            templateUrl: "app/components/home/home.html"
        })
        .when("/products",
        {
            controller: "ProductsController",
            templateUrl: "app/components/products/products.html"
        })
        .when("/contact",
        {
            controller: "ContactController",
            templateUrl: "app/components/contact/contact.html"
        })
        .otherwise("",
        {
            controller: "HomeController",
            templateUrl: "app/components/home/home.html"         
        });


        $locationProvider.html5Mode(true);

    });

})();

Index.html:

 <!DOCTYPE html>
 <html ng-app="app" lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Newtown Gates & Welding</title>

<link href="assets/css/site.css" rel="stylesheet" />
<link href="app/components/home/home.css" rel="stylesheet" />
<link href="app/components/contact/css.css" rel="stylesheet" />
<link href="app/components/products/products.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />

<script src="assets/libs/angularjs/1.6.1/angular.js"></script>
<script src="assets/libs/angularjs/1.6.1/angular-route.js"></script>

<script src="app/app.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/products/productsController.js"></script>
<script src="app/components/contact/contactController.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>


<base href="/"/> <!--Required when using location provider-->

<div>
    Navbar here

    <li>
        <a href="/">home</a>
        <a href="/contact">contact</a>
        <a href="/products">products</a>
    </li>

</div>

<div class="container-fluid">

    <div class="row" style="border: 1px solid black;">
        HELLO
    </div>

    <div ng-view></div>

  </div>
 </body>
 </html>

from the home page you can access /products. Either try to access this or refresh the page. @Sajeetharan — ClarkySmiverz77, Jan 15 '17 at 13:41
i did the same, it gets routed to products and i see the content as I don't see no dahm products! — Sajeetharan, Jan 15 '17 at 13:42
further digging as led me to this http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode/16570533#16570533 but i don't plan on having an server side for this. My project is simply front-end Angularjs which makes http requests to a Web API. — ClarkySmiverz77, Jan 15 '17 at 13:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133196/discussion-between-sajeetharan-and-clarkysmiverz77). — Sajeetharan, Jan 15 '17 at 13:46

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

Please add <base href="/" /> to your <head>

Please look here:

link

EDIT

you need to set the current folder in my case is

edited May 23 '17 at 11:53

Community

1
1

answered Jan 15 '17 at 13:29

Omri Lugasi

337
3
16

Hi, I have does this. I will edit my answer to show this. – ClarkySmiverz77 Jan 15 '17 at 13:32
Hi, edit my answer to your edit, please tell me if its work for you @ClarkySmiverz77 – Omri Lugasi Jan 15 '17 at 13:48
index.html is at the root of my project, so '/' is correct. – ClarkySmiverz77 Jan 15 '17 at 13:56
Ok, so index.html is at the route of the project. the rest of the pages are as follows "app/components/x/x.html" – ClarkySmiverz77 Jan 15 '17 at 14:01

Angular JS 1 routing 404 issue

1 Answers1