Electron-Angular blank screen after packaging.

[navneetsharmaui]

I have followed all the steps properly to create the electron-angular application as mentioned in the Project. But still, after packaging the application is stuck at index.html page where app-root is defined.

[NathanWalker]

@navneetsharmaui I was publishing a few updates and possible you may have caught issue in midst of the published updates. Make sure using 8.0.10 package versions and assuming you generated as follows:

nx g app
// choose electron, angular, Y
// specify name of web app in workspace (Requires you to generate web angular app first)
npm run start.electron.{your_app_name}

Just generated one now with v8.0.10 of xplat tooling:

[navneetsharmaui]

@NathanWalker My package.json with dependencies looks like this

"dependencies": { "@nestjs/common": "^6.2.4", "@nestjs/core": "^6.2.4", "@nestjs/platform-express": "^6.2.4", "@nstudio/xplat": "^8.0.7", "@zeit/next-css": "1.0.1", "@zeit/next-less": "1.0.1", "@zeit/next-sass": "1.0.1", "@zeit/next-stylus": "1.0.1", "next": "9.0.5", "react": "16.9.0", "react-dom": "16.9.0", "reflect-metadata": "^0.1.12", "@angular/animations": "^8.2.0", "@angular/common": "^8.2.0", "@angular/compiler": "^8.2.0", "@angular/core": "^8.2.0", "@angular/forms": "^8.2.0", "@angular/platform-browser": "^8.2.0", "@angular/platform-browser-dynamic": "^8.2.0", "@angular/router": "^8.2.0", "core-js": "^3.1.4", "rxjs": "~6.4.0", "zone.js": "~0.9.0", "@exps/scss": "file:libs/scss", "@ngx-translate/core": "~11.0.0", "@ngx-translate/http-loader": "~4.0.0", "react-router-dom": "5.0.1", "@angular/elements": "^8.2.0", "@webcomponents/webcomponentsjs": "^2.2.7" }, "devDependencies": { "@angular-devkit/build-angular": "^0.803.3", "@angular/cli": "8.3.3", "@angular/compiler-cli": "^8.2.0", "@angular/language-service": "^8.2.0", "@babel/preset-react": "7.0.0", "@nestjs/schematics": "^6.3.0", "@nestjs/testing": "^6.2.4", "@nrwl/angular": "~8.4.0", "@nrwl/cypress": "8.6.0", "@nrwl/express": "^8.6.0", "@nrwl/jest": "8.6.0", "@nrwl/nest": "^8.6.0", "@nrwl/next": "^8.6.0", "@nrwl/node": "^8.6.0", "@nrwl/react": "^8.6.0", "@nrwl/web": "^8.6.0", "@nrwl/workspace": "8.6.0", "@nstudio/angular": "8.0.7", "@nstudio/electron": "8.0.7", "@nstudio/electron-angular": "8.0.7", "@nstudio/web": "8.0.7", "@nstudio/web-angular": "8.0.7", "@nstudio/xplat": "8.0.7", "@testing-library/react": "8.0.5", "@types/jest": "24.0.9", "@types/node": "~8.9.4", "@types/react": "16.9.1", "@types/react-dom": "16.8.5", "@types/react-router-dom": "4.3.5", "codelyzer": "~5.1.0", "cypress": "3.4.1", "dotenv": "6.2.0", "electron": "^4.0.5", "electron-builder": "^20.38.4", "electron-installer-dmg": "~3.0.0", "electron-packager": "~13.1.0", "electron-rebuild": "~1.8.4", "electron-reload": "~1.4.0", "electron-store": "~2.0.0", "electron-updater": "~4.0.6", "eslint": "6.1.0", "http-server": "^0.11.1", "jest": "24.1.0", "jest-preset-angular": "7.0.0", "ngx-build-plus": "^7.7.5", "npm-run-all": "^4.1.5", "prettier": "1.18.2", "ts-jest": "24.0.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.4.5", "wait-on": "~3.2.0" },

