[Question] How to open new window using angular router? about angular-electron HOT 44 CLOSED

Hi @okonon. You can open a new window to a specific route as such:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

// Create a browser window
var win = new BrowserWindow({
       width: 800,
       height: 600,
       center: true,
       resizable: false,
       frame: true,
       transparent: false
     });
// Load the page + route
win.loadURL('file://' + __dirname + '/index.html#/settings');

I'm using settings as an example route. For this to work:

• index.html should have <base href="">
• router module should have useHash: true

const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'settings',
        component: SettingsComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})

from angular-electron.

@JohnOfficial or anyone who might have issues with the # being converted into %23, try the following: (I was using url.format to avoid path conflicts when using ng build):

var urlToLoad = url.format({
        pathname: path.join(__dirname, `/path/to/index.html`),
        protocol: 'file:',
        slashes: true,
      });
win.loadURL(urlToLoad + '#/settings');

from angular-electron.

hi, @shalomdotnet can you please upload the full solution of this implementation, I am also struggling to implement it..

from angular-electron.

@daxsom Following what you showed, I was left with doubts about one thing.

As you are opening a new route in a new window will not angular create a new instance of the entire application? In other words, your modules and things that need to be loaded at the start of the application would be loaded again when you open this Login window, right?

from angular-electron.

how do i pass route parameters, for example win.loadURL('file://' + __dirname + '/index.html#/settings/id');

how do i pass the id from angular

from angular-electron.

Hi, I implemented @tech-eng 's solution, turns out it doesn't work with aot build inside electron.

More details on https://stackoverflow.com/questions/50418690/deep-linking-on-a-new-window-using-file-with-aot

from angular-electron.

@maximegris thanks a lot for your help. I was close! did not have a hash in load url line :)

from angular-electron.

@maximegris
I have both <base href=""> in index.html and router module has useHash: true.
But when I load new window using win.loadURL('file://' + __dirname + '/index.html#/settings'); it opens just index.html HomeComponent.
Could you please help what should I do ASAP?
Thanks

from angular-electron.

@maximegris

from angular-electron.

@daxsom Yes. I am going to open new route(setting route) in the new window when I click a button on home route. But when I try it, it opens new window with the same home route and does not open setting route.

from angular-electron.

Please help me @maximegris

from angular-electron.

@tech-eng Can please provide a minimal repo where we can reproduce your issue?

from angular-electron.

@seopei
There is no something special in my project for now.
I've just added two components like you did:

const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'setting',
        component: SettingsComponent
    }
];

And in my home.components.ts, I called this when a button is clicked:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

// Create a browser window
var win = new BrowserWindow({
       width: 800,
       height: 600,
       center: true,
       resizable: false,
       frame: true,
       transparent: false
     });
// Load the page + route
win.loadURL('file://' + __dirname + '/index.html#/setting');

But it always opens home component page instead of settings one.
I already have <base href=""> in index.html and imports: [RouterModule.forRoot(routes, {useHash: true})], as well.

from angular-electron.

Can you please post the content of home.component.html too?
I think you have to add a router-outlet to your template of the HomeComponent

from angular-electron.

<div class="left-side">
  <div class="text-center btn0">
    <div class="glyphicon-plus" (click)="goSetting();"></div>
  </div>
  <div class="text-center btn1">
    <div class="glyphicon glyphicon-cog" (click)="goSetting();"></div>
  </div>
</div>
<div class="right-side">
  <div #container></div>
</div>

This is the content of the home.component.html

from angular-electron.

This is the home.component.ts file:

import { Component, OnInit, ElementRef, ViewChild, Renderer } from '@angular/core';
import { LocaldbService } from '../../providers/localdb.service';
import { Router } from '@angular/router';
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
const path = require('path');
const url = require('url');

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  public htmlToAdd: string;
  public second: boolean = false;
  public first: boolean = false;
  public isFirstShown: boolean = true;
  @ViewChild('container') container: ElementRef;
  constructor(private elementRef: ElementRef,
              public renderer: Renderer,
              public router: Router,
              public localDb: LocaldbService) {
    this.init();
  }

  ngOnInit() {}

  ngAfterViewInit() {}

  init() {}

  goSetting() {
    var win = new BrowserWindow({
      width: 800,
      height: 600,
      center: true,
      resizable: false,
      frame: true,
      transparent: false
    });

    win.loadURL(url.format({
      pathname: path.join(__dirname, './index.html'),
      protocol: 'file:',
      slashes: true,
      hash: 'setting'
    }));
    // // Load the page + route
    // win.loadURL('file://' + __dirname + '/index.html#/setting');
    // this.router.navigateByUrl('setting');
  }
}

from angular-electron.

add this <router-outlet></router-outlet> to your home.component.html and it should work.

from angular-electron.

