CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
BordiArt
BordiArt

Reputation: 756

ui-router (0.2.18) with dot parameter

I'm developing angular app (1.5.2) and in one case have URL for state function as follows

http://localhost:3000/payment/1.1/2/3

But I'm getting an error:

Cannot GET /payment/1.1/2/3

Version of ui-router - 0.2.18. I read that they fixed that issue but for me it doesn't work. Same answers on SO doesn't help me too.

State config for this:

.state('payment', {
          url: '/payment/:token/:id/:chanel_id',
          templateUrl: 'app/payment/payment.html',
          controller: 'PaymentController',
          controllerAs: 'vm'
      });

My server.js file:

    'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');
var historyApiFallback = require('connect-history-api-fallback');

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }


  var server = {
    baseDir: baseDir,
    routes: routes,
    middleware: [ historyApiFallback() ]
  };

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

Upvotes: 2

Views: 258

Answers (1)

Mickaël VILLERS
Mickaël VILLERS

Reputation: 147

What is your webserver.

You must redirect all request on your index.html if the request is not a file.

I think you must add this in your router $locationProvider.html5Mode(true);

Solution for BrowserSync and Gulp.

First install connect-history-api-fallback:

npm install connect-history-api-fallback --save-dev

Then edit your gulp/server.js and add the middleware:

var historyApiFallback = require('connect-history-api-fallback');
var server = {
    baseDir: baseDir,
    routes: routes,
    middleware: [ historyApiFallback() ]
};

Upvotes: 2

Related Questions