ng build without node module download - node.js

Hi Is there a way to build/run ng cli command (ng build --prod) without downloading the npm packages every time?
The production build is very slow because of this reason, I wanted to check if this download can be avoided if we not adding any new node modules and using the existing one from the node module folder.

ng build --prod is not downloading any npm packages, but instead it's bundling those packages (as vendor-chunk) along with your app code.
The reason is slow in --prod is that because prod uses aot and build optimizer by default. All that time taken is for good cause, to bundle your code, tree shake it, uglify it...etc.
The only thing you can do in this case, is to make sure your code is not using any unnecessary 3rd party libraries, and most importantly you're using the latest ng-cli and Angular versions. keep up with the latest Angular updates, as the Angular Team is working very hard to make it awesome in every version they release.

Related

Is it necessary to install Electron module and save it as devDependencies in project folder or install it globally?

I'm working with Electron to build an app and I find that we can install Electron module globally by npm install -g electron instead of npm install --save-dev electron as the documentations said. I think this will reduce the app size. But I'm afraid of there will be an error when packaging the source code or while the user use the app. Can we install Electron module globally without any error and if can, will the app size reduce when we package it?
Installing Electron locally (within your project) or globally will make no difference to the size of the built application.
It is common practice to install Electron locally within your project as a dev-dependency. Doing so will prevent the need to constantly change its version number when working on different Electron applications should their Electron version numbers differ.
When your application is built, all the necessary binaries, etc are packaged up within your application. IE: Your built Electron application is self-contained.
No, you need to install it locally in the package, because as you say, packaging the app will fail.
Actually, you won't even be able to build your app.
Something like what you're describing has been suggested on their Github page. See here, but I doubt they'll implement this any time soon.

How to develop a webpack package locally?

I would develop a node package for my webpack project with some JS.
The project stack is Yarn + Webpack Encore + Stimulus + PHP + Symfony.
The package is in a Symfony bundle and Flex is linking it through composer, this part is working fine.
To develop the package, I am having a package and a project using it.
The package is added by its local path on my file system using "file:", then I run yarn watch, this is working properly.
But by developing locally, I would changes to be detected by webpack to compile the new changes.
Using "file:", yarn/node seems to create a copy of my sources, so it won't listen the sources for changes.
For this reason, I am running yarn upgrade #my/package --latest, changes are copied to the node_modules then webpack is compiling again, ok, good, but nothing has changed in reality, the new changes are ignored.
I have to kill the yarn watch, run yarn upgrade then run yarn watch and it works as expected, it's taking so much time ! (1minute ~)
I also tried using link: but webpack is failing to compile.
How to develop a webpack package locally ?

What are the components of an Angular/Node/ng application? What does each do and how are they related?

I'm having version issues installing npm/node/angular/ng. What are the different components of an Angular/Node/ng application and how are they related? Are there bundled packages that include everything you need to start developing in a single download? The current project I'm on is managing all of this through npm and is going through the common growing pains of changing versions and changing components and changing dependencies. The npm documentation is good for npm basics but is there documentation that describes best (or common, or recommended) practices for installing everything needed for Angular/node/ng applications (#angular-devkit, #angular-cdk, #schematics/angular, ng, etc.).
The starting point is as follows visiting https://cli.angular.io/ which shows you how to start an Angular app from scratch using Angular CLI.
Now let's say you create a temp folder and do the following as described in above link:
npm install -g #angular/cli
ng new my-dream-app
cd my-dream-app
ng serve
Go to this folder and check the package.json file in the root of that project against yours. That should surely give you the idea of which packages you have.
As the next step run the following command
npm-check -u
and as the final tip: every now and then delete the contents of node_modules (make sure you have everything backed up) and do a
npm install
Then run
ng build --prod
This way around you can always be sure if you clone your app on some other machine, you can install all the dependencies and resume work and also your project builds with no issue.

Should I save or save-dev client-side webpacked dependencies?

I have dependencies that are only getting used client-side (and are getting packed into dist files on compilation through webpack). Should I save them as dev dependencies or just regular dependencies?
I'm just thinking in a server environment I'd have to recompile each time I update. Or would I? Does anyone have any pointers?
I would suggest using --save in your situation. --save is for those packages being used in production and --save-dev for those used when you are developing your app.
--save is used to save packages required for the application to run.
Here's an article for more details on what it means for a package to be a development dependency vs a dependency.

Angular2 development Without node and npm

I am new angular2 development, and what i came to know is before starin the angular2 development, I must install the nodejs for server and npm to download dependencies from official documentation.
I succesfully deployed the source code in tomcat sever[by build]
So my Question is after installation and creating the new project, i got node_modules. By using these node_modules(can i start development of angular2 on another i.e a new machine where node & npm is not installed)
Basically my question is.. I want to start development of angular2 by using the project structure on new machine. Without the installation on node & npm
From Angular docs
Node.js and npm are essential to Angular development.
If you built/compiled the app and have all the modules installed (you have your node_modules) folder then its just javascript and html which you can run on any server you want.
For npm, if you need any modules/packages, I think you can manually download the package and add it to your development environment. But what if the process needs to be automated? You can't just sit there and download all the packages from github. So npm is really helpful when it come to this. You only need a file containing all dependencies, and run it at build time (package.json)
About nodejs, nodejs allows you to run javascript on the server when you need any interaction with the database. So why don't we just go with the easy way?

Resources