2016-08-15 106 views
2

我有這樣角2組分上的應用程序相對路徑部署在子路徑

@Component({ 
    moduleId:__moduleName, 
    selector:"awesome-component", 
    templateUrl:"awesome.component.html", 
    styleUrls:["awesome.component.css"] 
}) 
export class AwesomeComponent {} 

我捆綁此使用Systemjs助洗劑和當應用程序被部署在根路徑上例如一切正常行的成分如果應用程序從http://localhost運行。

當應用在子路徑下運行時,它不起作用,例如, http://localhost/awesome-app。這產生大量的404,因爲對組件的html和css文件的請求是根據例如http://localhost/awesome-component.html而不是http://localhost/awesome-app/awesome-component.html。我已經將基礎href設置爲真棒應用,例如<base href="/awesome-app/">

有什麼辦法可以引導角度發送請求到部署應用程序的子路徑而不是根目錄?

回答

0

我想很多開發者都遇到過這個問題,儘管我認爲這是一個非常常見的情況。經過尋找選項來配置角/ systemjs幾天,我結束了從站點的根目錄生成的模板和樣式的URL的相對路徑動態如下

function appendToBase(path: string): string { 
     return getBase() + path; 
    } 

    function getBase(): string { 
     let baseElement = document.getElementsByTagName("base")[0]; 
     if (baseElement && baseElement.href) { 
      var pathFragments = baseElement.href.split("/"); 
      if (pathFragments.length > 3) { 
       pathFragments.splice(0, 3); 
       return pathFragments.join("/"); 
      } 
     } 
     return "./"; 
    } 

,並改變了組件元數據如下

@Component({ 
    selector:"awesome-component", 
    templateUrl:appendToBase("awesome.component.html"), 
    styleUrls:[appendToBase("awesome.component.css")] 
}) 
export class AwesomeComponent {} 
0

我已經經歷了類似的問題,當我同時使用自定義的基本HREF路徑:

<base href="/something-1/"> 

...並設置組件的的moduleId:

@Component({ 
    moduleId: "something-2", 
    selector:"my-component", 
    ... 
}) 

如果未指定組件的的moduleId,組件路徑與指定的基本路徑正確解析。

我相信這是一個錯誤。