Angular 2 路由在页面刷新或使用 gulp 重新加载时不起作用？答案

【问题标题】：Angular 2 routing not working on page refresh or reload with gulp?Angular 2 路由在页面刷新或使用 gulp 重新加载时不起作用？
【发布时间】：2016-12-22 16:12:48
【问题描述】：

我从过去 1 周开始学习 Angular 2，但在使用路由时发现了一个问题。在开发阶段，我通过 npm start 运行我的应用程序。但是我使用 gulp.js 进行了迁移，当我通过键入 gulp 开始运行时，输出完美，但是当我手动重新加载/引用/更改路由时，路由不工作显示无法在地址栏中获取消息。

谢谢。

这是我的 gulp 文件

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']);

【问题讨论】：

您使用的是哪个版本的 ng2？
我正在使用“angular2”：“2.0.0-beta.2”，
我建议现在将其升级到 RC5，因为自 beta.2 以来发生了很多变化。我已经将我的升级到 RC4，很快就会在 RC5 中升级
也阅读stackoverflow.com/questions/34703343/…

标签： javascript angular routing gulp

【解决方案1】：

它实际上不是一个错误。它与 HTML5 URL 有关，实际上它很烦人。

这里是使用哈希 URL 的替代解决方案。

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

【讨论】：

非常感谢 kamran pervaiz 先生。我从过去 2 天开始尝试这个。它真的帮助了我。

【解决方案2】：

在 app.routing.module.ts:

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

【讨论】：