Angular 2的路由不能用gulp刷新或重载页面

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

本文关键字：刷新 重载 gulp 路由 不能 Angular      更新时间：2023-09-26

我从过去的一个星期开始学习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']);

这实际上不是一个bug。它与HTML5 url有关，实际上很烦人。

是使用哈希url的另一种解决方案。

Angular2-刷新页面时，url保持不变，但适当的视图没有加载

At app.routing.module.ts:

@NgModule({
imports: [RouterModule.forRoot(routes, {useHash:true})],
exports: [RouterModule],
})
相关文章：