AngularJS html5Mode mit Grunt zu verbinden. grunt 0.4.5

Ich habe vor kurzem umgeschaltet, um grunt 0.4.5 und es verändert, wie die Verbindung funktioniert.

Ich zuvor verwendet connect-modrewrite und es funktionierte ziemlich gut (hatte einige Probleme mit urls generiert durch /:parameter).

Hier ist die alte version, arbeitete mit grunt 0.4.1 von generator-angular 0.8.0 mit der middleware Teil modded von mir zu verwenden html5mode.

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729,
        middleware: function (connect, options) {
            var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
            return [require('connect-modrewrite')(['!(\\..+)$ /[L]'])].concat(
                optBase.map(function(path){ return connect.static(path); })
            );
        }
    },
    livereload: {
        options: {
            open: true,
            base: [
                '.tmp',
                '<%= yeoman.app %>'
            ]
        }
    },

Hier ist die neue version von generator-Winkel-0.9.0-1

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729
    },
    livereload: {
        options: {
            open: true,
            middleware: function (connect) {
                return [
                    connect.static('.tmp'),
                    connect().use(
                        '/bower_components',
                        connect.static('./bower_components')
                    ),
                    connect.static(appConfig.app)
                ];
            }
        }
    },

Wie kann ich dies ändern, um die Verwendung von mod-rewrite oder eine andere Methode zu erreichen html5mode?

Habe ich versucht mit der Methode, die hier bereitgestellt: https://gist.github.com/nnarhinen/7719157
Ich kombinierte es die folgende erstellen:

middleware: function (connect) {
    return [
        connect.static(modRewrite(['^[^\\.]*$ /index.html [L]'])),
        connect.static('.tmp'),
        connect().use(
            '/bower_components',
            connect.static('./bower_components')
        ),
        connect.static(appConfig.app)
    ];
}

Dies ermöglicht es mir zu Ansicht die normale Ansicht, aber das modRewrite-Teil scheint nicht das zu tun, was es braucht, um in eine andere Ansicht über die url.

Seltsam, ich bin derzeit mit grunt 0.4.5 und der middleware fein gearbeitet. Ich habe versucht eine Reihe von verschiedenen Implementierungen und diese war die einzige, die arbeitete mit einer "base" option.

InformationsquelleAutor Mark Lenser | 2014-06-18

66

Wenn jemand stolpert über das hier ist der fix:

(die einzige Zeile Hinzugefügt wurde die modRewrite-Linie)
```
livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},
```
Stellen Sie sicher, dass die folgenden erklärte an der Oberseite von Ihrem Grunzen Datei:
```
var modRewrite = require('connect-modrewrite');
```
- auch stellen Sie sicher, connect-modrewrite installiert ist npm install connect-modrewrite --save-dev
- Danke!! es gibt eine Menge von Artikel zu erklären, diese für alte Versionen. Getestet habe ich rund 5 verschiedene Möglichkeiten schon ohne Erfolg. Getestet habe ich diese Lösung und funktioniert perfekt.
- was ist mit support für alternative base?
- Keine Ahnung, wie die Interaktion mit diesem an alle.
- Ich folgte diesem Ansatz, haben aber immer noch Probleme mit /:params. Die url zu laden main.css wird immer vorangestellt aktuelle url anstelle von base Weg. Es ist wie localhost:9000/mypage/styles/main.css (Fehler beim laden von 404) anstelle von localhost:9000/styles/main.css.
- Hey vielen Dank, funktioniert perfekt für meinen Fall. Andere Frage, @Kryx wissen Sie, correspoding-Konfiguration für Nginx, wenn ich erreichen möchte gleiche Verhalten in der Produktion-server?
InformationsquelleAutor Mark Lenser

Gegeben, wie die anderen Antworten sind ziemlich ausführlich und nicht beibehalten standardmäßig grunt-contrib-connect middlewares, ich kam mit einer Lösung, die verwendet dedizierte middleware – connect-Geschichte-api-fallback:

npm install connect-history-api-fallback --save-dev

var history = require('connect-history-api-fallback')
//...
connect: {
    options: {
        middleware: function(connect, options, middleware) {
            middleware.unshift(history())
            return middleware
        },
        //...
    },
    //...
}

InformationsquelleAutor Klaster_1

Obwohl oben akzeptierte Antwort richtig ist. Im hinzufügen der config die ich benutze, funktioniert es perfekt auf CentOs.

Unter 1-3 Schritte sind für die Herstellung von Angularjs clean-URL Arbeit, die in Ihrer lokalen Maschine mit $ grunt serve

Aber wenn Sie möchten, um Sie laufen problemlos auf Server, speziell nginx müssen Sie auch update nginx config. (Schritt 4)

$ npm install connect-modrewrite --save
Bearbeiten gruntfile.js. Fügen Sie am Anfang der Datei
```
var modRewrite = require('connect-modrewrite');
```

Dann in Ihre middleware:

middleware: function (connect) {
    return [
        modRewrite(['^[^\\.]*$ /index.html [L]']),
        connect.static('.tmp'),
        connect().use('/bower_components',
        connect.static('./bower_components')),
        connect.static(config.app)
    ];
}

z.B.

//Generated on 2015-11-09 using generator-angular 0.14.0
'use strict';

//# Globbing
//for performance reasons we're only matching one level down:
//'test/spec/{,*/}*.js'
//use this if you want to recursively match all subfolders:
//'test/spec/**/*.js'
var modRewrite = require('connect-modrewrite');

module.exports = function (grunt) {

  //Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

3.Dann gehen Sie zu Livereload middleware, fügen Sie modRewrite

livereload: {
    options: {
        middleware: function (connect) {
            return [
                modRewrite([
                  '^[^\\.]*$ /index.html [L]'
                ]),
                connect.static('.tmp'),
                connect().use('/bower_components', connect.static('./bower_components')),
                connect.static(config.app)
            ];
        }
    }
},

4.Bearbeiten NGINX-config:

server {
    server_name yoursite.com;
    root /usr/share/html;
    index index.html;

    location / {
    try_files $uri $uri/ /index.html;
    }
}

Hoffe es hilft 🙂

InformationsquelleAutor STEEL

Hier ist meine Lösung, angepasst an generator-angular setup, kann aber überall eingesetzt werden. Es ermöglicht ein umschreiben von syntax (der interessante Teil ist das Beispiel livereload configuarion).

connect: {
  options: {
    port: 9000,
    //Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729,
    //Modrewrite rule, connect.static(path) for each path in target's base
    middleware: function (connect, options) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base,
          middleware = [require('connect-modrewrite')(['!(\\..+)$ /[L]'])]
            .concat(optBase.map(function (path) { 
              if (path.indexOf('rewrite|') === -1) {
                return connect.static(path);
              } else {
                path = path.replace(/\\/g, '/').split('|');
                return  connect().use(path[1], connect.static(path[2]))
              }
            }));

      return middleware;
    }
  },
  livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        'rewrite|/bower_components|./bower_components',
        'rewrite|/app/styles|./app/styles', //for sourcemaps
        '<%= yeoman.app %>'
      ]
    }
  }
}

InformationsquelleAutor pilau

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.