relative href path goes wrong in angularjs with html5mode

Question

I'm using AngularJS to handle my urls with html5mode turned on. I'm also using the gulp-angular generator to build the project.

Situation:

index.js

   $locationProvider
        .html5Mode(true);

index.html

<!-- build:css({.tmp,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<!-- endinject -->
<!-- endbuild -->
<base href="/" />

Problem

When url is example.com/somepage, index.css is gotten from example.com/app/index.css but when url is example.com/somepage/somedeeperpage, and I refresh the page, index.css is gotten from example.com/somepage/app/index.css

I want to be able to use the relative paths as by default in the angular-gulp generator.

Do I have to change to base tag, or index.css rel path in the gulpfile?

Strangely, the relative path is working fine for finding index.js

Kind regards

Nanocom · Accepted Answer · 2015-04-03 16:06:06Z

5

Edit: just figured out that if I put the tag before the injection of styles it works... My index.html looks like this now:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- endinject -->
    <!-- endbuild -->
</head>

Previous answer :

Had the same issue, made this work by adding in my index.html file and by changing the gulp-inject config in gulp/inject.js :

Before :

var injectOptions = {
  ignorePath: [options.src, options.tmp + '/serve'],
  addRootSlash: false
};

After :

var injectOptions = {
  ignorePath: [options.src, options.tmp + '/serve']
};

edited Apr 3, 2015 at 16:06

answered Apr 2, 2015 at 12:59

Nanocom

3,7265 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jahanzaib Aslam Over a year ago

just got this issue and first post solve my issue. Thanks man.

Kraken Over a year ago

I never would have tried moving the base tag up in the head! Thanks for posting the solution

Collectives™ on Stack Overflow

relative href path goes wrong in angularjs with html5mode

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related