Angular 2 routing not working on page refresh or reload with gulp?

Question

i am started learning angular 2 from the past 1 week and i found an issue while working with routing. at the development phase i run my application through npm start. but i migrated with gulp.js and when i started running by typing gulp output is coming perfectly but when i reloads/refersh/change the route manually routing not working showing cannot Get message in the address bar.

Thanks.

this is my gulp file

var gulp = require('gulp'),
    webserver = require('gulp-webserver'),
    typescript = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps'),
    tscConfig = require('./tsconfig.json');

var appSrc = 'builds/development/',
    tsSrc = 'process/typescript/';

gulp.task('html', function() {
  gulp.src(appSrc + '**/*.html');
});

gulp.task('css', function() {
  gulp.src(appSrc + '**/*.css');
});

gulp.task('copylibs', function() {
  return gulp
    .src([
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/systemjs/dist/system-polyfills.js',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/rxjs/bundles/Rx.js',
      'node_modules/angular2/bundles/angular2.dev.js',
      'node_modules/bootstrap/dist/js/bootstrap.min.js',
      'node_modules/bootstrap/dist/css/bootstrap.min.css',
      'node_modules/angular2/bundles/router.dev.js'
    ])
    .pipe(gulp.dest(appSrc + 'js/lib/angular2'));
});

gulp.task('typescript', function () {
  return gulp
    .src(tsSrc + '**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(appSrc + 'js/'));
});

gulp.task('watch', function() {
  gulp.watch(tsSrc + '**/*.ts', ['typescript']);
  gulp.watch(appSrc + 'css/*.css', ['css']);
  gulp.watch(appSrc + '**/*.html', ['html']);
});

gulp.task('webserver', function() {
  gulp.src(appSrc)
    .pipe(webserver({
      port: '8001',
      livereload: true,
      open: true
    }));
});

gulp.task('default', ['copylibs', 'typescript', 'watch', 'webserver']);

i would recommend to upgrade it to RC5 now as there have been alot of changes since beta.2. I have upgraded mine to RC4 and will do in RC5 soon — Kamran Pervaiz, Aug 16 '16 at 11:07
also read http://stackoverflow.com/questions/34703343/pathlocationstrategy-vs-hashlocationstrategy-in-web-apps — Kamran Pervaiz, Aug 16 '16 at 11:07

score 3 · Accepted Answer · edited May 23 '17 at 12:17

3

its not a bug actually. it is to do with HTML5 URLs, its pretty annoying actually.

here is the alternative soltuion to use Hash Urls.

Angular2- When refresh the page, url remains same but appropriate view doesn't get loaded

edited May 23 '17 at 12:17

Community

1
1

answered Aug 16 '16 at 10:53

Kamran Pervaiz

1,861
4
22
42

thanks a lot Mr kamran pervaiz. i am trying this from the past 2days.it really helped me. – Sukumar MS Aug 16 '16 at 11:41

score 1 · Answer 2 · edited Oct 03 '17 at 20:15

1

At app.routing.module.ts:

@NgModule({
imports: [RouterModule.forRoot(routes, {useHash:true})],
exports: [RouterModule],
})

edited Oct 03 '17 at 20:15

The_Black_Smurf

5,178
14
52
78

answered Oct 03 '17 at 19:57

Fepa Santander

11
1

Angular 2 routing not working on page refresh or reload with gulp?

this is my gulp file

2 Answers2