javascript - Angular 2 路由不适用于页面刷新或使用 gulp 重新加载？

Question

我从过去 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']);

Answer 1

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

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

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