<router-outlet></router-outlet>
<div class="left-side">
  <div class="text-center btn0">
    <div class="glyphicon-plus" (click)="goSetting();"></div>
  </div>
  <div class="text-center btn1">
    <div class="glyphicon glyphicon-cog" (click)="goSetting();"></div>
  </div>
</div>
<div class="right-side">
  <div #container></div>
</div>

This is new home.component.html file. But it does not work still..

from angular-electron.

Should I create this as an issue?

from angular-electron.

@seopei Do you think there is nothing to do with the setting component?

from angular-electron.

Please help me. This is really urgent issue for now. Thank you!

from angular-electron.

this does work for me:

my app-routing.module

import { HomeComponent } from './components/home/home.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SettingsComponent } from './components/settings/settings.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'settings',
    component: SettingsComponent
  }
];

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

my app.modle

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    WebviewDirective,
    SettingsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    })
  ],
  providers: [ElectronService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

my home.component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {

    const remote = require('electron').remote;
    const BrowserWindow = remote.BrowserWindow;

    // Create a browser window
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      center: true,
      resizable: false,
      frame: true,
      transparent: false
    });

    // Load the page + route
    win.loadURL('file://' + __dirname + '/index.html#/settings');
  }

}

from angular-electron.

I see that you call that url load function inside ngOnInit . Can you try to call a function to load new window with that url router in home.component.html file?
It still does not go to setting page and it opens home page.

from angular-electron.

from angular-electron.

This is the screenshot to show when I call loadURL function.

from angular-electron.

As you can see, the content of the new window is not setting page and it is just home page

from angular-electron.

Do you have any error in the console?
(Add win.webContents.openDevTools(); to open it).

from angular-electron.

from angular-electron.

No error. Exactly same console with the home page

from angular-electron.

Could you please call loadURL function inside the home.component.ts file to open new window with setting router? And then make dmg file to send me?
I want to confirm if we are the same page right now.
Thank you very much!

from angular-electron.

Type location.href in the console (of the new window). What is the result?

from angular-electron.

.../angular-electron-master/dist/index.html#/home

from angular-electron.

Above is the console result of the new window(The opened new window by win.loadURL('file://' + __dirname + '/index.html#/setting');)

from angular-electron.

See this fork: https://github.com/shalomdotnet/angular-electron.
It work for me.

from angular-electron.

Hi, @shalomdotnet
It works here. I've just found the reason. This is my app.components.ts:

...
export class AppComponent {
  constructor(public electronService: ElectronService,
              private translate: TranslateService,
              public router: Router) {

    translate.setDefaultLang('en');

    if (electronService.isElectron()) {
      console.log('Mode electron');
      // Check if electron is correctly injected (see externals in webpack.config.js)
      console.log('c', electronService.ipcRenderer);
      // Check if nodeJs childProcess is correctly injected (see externals in webpack.config.js)
      console.log('c', electronService.childProcess);

      if( !window.localStorage.getItem('endpoints') ) {
        this.router.navigate(['setting']);
      } else {
        this.router.navigate(['home']);
      }
    } else {
      console.log('Mode web');
    }
  }
}

When I comment this part:

if( !window.localStorage.getItem('endpoints') ) {
     this.router.navigate(['setting']);
 } else {
     this.router.navigate(['home']);
 }

It works.

But I should check if which page should be opened first time app opens.
Do you have any idea how can I figure it out?

Thank you

from angular-electron.

I think you need use guard like CanActivate on home-component

from angular-electron.

Hi, @shalomdotnet
Thanks. I will check CanActivate

Thank you so much for your great help!!!

from angular-electron.

Hi, @shalomdotnet
I have another question.
How can I get mainwindow instance inside router component pages?

from angular-electron.

Can you console log __dirname and let us know what folder it's in?

from angular-electron.

__dirname is equal to root folder of the project, parent folder of dist/

from angular-electron.

Hey, I'm getting the same issue, mostly a clean fork. I checked everything the only thing different is when I type location.href I get "data:text/html,chromewebdata" instead of the path

There is an error in new window console, security is disabled Not allowed to load local resource: file:///D:/angular-electron/node_modules/electron/dist/resources/electron.asar/renderer/index.html

from angular-electron.

I have the same problem I am new in the subject I would like to know if there is any solution to this I keep getting this message "data: text / html, chromewebdata"

from angular-electron.

Hey @daxsom, this works great on dev for me! I have an error after building.
"Not allowed to load local resource: ..."
It converts '#' from URL into '%23'.
So instead to load __dirname + '/index.html#/settings', it's trying to load __dirname + '/index.html%23/settings';

Any idea how can I fix that? Thanks!

from angular-electron.

Im trying this idea, but dosent work, only get the home page.. (index.html)

from angular-electron.