[navneetsharmaui]

In here, I'm using @nstudio:8.0.7 version. But the application is running fine in the local development mode. The Issue is after the packaging of the application. I'm packaging it for Linux(Debian).

[navneetsharmaui]

If there could be a blog about the routing of electron application with angular then it would be awesome. As I have experience with electron-angular (not with @nstudio/xplat), it was not that much overhead for me. But it would be good if there is more extensive docs for such features.

[navneetsharmaui]

@navneetsharmaui I was publishing a few updates and possible you may have caught issue in midst of the published updates. Make sure using 8.0.10 package versions and assuming you generated as follows:

nx g app
// choose electron, angular, Y
// specify name of web app in workspace (Requires you to generate web angular app first)
npm run start.electron.{your_app_name}

Just generated one now with v8.0.10 of xplat tooling:

In here, I'm using @nstudio:8.0.7 version. But the application is running fine in the local development mode. The Issue is after the packaging of the application. I'm packaging it for Linux(Debian).

[navneetsharmaui]

@NathanWalker I've attached the screenshot of what's happening in development mode vs when the application is packaged.

[navneetsharmaui]

@NathanWalker I've attached the screenshot of what's happening in development mode vs when the application is packaged.

Like I said the application is stuck at the loading screen when packaged.

[navneetsharmaui]

Git Repo

[navneetsharmaui]

@NathanWalker I think I found the problem. It's with the target in tsconfig.json. What should be the proper target to support both angular elements? Right now I have put that as es2016 but this will create the differential loading issue as differential loading requires the es2015

[NathanWalker]

Nice @navneetsharmaui that repo is helpful. Agree a blog post on electron with angular routing would be good, will plan to do one on that topic. I'll need to investigate regarding angular elements; I would think targeting es2015 should be sufficient.

[navneetsharmaui]

@NathanWalker target es2015 is causing the issue of loading after electron packaging (installable version not a dev). While target es5 will resolve that issue it will create a new issue of angular elements being not able to render in the dom. It will be a great help if this issue can be identified.

[mkashifsnyder]

I am facing same issue application is working fine during development but after the build in windows it shows blank page... Can anyone please suggest a workaround for this... facing this issue on electron ^11.1.0 and electron builder ^22.9.1

[FreddieManegos]

@mkashifsnyder Same issue, any update if solve this one?

[NathanWalker]

This issue looks similar from a react stack: https://stackoverflow.com/questions/64683070/app-built-using-electron-builder-in-electron-forge-webpack-application-shows-b

Wonder if something similar is going on.

another similar report with Vue: https://stackoverflow.com/questions/59952032/electron-app-shows-blank-screen-when-built-with-electron-builder

Similar as well, might try solution mentioned here? https://stackoverflow.com/questions/63878416/electron-app-not-loading-index-html-after-building-with-electron-builder-even-g

[FreddieManegos]

Thanks for the response. I am new from Electron. I have an angular application and I tried running it on "electron ." it's working fine however when I run it to "electron builder" the app shows a blank page and cannot recognize the "/dist/index.html". Facing this issue on"electron": "^12.0.1" and "electron-builder": "^22.10.5".

[m-kashif]

yes i have solved this for electron build by adding following in my app router module. please note relativeLinkResolution: 'legacy' @NgModule({ imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })], })

[FreddieManegos]

Thanks for the response @m-kashif. I have already changed my router module. My problem has something to do with the electron-builder package but I solved it by following this https://stackoverflow.com/questions/51492003/building-electron-application-with-electron-builder-in-angular-5. I added this build part on my package.json

`"main": "electron-main.js",

  "build": {
    "appId": "com.example.companyDashboard",
    "productName": "Farmhub Companies Dashboard",
    "files": ["**/*", "dist/**/*"],

  "directories": {
      "output": "release",
      "buildResources": "dist"
    },
    "asar":false,
    "win": {

      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "runAfterFinish": true,
      "license":"LICENSE"
    }
  },`