Angular.js MAMP base href Issue

I recently started trying to use MAMP as my main development environment. I'm working on an Angular single page application, and I'm unable to properly test this site locally because of a base href issue. The site works perfectly fine on the production server, but does not work on the local testing server.

My initial code:

index.html

<head>

....
    <base href="/">
....

</head>

app.js

....

$locationProvider
    .html5mode(true);

....

On the production server, this works fine, but in local testing with MAMP, this causes a ton of errors and none of my external files are found (404).

If I comment out the base and change requireBase to false:

index.html

<head>

....
    <!--<base href="/">-->
....

</head>

app.js

$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

..the local server is now able to find all files, but the Angular routing is effectively now broken.

Is there a middle ground somewhere here to get this to work both locally in MAMP as well as on my production server?

Posted Jun 16, 2017, 7:49 PM UTC

72
Loading comments…