прямое попадание URL в localhost показывает ошибку 404 angularjs gulp browser-sync - PullRequest
Новая
       48

прямое попадание URL в localhost показывает ошибку 404 angularjs gulp browser-sync

0 голосов
/ 06 ноября 2018

Вот скриншот из двух ошибок, которые я получаю в локальной среде, когда я нажимаю на прямой URL в браузере - то же самое не происходит в размещенной версии. Для хостинга я использовал AWS S3 и на 404 и 403 ошибки я перенаправляю в файл index.html со статусом 200.

http://prntscr.com/ley8j5

Я пытался 1. ng-csp = "no-inline-style; no-unsafe-eval" в соответствии с рекомендациями angularjs для CSP 2. Извлек много ресурсов для исправления кода gs gulp и browser-sync в gulpfile.js. 3. Я также попытался использовать $ route.reload (), как предложено в угловых выпусках github 1213

Вот мой код для index.html и gulpfile.js 

<!-- <!DOCTYPE html> -->
<html lang="en" ng-app="wealth-desk" ng-csp="no-inline-style;no-unsafe-eval" flow-init>
    <base href="/">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link href="assets/img/favicon.ico" rel="shortcut icon" type="image/x-icon">

        <!-- css file loading -->

    </head>

    <body>
        <ng-view autoscroll="true"></ng-view>
    </body>

    <!-- Latest compiled and minified JavaScript -->
    <script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/js/slick.min.js"></script>

    <!-- Angular Dependencies -->
    <script type="text/javascript" src="assets/js/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-route.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-resource.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-animate.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-aria.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-messages.min.js"></script>
    <script type="text/javascript" src="assets/js/angular.slick.js"></script>

                <!-- more js files of my application - related to angular loading -->
</html>

Gulpfile.js 

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var browserSync = require('browser-sync').create();
var environments = require('gulp-environments');

var development = environments.development;
var production = environments.production;
/** load config file based on enviroment */
var configFile = production() ? "./src/env/prod.js" : "./src/env/dev.js";

gulp.task('lint', function () {
    return gulp.src('./src/app/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('build', ['lint']);

gulp.task('browser-sync', ['build'], function () {
    browserSync.init({
        server: {
            baseDir: "./src",
            // The key is the url to match
            // The value is which folder to serve (relative to your current working directory)
            routes: {
                "/bower_components": "bower_components",
                "/node_modules": "node_modules"
            }
        },
        browser: "chrome"
    });
});


gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./src/**/*.*", ["build"]);
    gulp.watch("./src/**/*.*", browserSync.reload);
})
...