• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

不能得到 – 404错误,当我修改我的HTML文件,浏览器被重新加载

gulp 来源:BeniaminoBaggins 6次浏览

我为我提供浏览器同步应用在gulpfile.js。不能得到 – 404错误,当我修改我的HTML文件,浏览器被重新加载

当我编辑HTML文件,当浏览器被重新加载,它说

不能得到/找到

或任何网址是我正在查看的页面。

如果我为我的应用程序与npm run lite它没有这个问题。为什么我会遇到这个问题?

gulpfile.js:

var gulp = require("gulp"); 
var sass = require("gulp-sass"); 
var sourceMaps = require("gulp-sourcemaps"); 
var del = require("del"); 
var typescript = require("gulp-typescript"); 
var tslint = require("gulp-tslint"); 
var browserSync = require("browser-sync"); 

gulp.task("serveApp", ["build"], function() { 
    browserSync.init({ 
     server: { 
     baseDir: "./", 
     }, 
    }); 
}); 

gulp.task("compileTypescript", ["clean"], function() { 
    return gulp.src("src/**/*.ts") 
     .pipe(sourceMaps.init()) 
     .pipe(typescript({ 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2015", "dom"], 
     "module": "system", 
     "moduleResolution": "node", 
     "noImplicitAny": true, 
     "outDir": "dist/", 
     "removeComments": false, 
     "sourceMap": true, 
     "target": "es5", 
     "typeRoots": [ 
      "./node_modules/@types", 
     ], 
     })) 
     .pipe(sourceMaps.write("./")) 
     .pipe(gulp.dest("dist/")); 
}); 

gulp.task("compileSass",() => { 
    gulp.src("src/**/*.scss") 
     .pipe(sourceMaps.init()) 
     .pipe(sass().on("error", sass.logError)) 
     .pipe(sourceMaps.write("./")) 
     .pipe(gulp.dest("./src")); 
}); 

gulp.task("watchSass", function() { 
    gulp.watch("src/**/*.scss", ["compileSass", "reloadAfterSassChanged"]); 
}); 

gulp.task("watchTypescript", function() { 
    gulp.watch("src/**/*.ts", ["compileTypescript", "reloadAfterTypescriptChanged"]); 
}); 

gulp.task("watchHtml", function() { 
    gulp.watch("src/**/*.html", ["reloadAfterHtmlChanged"]); 
}); 

gulp.task("reloadAfterSassChanged", ["compileSass"], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

gulp.task("reloadAfterHtmlChanged", function() { 
    browserSync.reload(); 
}); 

gulp.task("reloadAfterTypescriptChanged", ["compileTypescript"], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

gulp.task("clean",() => { 
    return del("dist"); 
}); 

gulp.task("build", ["watchTypescript", "watchSass", "watchHtml"]); 

gulp.task("default", ["serveApp"]); 

注意到我所服务的运行gulp它运行默认任务应用程序。

===========解决方案如下:

This answer worked,但它是在旧版本的角2使用的,所以我不得不使用它像这样(加的app.module.ts提供商场):

app.module.ts

import { HashLocationStrategy, Location, LocationStrategy } from "@angular/common"; 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
    ], 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(routerConfig), 
     LandingPageModule... 
    ], 
    providers: [ 
     FormBuilder, 
     Location, { provide: LocationStrategy, useClass: HashLocationStrategy }, 
    ], 
}) 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)