Angular routing in electron

user_14080388 0
Viewed 1814

I seem to be having some trouble routing pages in my angular electron desktop app. Ive set up the routing the same way you would in an angular application and yet nothing works. Im using routerlink="/home" as the routing in the html files and I have set up the paths to the components in the app.routing.module. I have a sidenav and a toolbar that should route to the same pages as well as a login in register page that should load on app start up and yet nothing happens.

const routes: Routes = [
  {path: 'Insurnace',component:InsuranceProviderComponent},
  {path: '**',component: PageNotFoundComponent},
  {path:'profile',component:ProfileComponent},
  // // {path: '',redirectTo: '/home',pathMatch: 'full'},
  // {path: '**',redirectTo: '/home',pathMatch: 'full'},
  {path:'login',component:LoginComponent},
  {path:'register',component:RegisterComponent},
  {path:'insurance',component:InsuranceProviderComponent},
  {path:'farm',component:FarmComponent}
];
the routing paths 

<mat-toolbar color="primary" class="tool">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1 id="name">AgriLog</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="'/home'"><span class="material-icons">
        home_work
        </span>Home</a>
      <a mat-button [routerLink]="'/about'"><span class="material-icons">
        info
        </span>About</a>
      <a mat-button [routerLink]="'/profile'"><span class="material-icons">
        account_circle
        </span>Profile</a>
      <!-- <a mat-button [routerLink]="'/farm'"><span class="material-icons">
        agriculture
        </span>Farm</a> -->
      <a mat-button id="reglog" [routerLink]="'/register'"><span class="material-icons">
        person_add
        </span>Register</a>
      <a mat-button id="reglog" [routerLink]="'/login'"><span class="material-icons">
        login
        </span>Login</a>
      <a mat-button id="reglog" [routerLink]="'/'"><span class="material-icons">
        power_settings_new
        </span>Logout</a>
    </div>
  </mat-toolbar-row>
</mat-toolbar>


<mat-sidenav-container class="side" layout="vertical" layout-fill flex>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <br>
      <br>
      <br>
      <a mat-list-item [routerLink]="'./farm'"><span class="material-icons">
        home_work
        </span>Home</a>
      <a mat-list-item [routerLink]="'/about'"><span class="material-icons">
        info
        </span>About</a>
      <a mat-list-item [routerLink]="'./profile'"><span class="material-icons">
        account_circle
        </span>Profile</a>
      <!-- <a mat-list-item [routerLink]="'/farm'"><span class="material-icons">
        agriculture
        </span>Farms</a> -->
      <a mat-list-item [routerLink]="'/'"><span class="material-icons">
        power_settings_new
        </span>Logout</a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 100vh;">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
electron angular
3 Answers

The generated root page in Angular will be <base href="/">, this will create problem in Electron.

update the <base href="/"> to <base href="./"> in src/index.html

in your main.js win.loadUrl check the fileName and path is correct !.

function createWindow () {
// Create the browser window.
win = new BrowserWindow({
  width: 600, 
  height: 600,
  backgroundColor: '#ffffff',
  icon: `file://${__dirname}/dist/assets/logo.png`
 })


   win.loadURL(`file://${__dirname}/dist/index.html`)   <== HERE
}

Hope this works !.

user_96401280

I just had the same issue, in my case, I had an AngularJS application that I was rewriting as Angular

The solution for it was to review the links themselves, for me:

<!-- These DON'T work -->
<a href="./home">Home</a>
<a href="#home">Home</a>
<a [routerLink]="./home">Home</a>

<!-- These ones do-->
<a routerLink="home">Home</a>
<a [routerLink]="'home'">Home</a>
user_11025850

Please make sure that you are not using any cookie in your application. Instead please use localstorage. This should resolve this problem.

user_95184070
Related