2015-03-25 26 views
12

Ich bekomme den obigen Fehler, wenn Sie versuchen, html5Mode mit UI-Router zu verwenden. Kann mir jemand auf das hinweisen, was ich falsch mache?TypeError: Kann die Eigenschaft 'replace' von undefined nicht lesen

TypeError: Cannot read property 'replace' of undefined 
    at bd (angular.js:10555) 
    at Object.<anonymous> (angular.js:11403) 
    at l.$get.l.$digest (angular.js:14222) 
    at l.$get.l.$apply (angular.js:14493) 
    at angular.js:1449 
    at Object.e [as invoke] (angular.js:4182) 
    at d (angular.js:1447) 
    at sc (angular.js:1467) 
    at Jd (angular.js:1361) 
    at HTMLDocument.<anonymous> (angular.js:26086) 

Das Segment in angular.js ist:

10554 function trimEmptyHash(url) { 
10555 return url.replace(/(#.+)|#$/, '$1'); 
10556 } 

Die Routing-Datei:

(function(){ 

    'use strict'; 

    angular 
     .module('app') 
     .config(routes); 

     routes.$inject = ['$stateProvider', '$locationProvider']; 

     function routes($stateProvider, $locationProvider) { 

      // Configure app states 
      $stateProvider 

       .state('app', { 
        abstract: true, 
        templateUrl: 'modules/app/app.html',     
        controller: 'AppController' 
       }) 

       .state('app.home', { 
        url: '/', 
        templateUrl: 'modules/home/index.html' 
       }); 

      $locationProvider.html5Mode(true); 
     } 
})(); 

ich die Basis-URL im HTML festgelegt haben:

<base href="/app/" /> 
+0

http://stackoverflow.com/questions/28859276/locationprovider-html5modetrue-issues und http://stackoverflow.com/questions/21863670/case-sensitivity-with-angularjs-ui-router –

+0

Diese Lösungen nicht scheinen zu arbeiten. Alle meine URLs sind sowieso in Kleinbuchstaben, daher bin ich mir nicht sicher, ob das möglich ist. – babbaggeii

+1

Also 'URL' ist undefiniert.Schauen Sie sich die Stapelverfolgung an und sehen Sie, wer "trimEmptyHash" aufruft. Suchen Sie den Code, der ihn festlegen soll, und sehen Sie, warum er nicht definiert ist. –

Antwort

0

Ihre Status 'app' haben keinen URL-Schlüssel definieren d.

-5

müssen Sie diese aus der Datei html entfernen

<base href="/app/" /> 

und dies von app.js Code

$locationProvider.html5Mode(true); 
+4

Ja, das hilft, aber nicht, wenn Sie möchten, dass Ihre Kunden von Ihren hübschen URLs beeindruckt sind. – trysis

+2

Brilliant! Ich werde HTML5Mode entfernen, wenn ich versuche, es zu benutzen! Hast du die Frage überhaupt gelesen? – Silveraven

11

ich in der gleichen Ausgabe lief, und in meinem Fall die undefinierte "url" Argument Die Übergabe an trimEmptyHash() kam letztendlich von der Tatsache, dass $$ absUrl propery auf $ location nicht initialisiert wurde. Wenn man weiter nachdenkt, scheint $$ absUrl normalerweise in der $$ compose() -Methode initialisiert zu werden, die typischerweise von $$ parse() aufgerufen wird, die typischerweise von der $$ parseLinkUrl() -Methode aufgerufen wird. Hier ist $$ parseLinkUrl() (bei Angular 1.4.1 suchen):

this.$$parseLinkUrl = function(url, relHref) { 
    if (relHref && relHref[0] === '#') { 
    // special case for links to hash fragments: 
    // keep the old url and only replace the hash fragment 
    this.hash(relHref.slice(1)); 
    return true; 
    } 
    var appUrl, prevAppUrl; 
    var rewrittenUrl; 

    if ((appUrl = beginsWith(appBase, url)) !== undefined) { 
    prevAppUrl = appUrl; 
    if ((appUrl = beginsWith(basePrefix, appUrl)) !== undefined) { 
     rewrittenUrl = appBaseNoFile + (beginsWith('/', appUrl) || appUrl); 
    } else { 
     rewrittenUrl = appBase + prevAppUrl; 
    } 
    } else if ((appUrl = beginsWith(appBaseNoFile, url)) !== undefined) { 
    rewrittenUrl = appBaseNoFile + appUrl; 
    } else if (appBaseNoFile == url + '/') { 
    rewrittenUrl = appBaseNoFile; 
    } 
    if (rewrittenUrl) { 
    this.$$parse(rewrittenUrl); 
    } 
    return !!rewrittenUrl; 
}; 

In meinem Fall die letzte „wenn“ -Klausel wurde den Anruf nicht auslöse $$ analysieren, denn „rewrittenUrl“ bekam nie eine value, weil keine der if/else if-Klauseln in der Mitte zu true aufgelöst wird. In meinem Fall lag das daran, dass die URL, die ich für die App verwendete (CompanyName/admin.html), tatsächlich über der Base Href lag, die ich für die App (CompanyName/admin /) eingab, sodass keine der Bedingungen in true aufgelöst wurde . Sobald ich meine Base Href auf CompanyName/geändert habe, ist mir dieses Problem nicht mehr aufgefallen.

Alternativ können Sie $$ absUrl auf dem Standortprototyp initialisieren oder auf eine Art von Fix von Angular warten - sehen Sie this issue und sehen Sie sich die von joelmdev am 30. März vorgeschlagene Lösung an.

+2

Ich kann nicht glauben, dass das Angular-Team das getan hat. Dies lässt den HTML5-Modus auf Websites mit mehr als einfachem Routing, z. B. Rails oder ASP.NET-Sites, bei denen sich der Öffentliche Ordner nicht an der gleichen Stelle wie die Routing-Dateien befindet, nahezu unmöglich. – trysis

+0

Entschuldigung, ich war bei meinem letzten Kommentar nicht korrekt. Es ist möglich, Rails usw. mit dem HTML5-Modus von Angular zu verwenden, aber es erschwert das Starten von Teams und Tests, da die Routen nicht eingerichtet werden und die alte API verwendet werden muss. Andererseits werden die Kunden diese wahrscheinlich nicht sehen, und hoffentlich werden die Teams ihre Routen zu der Zeit einrichten, zu der sie es tun. – trysis

6

ich genau dieses gleiche sah TypeError: Cannot read property 'replace' of undefined Fehler bei der Verwendung von html5mode auch, bis ich geändert:

<base href="app/" /> 

zu

<base href="/app/" /> 

Hinweis, der fehlende vorangehende Schrägstrich. Hoffe, das kann jemandem helfen.

+4

Ich habe dies überprüft, und meine hatte das/vor dem/nach, aber was mein Problem verursachte, war, dass es Groß- und Kleinschreibung ist! Stellen Sie sicher, dass alles Kleinbuchstaben, das mein Problem behoben – Gillardo

Verwandte Themen