Angluar2 routing in chrome extension

Question

I am creating chrome extension using angular2. The app is compiled using webpack. The problem is that when I added routing in my app, suddenly my html, can't find files in directories that exist with wanted files...

This is my source map that chrome shows:

this is my html:

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

This is my dev source map (app is running using dist folder, that is made when compiled with webpack):

My routing file:

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 {}

before I created routing file the image was found by html, but know it does not find it....

Error:
Failed to load resource: net::ERR_FILE_NOT_FOUND : chrome-extension://xyxyx/src/dist/images/logo-cw-white.png

As I understand my routing directories are incorrect... Can someone please help me fix this??

Could be caused by the fact that relative paths in Chrome extensions are resolved from the root directory of the extension regardless of your `.` in the path. WebExtensions IIRC only accept relative paths that start with `/` to indicate this behavior explicitly. — wOxxOm, Feb 22 '17 at 11:41
Also it may be caused by an invalid chrome extension configuration (inside manifest.json). You need to specify **"web_accessible_resources"** in manifest.json. Please, refer to this question for more info [Google Chrome Extensions - Can't load local images with CSS](https://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css). — Pavel Sapehin, Oct 30 '17 at 04:10

Pavel Sapehin · Answer 1 · 2017-10-30T04:02:27.610

I was affected by the similar issue using Angular 4.4

The solution was pretty easy (thanks to this answer Angular 2 router no base href set). You just need to use HashLocationStrategy.

Basically, what it does - it uses a hash strategy for routing. For example, a chrome extension url may look like (and it blows up the standard angular routing because it doesn't have a normal http:domain.com/ url):

chrome://extension-xxx/

After enabling HashLocationStrategy angular will rely on hash inside the url:

chrome://extension-xxx/#/

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

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

it works but only half. When you reload the page, you get 404. Any solution to this problem? — Vikas Gautam, Dec 05 '17 at 23:47
Hi, @VikasGautam. It works fine for me and I hadn't got 404. Probably, it may require setting `` in your **popup.html**, but I am not sure. — Pavel Sapehin, Dec 06 '17 at 02:03

score 3 · Answer 2 · answered Dec 06 '17 at 00:47

I came across the same problem and used HashLocationStrategy to get around it. Happiness didn't last long as I noticed that when I refresh my webpage. I get 404 again.

Base Href: /dist/app/

So generally,
1. Browser go to chrome-extension://hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app/index.html
2. Angular routing with HashLocationStrategy kicks in and changes url to chrome-extension://hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app/#/browse The app works at this point.
3. I refresh the page and get 404 as browser is trying to go to chrome-extension://hkmmlaghihcdhmpodgfnkkjbmecahifc/dist/app/#/browse straight without loading the app/index.html

Do you have any solutions?

Solution:-
I changed base href to dist/app/index.html. Now its working fine. Reason? well, now #/browse gets appended after dist/app/index.html which allows my bundle.js to load and later on angular loads #/browse.

Hope it saves someone's time especially the people who are developing chrome extensions using angular2+ (my angular version is 5) where server is built into chrome and developer has no control over it.

Angluar2 routing in chrome extension

2 Answers2

Linked