2017-09-24 1 views
14

を働いていないサーブ:HTML5モードはlivereloadブロックは次のようになり、面倒なファイルで

livereload: { 
    options: { 
    open: true, 
    middleware: function(connect, options, middleware) { 
     var optBase = (typeof options.base === 'string') ? [options.base] : options.base; 
     return [ 
     [require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
      optBase.map(function(path) { 
      return connect.static(path); 
      })), 
     connect.static('.tmp'), 
     connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
     connect().use(
      '/app/styles', 
      connect.static('./app/styles') 
     ), 
     connect.static(appConfig.app) 
     ]; 
    } 
    } 
}, 

追加:

[require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
        optBase.map(function(path){ return connect.static(path); })), 

をそれ以外の場合は、HTML5モードを有効にするために私のために働くために使用しました、私のルートは#なしではロードされません!私はブラウザを使ってリロードしようとします。

私はconfigにhref = '/'とhtml5Mode(true)を追加しました。私が試すことができる何か他にありますか?なぜそれは本当に働くのをやめますか?

注:私のURLにドットが入っていて、connect-mod書き換えルールでうまく処理されていないことがわかります。どのようにそれを変更し、URLのドットを処理するために有効にする任意のアイデア?

+0

あなたのアプリの設定はhtml5モードを使用するように設定されていますか? – alphapilgrim

+0

はい................... –

答えて

2

これをconfigブロックのルートアプリケーションモジュールに追加してみてください。 $ locationProviderをインクルード/インジェクトしてください。

$locationProvider 
    .html5Mode({ 
    enabled: true, 
    requireBase: false 
    }) 
    .hashPrefix('!'); 
+0

私のURLにドットが入っていて、connect-mod書き換えルールでうまく処理されていないことがわかります。どのようにそれを変更し、URLのドットを処理するために有効にする任意のアイデア? –

+0

@SimranKaurあなたは何をBEとして使用していますか?あなたもそれを設定しましたか? – alphapilgrim

+0

BEは何​​ですか?............... –

1

私はドットの問題は、一般的な問題の副作用であると考えています。同じ設定、多かれ少なかれ。私は単純に、このような.config()html5Modeをリセットします。

if (window.location.host == 'localhost:9000') { 
    $locationProvider.html5Mode(false); 
    $locationProvider.hashPrefix(''); 
} else { 
    $locationProvider.html5Mode(true); 
} 

アプリはまだ、URLを作る結ぶ、開発モードで​​ですべてのURLをプレフィックスと痛みをlivereloadます。定期的に変更する小さなディレクティブによりこれを解決し/urls/#/urlsへ:

今、私は本番サーバ

RewriteEngine on 

# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 

# Rewrite everything else to index.html to allow html5 state links 
RewriteRule^index.html [L] 

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5modeから.htaccessリダイレクトを使用して最後に<a href="/url" debug-link>link</a>

によって行うことができるリンキング

var isLocalHost = (location.hostname === "localhost" || location.hostname === "127.0.0.1"); 
angular.module('myApp').directive('debugLink', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $timeout(function() {   
     var href = element.attr('href'); 
     if (href && isLocalHost && href.charAt(0) == '/') { 
      element.attr('href', '#'+href); 
     } 
     }, 100); 
    } 
    } 
}); 

私はこのアプローチをいくつかのanglejs + gruntプロジェクトで使用しています。ライブの負荷が壊れるのを防ぎます。つまり、を入力したとき - Sページが更新され、どこでも正しいURLを使用できます。私は誰もプロダクションモードでプレフィックスやハッシュを持つことに興味がないと思います。

関連する問題