在chrome擴展中的Angluar2路由

我使用angular2創建了擴展。該應用程序使用webpack進行編譯。問題是，當我說我的應用程序，突然我的HTML路由，找不到目錄，與通緝文件存在文件...在chrome擴展中的Angluar2路由

這是我的源圖，Chrome會顯示：

這是我的html：

<div class="app-main-component"> 
    <img src="../images/logo-cw-white.png"> 
</div>

這是我的開發源地圖（應用程序使用DIST文件夾中運行，當與編譯的WebPack製成）：

我的路由文件：

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { HelloAgainComponent } from './app/hello-again.component'; 
import { AppComponent} from './app/app.component' 
import { AppMainComponent} from './app/app-main.component' 

const routes: Routes = [ 
    { 
    path: '**', 
    component: AppMainComponent, 
    children: [ 
     { 
     path: 'again', 
     component: HelloAgainComponent 
     }, 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {}

之前，我創建路由文件中的圖像是由HTML發現，但知道它沒有找到它....

錯誤：
無法加載資源：net :: ERR_FILE_NOT_FOUND：chrome-extension：//xyxyx/src/dist/images/logo-cw-white.png

As I und erstand我的路由目錄不正確......有人可以幫我解決這個問題嗎？

來源

2017-02-22 Nikas Žalias

可以通過這樣的事實，在Chrome擴展相對路徑從擴展的根目錄解析，無論你的'.'路徑造成的。 WebExtensions IIRC只接受以'/'開頭的相對路徑來顯式指示這種行爲。 – wOxxOm

此外，它可能是由無效的擴展配置（在manifest.json中）造成的。您需要在manifest.json中指定**「web_accessible_resources」**。請參閱此問題的詳細信息[谷歌Chrome瀏覽器擴展 - 無法用CSS加載本地圖片]（https://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-與-CSS）。 –

我受採用了棱角分明4.4

的解決方案類似的問題是很容易（感謝這個答案Angular 2 router no base href set）。您只需要使用HashLocationStrategy。

基本上，它做了什麼 - 它使用散列策略進行路由。例如，鉻擴展url可能看起來像（並且由於它沒有正常的http：domain.com/ url而炸燬了標準角度路由）：

chrome：// extension-xxx/

使HashLocationStrategy角度將依賴散列鏈接內部之後：

鉻：//擴展-XXX/＃/

import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    providers: [ 
    { provide: LocationStrategy, useClass: HashLocationStrategy } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

來源

2017-10-29 13:46:34

它的工作，但只有一半。當你重新加載頁面時，你會得到404。這個問題的任何解決方案？ –

嗨，@VikasGautam。它工作正常的我，我還沒有拿到404.也許，這可能需要設定'<基本href =「/」>'你** ** popup.html，但我不知道。 –

我遇到了同樣的問題，並使用HashLocationStrategy來解決它。當我刷新我的網頁時，幸福沒有持續多久。我再次得到404。

的基本href：/距離/應用/

所以一般，
1.瀏覽器轉到chrome擴展：//hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app/index.html
2. HashLocationStrategy踢角路由並將網址更改爲chrome-extension：// hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app /＃/瀏覽該應用程序在此處起作用。 3 3。我刷新頁面，並獲得404瀏覽器嘗試前往chrome擴展：// hkmmlaghihcdhmpodgfnkkjbmecahifc /距離/應用/＃/瀏覽直而不加載應用程序/ index.html的

你有什麼辦法呢？

解決方案： -
我改變基本href到dist /應用/ index.html中。現在它工作正常。原因？好吧，現在＃/瀏覽會追加到dist/app/index.html後面，它允許我的bundle.js加載並稍後加載角度加載＃/瀏覽。

希望這樣可以節省尤其是誰在開發利用angular2 + Chrome擴展的人（我的角度版本5），其中服務器被內置到Chrome和開發商有沒有對其進行控制別人的時間。

來源

2017-12-06 00:47:42

在chrome擴展中的Angluar2路由

回答

相關問題