Question

我正在使用angular2创建chrome扩展。该应用程序使用webpack编译。问题是，当我在我的应用程序中添加路由时，突然我的html，无法在存在所需文件的目录中找到文件...

这是我显示的源地图：

这是我的HTML：

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

这是我的开源地图（app使用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

据我所知，我的路由目录不正确...有人可以帮我解决这个问题吗？

Answer 1

我受到使用Angular 4.4的类似问题的影响

解决方案非常简单（感谢这个答案Angular 2 router no base href set）。您只需要使用 HashLocationStrategy 。

基本上，它的作用是 - 它使用哈希策略进行路由。例如，chrome扩展网址可能看起来像（并且它会破坏标准的角度路由，因为它没有正常的http：domain.com/ url）：

铬：//扩展-XXX /

启用HashLocationStrategy后，angular将依赖于url中的哈希：

chrome：// extension-xxx / ＃ /

response.setHeader("Content-Type", "")

Answer 2

我遇到了同样的问题，并使用HashLocationStrategy来解决它。当我刷新我的网页时，幸福并没有持续很长时间。我再次得到404。

Base Href：/ dist / app /

所以一般来说，
1.浏览器转到chrome-extension：//hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app/index.html
2.使用HashLocationStrategy的角度路由启动并更改url到chrome-extension：// hkmmlaghihcdhmpodgfnkkjbmecahifc / dist / app /＃/ browse 该应用程序在这一点上工作。
3.我刷新页面并获得404浏览器试图转到chrome-extension：// hkmmlaghihcdhmpodgfnkkjbmecahifc / dist / app /＃/直接浏览而不加载app / index.html

你有解决方案吗？

<强>解决方案： -
我将基础href更改为dist / app / index.html。现在它的工作正常。原因？好吧，现在＃/ browse会在dist / app / index.html之后附加，这允许我的bundle.js加载，然后加载角度加载＃/ browse。

希望它能节省一些人的时间，尤其是使用angular2 +（我的角度版本为5）开发chrome扩展的人，其中服务器内置于chrome中，开发人员无法控制它。

Chrome扩展程序

2 个答案: