angular 5 with electron-packager - electron

I try to build my electron project to window app by using electron-packager but I get this error.
Failed to locate module "fsevents" from "/var/www/windowapp/electron-angular-project/node_modules/#angular-devkit/core/node_modules/chokidar"
This normally means that either you have deleted this package already somehow (check your ignore settings if using electron-packager). Or your module installation failed.
Anyone know how to solve it and what happened to this?

Here my 2 cent, I did a package that works without the error, but also avoids to add unnecessary files:
electron-packager . --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src
The electron-packager expect that you have already run run the angular build process:
ng build --prod
You can add this script in the package.json:
"electron-package": "ng build --prod && electron-packager . --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src --overwrite"
Then run:
npm run electron-package

With slight modification on the answer provided by Michael Denny "electron-package": "ng build --prod && electron-packager . --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src --overwrite" I'm able to package my electron angular 7 application. Please note, minor modifications might require on these commands, on a case to case to basis. In my case, the following command worked.
"electron-package": "ng build --prod --base-href ./ && electron-packager . --no-prune --ignore=/e2e --ignore=/src --overwrite"
What is the change?
Removed --ignore=/node_modules
Reason: if I add this option while building, Ended up in Module Not Found Error
Added --base-href ./
Reason: Otherwise, Ended up with error Failed to load resource: net::ERR_FILE_NOT_FOUND
With these two modifications, I'm able to package my electron angular 7 application. Size of the package is close to 100MB. I'm looking for a way to reduce this size.

In the directory where your app is, try run this command
electron-packager . --no-prune
More information about this commands can be found in here https://github.com/electron-userland/electron-packager/blob/master/usage.txt

This is related to the issue #821in electron-packager with removing optional platform specific dependencies (possibly only when running packager on Windows).
--no-prune solves the problem during development, but won't work for production.
Reverting to v11.2.0 also solves the issue.

Related

Why does my Electron app lag after building?

I have an electron app that works perfectly well when I run it with "npm start". This is my start script:
electron .
The problem for me is that when I build the program with electron-packager, it behaves abnormally and lags. My build script is below:
electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --out=
release-builds
I'm not really sure what's causing the slow behavior in my app. Additionally my app uses WebGL, so I was unable to use the "disableHardwareAcceleration()" command. I'm just confused in general as to why my app functions normally with "npm start", but then lags when I build it into an actual application.
Thank you for any help in advance!

Angular PWA Regenerate Manifest

According the the Angular docs here https://angular.io/guide/service-worker-config I can run this command
ngsw-config dist src/ngsw-config.json /base/href
And the CLI should regenerate my service worker manifest.
However it doesn't work I just get the following error message
zsh: command not found: ngsw-config
I have looked on npm, tried npm run ngsw-config, ng ngsw-config seems to me it doesn't exist. I am using angular 7.2
Maybe there is a new way to do this and the docs are out of date? If so what is the new way to do this ?
It doesn't work. You can edit the files and then you can use the command: ng build --prod
Now the ngsw-worker.js is in the dist folder

Correct deployment script for Azure Git backed continuous Deployment

I have a ASP.Net 4.5 MVC application which uses Angular 1.5. The JS code is Typescript and a post build action builds the js code and deploys it to the folder where my application refers to.
I have a Slot on my azure web app which is backed my gitlab repo. Committing to the repo, triggers the deployment, however the post deployment build frequently seems to have issues when a bower/npm or typings library is updated (which is resolved by manually clearing the folder via the kudu console). Does someone have an example of a deploy.cmd script which does the equivalent of
npm install
typings install
at the correct point in the pipeline so that the files get deployed correctly.
I want to start scratch with a new slot, and to get the existing slot to work in the past i had to manually install typings for example "npm install typings --global" in order to get the build to work without a typings error.
Update Output Below
I'm guessing that the errors below are due to azure running typescript 1.6 compiler over reference files which need typescript > 1.6.
My csproj has <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
(ive removed my files from the compile output, but the _all.d.ts file does reference the errored files below
CompileTypeScript:
D:\Program Files (x86)\Microsoft SDKs\TypeScript\1.6\tsc.exe --sourcemap --target ES5 --noEmitOnError "REMOVED MY TYPESCRIPTFILES" "D:\home\site\repository\mymvcproject\app\src\_all.d.ts"
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,32): error TS1110: Build: Type expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,50): error TS1005: Build: ']' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,58): error TS1005: Build: ',' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,59): error TS1136: Build: Property assignment expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1941,1): error TS1128: Build: Declaration or statement expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
Done Building Project "D:\home\site\repository\mymvcproject\mymvcproject.csproj" (Build;pipelinePreDeployCopyAllFilesToOneFolder target(s)) -- FAILED.
FINAL UPDATE
After the typescript team finally generated a version of typescript 2.* which could be installed on Azure, and then the Kudu team deployed it. Now the whole process works! the note from below about using
"preinstall": "npm install typescript -g && npm install typings -g"
Was the other part of the solution!
According to your requirement, you could follow the steps below to achieve your purpose.
Create a deployment script
You could log in to KUDU tool (https://.scm.azurewebsites.net/), click "Tool" > "Download deployment script". Also, you could leverage azure-cli to generate the script. For more details about how to generate deployment script via azure-cli, you could refer to this tutorial.
Customize the deployment script
For using NPM to manage your packages, you could add the following scripts in your package.json file.
"scripts":{
"preinstall": "npm install typescript -g && npm install typings -g"
}
Then, you need to add the following scripts to the deploy.cmd file.
IF EXIST "%DEPLOYMENT_SOURCE%\package.json" (
pushd "%DEPLOYMENT_SOURCE%"
echo installing npm package
call :ExecuteCmd npm install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
Or you could add the following scripts to install typescript and typings directly via command line.
echo Installing typescript and typings
call npm install typescript -g && npm install typings -g
IF !ERRORLEVEL! NEQ 0 goto error
Note: The .deployment, deploy.cmd files need to be placed in the root directory of your solution. You could refer to this sample project for details.

TFS Build process hangs on any NPM command

I'm building an angular2 app, and I've developed a build profile in TFS to auto-build it.
There are four npm commands:
npm install angular-cli -g
npm install
npm run typings (executes typings install)
npm run build (executes ng build)
And then a Copy Publish Artifact step.
However, even when every step passes, it says Finishing Copy and Publish Build Artifacts, the project has been built, and the files have been moved, the actual build never finishes. I've tried breaking those npm commands into a powershell script, having them as NPM commands within TFS, and running them as CMD commands, but the same thing happens every time. Also, if I just remote into the build server and run the commands by hand, it works just fine.
Any ideas?
We've gone through the same headache recently, and I'd strongly suggest you not rely on TFS Build to restore npm packages. Even when you get that right, it takes long and doesn't deploy the node_modules you need to IIS.
Instead, use WebPack to bundle up your node_modules into a bundle.js.
Reference this in your projects/scripts folder and check it into source control.
Remove any npm install steps in your build process (it won't be required anymore since you're referencing the bundle.js now).
This will increase your quality (no future package version surprises), and speed up your deployment (no need to download npm packages on each build anymore).
It's fairly quick to get Webpack installed and you'll save yourself headaches :)

ionic build ios fails with "[TypeError: Arguments to path.join must be strings]"

I am trying to create an ionic app on Mac.
I followed the instructions on ionic's website to create a basic app and was able to run it in the browser but when I run "ionic build ios" I get following error. I cannot find a log file or any other error to debug this. How do I go about fixing this?
Check your Gulp version and gulpfile.js. You may need to remove the calls to gulp.src
See:
Gulp TypeError: Arguments to path.join must be strings
and
https://github.com/sindresorhus/gulp-ruby-sass/issues/191
ok, after lot of looking and searching I figured my npm install was messed up.
Part of my installs were in /usr/local and few of them were in /User/user.name/npm folders. /Users/user.name/npm was set in the npm config prefix.
I had two installs of cordova, one on each folder above. Some how the cordova from /usr/local was getting used to create the project and that was the old version.
To fix the problem, I uninstalled all my global npm installs and pointed my npm config prefix to /usr/local and gave myself execute permission on that folder. Everything is working now.
Here is the video that explains how to do it: https://docs.npmjs.com/getting-started/fixing-npm-permissions

Resources