We Keep Coding

Angular 8 components

What would be the most optimal structure for a business project with many components, (50 approx)?
That each component has its own module?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ │ ├── comp1.module.ts
│ │ │ └── index.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ │ ├── comp2.module.ts
│ │ │ └── index.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ │ ├── comp3.module.ts
│ │ │ └── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
That a module groups all the components? in this case, every time you load the module, will it load all the components in this memory?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ ├── comps.module.ts <=== // group all components in one module
│ │ ├── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
Any suggestion?

Yes, In angular when you load a module, all of its components are loaded.
You can create feature modules for you different functionalities which you dont want to load at start up. (That is done by lazy loading.)
So the structure will be kind of like this
Core module -> All components required at start up
Featured Modules -> Will load on demand later on.
In angular9, they have provided the feature to lazy load componenets as well. Now you can lazy load components even if the module is loaded.
https://johnpapa.net/angular-9-lazy-loading-components/

There is no strict rule. It depends on the components.
Usually it is a mix. A component that represents a "page" (e.g. the top level routes like your admin area) makes a good module. For "smaller" components used only from a single page it makes sense to put them into the same module.
Other components that are used multiple times from different "page" modules should get into their own module.
The size of the components is also a consideration. The larger a module gets the more it may be good to extract smaller modules.

Harp is not serving js files from public directory

I am trying to compile my app on harp js. here is my directory structure.
.
├── 404.html
├── _harp
│ ├── 404.jade
│ ├── _data.json
│ ├── _harp.json
│ ├── _layout.jade
│ ├── index.jade
│ ├── main.less
│ └── public
│ ├── css
│ │ ├── bootstrap.css
│ │ ├── font-awesome.min.css
│ │ ├── hoverex-all.css
│ │ ├── prettyPhoto.css
│ │ └── style.css
│ └── js
│ ├── bootstrap.min.js
│ ├── custom.js
│ ├── jquery.hoverdir.js
│ ├── jquery.hoverex.min.js
│ ├── jquery.isotope.min.js
│ ├── jquery.prettyPhoto.js
│ ├── modernizr.min.js
│ └── retina-1.1.0.js
├── index.html
├── main.css
└── public
├── css
│ ├── bootstrap.css
│ ├── font-awesome.min.css
│ ├── hoverex-all.css
│ ├── prettyPhoto.css
│ └── style.css
└── js
now when i try to compile the app using
harp compile _harp ./
It is not compiling the js in the js directory. as you can see in the directory tree. the js directory is always blank. I have checked the permission it seems everything what I am missing?

File structure for in-browser MVC applications

I'm building an in-browser MVC application which will eventually run on a mobile device via PhoneGap. The app will communicate with the API server but will otherwise be completely independent. When I develop standard server-side MVC applications in Rails, the models, views, and controllers are separated into distinct files and directories. What's the standard practice with in-browser MVC apps? Are the MVC components usually defined within a single JS file, or are they usually separated out?

During the development phase, yes javascript files should be separated and well documented..
You can use requirejs to load your modules/views/collections separately.
Here is a great tutorial about Asynchronous Module Definitions (AMD). It's mainly about how you would organize your application using modules. I suggest you read it.
Below is the sample project structure the tutorial's author uses:
├── js
│ ├── libs
│ │ ├── jquery
│ │ │ ├── jquery.min.js
│ │ ├── backbone
│ │ │ ├── backbone.min.js
│ │ └── underscore
│ │ │ ├── underscore.min.js
│ ├── models
│ │ ├── users.js
│ │ └── projects.js
│ ├── collections
│ │ ├── users.js
│ │ └── projects.js
│ ├── views
│ │ ├── projects
│ │ │ ├── list.js
│ │ │ └── edit.js
│ │ └── users
│ │ ├── list.js
│ │ └── edit.js
│ ├── router.js
│ ├── app.js
│ ├── main.js
│ ├── order.js
│ └── text.js
└── index.html
For the validation/deployment phase, use a grunt-like tool to launch automated tasks. Such as concatenating and minifying javascript files into a single one. (It takes around 30 seconds depending on how you've configured it)
Here is an example of a grunt file.

can not find module formidable [duplicate]

I'm starting to develop with node.j,I meet an issue regarding the using of the module 'formidable'.
I have this error:
Error: Cannot find module 'formidable'
Here is the module list installed using 'npm ls installed' :
├─┬ express#2.5.9
│ ├── connect#1.8.7
│ ├── mime#1.2.4
│ ├── mkdirp#0.3.0
│ └── qs#0.4.2
├── formidable#1.0.9
├─┬ node-inspector#0.1.10
│ ├── paperboy#0.0.3
│ └─┬ socket.io#0.8.7
│ ├── policyfile#0.0.4
│ ├── redis#0.6.7
│ └─┬ socket.io-client#0.8.7
│ ├── uglify-js#1.0.6
│ ├── websocket-client#1.0.0
│ └── xmlhttprequest#1.2.2
├─┬ npm#1.1.21
│ ├── abbrev#1.0.3
│ ├── archy#0.0.2
│ ├── block-stream#0.0.5
│ ├── chownr#0.0.1
│ ├── fstream#0.1.18
│ ├─┬ fstream-npm#0.0.6
│ │ └── fstream-ignore#0.0.5
│ ├── graceful-fs#1.1.8
│ ├── inherits#1.0.0
│ ├── ini#1.0.2
│ ├── lru-cache#1.0.5
│ ├── minimatch#0.2.2
│ ├── mkdirp#0.3.0
│ ├─┬ node-gyp#0.4.1
│ │ ├── ansi#0.0.4
│ │ └── glob#3.1.9
│ ├── node-uuid#1.3.3
│ ├── nopt#1.0.10
│ ├── proto-list#1.0.0
│ ├── read#0.0.2
│ ├── request#2.9.153
│ ├── rimraf#2.0.1
│ ├── semver#1.0.13
│ ├── slide#1.1.3
│ ├── tar#0.1.13
│ ├── uid-number#0.0.3
│ └── which#1.0.5
└─┬ socket.io#0.9.6
├── policyfile#0.0.4
├── redis#0.6.7
└─┬ socket.io-client#0.9.6
├─┬ active-x-obfuscator#0.0.1
│ └── zeparser#0.0.5
├── uglify-js#1.2.5
├─┬ ws#0.4.14
│ ├── commander#0.5.2
│ └── options#0.0.3
└── xmlhttprequest#1.2.2
I add that it is the only module who generate this error.
Also, I don't really understand the way are encapsulated some module, it appears that npm is installing the module directly in the directory I'm using the module installation command, and I notice that formidable has been installed in the express/connect/ module on its first installation.
Can you give me more information about the module installation tree.
Thank for your replies
Cheers

The accepted answer looks very comprehensive and correct, but this worked for me:
npm install -d
d stands for dependencies (I think)

To understand module resolution, have a look at the Modules documentation, especially Loading from node_modules Folders.
For example, if the file at '/home/ry/projects/foo.js' called require('bar.js'), then node would look in the following locations, in this order:
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
NPM takes advantage of this by installing modules into:
./node_modules/{module}
So, when you use npm install formidable, it will create and install the module into:
./node_modules/formidable
But, this means that only scripts within the current directory, including sub-directories, will succeed in using require('formidable'):
./foo.js
./lib/bar.js
./src/baz.js
./src/sub/qux.js
You can however install modules as "global," but you have to explicitly ask for it with -g or --global:
npm install -g formidable
Then, any script on the system should be able to require('formidable').
As for the tree output, you current have 5 installed modules available from the current directory:
express
formidable
node-inspector
npm
socket.io
Everything else in the tree is a list of these modules' dependencies, and their dependencies, etc., but only these 5 are available for require(...) within your scripts.

Optimal directory structure for app -- node + dojo: would this work?

I am trying to work out the best directory structure for a small Dojo application (it's a basic booking system).
I am just about finished writing login/registration.
Here is what I have now:
.
├── app
│ ├── client
│ │ ├── JsonRest.js
│ │ ├── lib
│ │ │ ├── defaultSubmit.js
│ │ │ ├── globals.js
│ │ │ ├── globalWidgets.js
│ │ │ ├── Logger.js
│ │ │ └── stores.js
│ │ ├── login.js
│ │ ├── main.css
│ │ ├── main.js
│ │ ├── register.js
│ │ ├── rrl.css
│ │ ├── TODO.txt
│ │ ├── validators.js
│ │ └── widgets
│ │ ├── _AjaxValidatorMixin.js
│ │ ├── AlertBar.js
│ │ ├── AppMainScreen.js
│ │ ├── BusyButton.js
│ │ ├── css
│ │ │ └── AlertBar.css
│ │ ├── Dashboard.js
│ │ ├── LoginForm.js
│ │ ├── RegisterForm.js
│ │ ├── SearchPage.js
│ │ ├── StackFading.js
│ │ ├── _StackFadingMixin.js
│ │ ├── TabFading.js
│ │ ├── templates
│ │ │ ├── LoginForm.html
│ │ │ ├── RetypePassword.html
│ │ │ └── SearchPage.html
│ │ ├── ValidationEmail.js
│ │ ├── ValidationPassword.js
│ │ ├── ValidationUsername.js
│ │ ├── ValidationWorkspace.js
│ └── server
│ ├── AppErrorHandler.js
│ ├── auth.js
│ ├── db.js
│ ├── globals.js
│ ├── node_modules
│ │ ├── express
│ │ ├── jade
│ │ ├── mongodb
│ │ └── mongoose
│ ├── public
│ │ ├── app -> ../../client/
│ │ └── libs -> ../../../libs
│ ├── routes
│ │ └── routes.js
│ ├── server.js
│ ├── test.js
│ └── views
│ ├── index.jade
│ ├── login.jade
│ └── register.jade
├── libs
├── build-report.txt
├── dojo -> dojo-1.7.1
├── dojo-1.7.1
│ ├── app -> ../../app/client
│ ├── dijit
│ ├── dojox
│ ├── dojo
│ └── util
└── dojo-1.8.0
├── app -> ../../app/client
├── dijit
├── dojox
├── dojo
└── util
The idea behind it is that:
the "app" directory will be in a git repository somewhere (it's about time I make one, actually). It has the directories "client" (all the client-side code) and "server" (the node code).
In "libs" I will add things like dgrid, etc. I also noticed that Dojo 1.8 can be loaded within node (!). I will play with this later -- exciting!
Now, here you can see that I basically used symbolic links to make things work.
SERVER side: Under "public", I had symlinks to "app" and "libs". That way, I can access, from HTML, things like /libs/dojo/dojox/form/resources/BusyButton.css, or (important!) /libs/dojo/dojo/dojo.js and /app/main.js (which then instances AppMainScreen with a simple require(["app/widgets/AppMainScreen" ], function( AppMainScreen){ ...
CLIENT side: I have a symlink to the latest Dojo (my boilerplate still has a problem with Dojo 1.8, so I am still using 1.7 for now). However, in order to make this work within the app:
require(["app/widgets/AppMainScreen" ], function( AppMainScreen){
I have a symlink to "app" within Dojo.
Now: I realise the basics (I think the symlink to "app" within Dojo is solved by simply using DojoConfig, for example). But... well, this is my current 100% unoptimised, never built tree.
I can ask you guys give me the tick of approval for this tree? Will it work once I start "building" things? (I am still miles away from doing it, but I will eventually otherwise my [pregnant] wife will go crazy!). Avoiding that symlink to "app" is one of the things I think I should do (but then again, do I need to?).
Thank you!
Merc.

While not being a fan (nor knowledgable at all) of node, it looks to me as there's a huuge javascript library :)
I'd suggest You should really consider making a buildprofile and use the prefix key to set the location of your scripts. As result of a build, you would automatically get an 'app' folder coexisting with dojo,dijit,dojox.
Actually, i would suggest that once there is a separate repository for your dojo application layer, simply do the checkout within the SDK root, e.g. :
wget download.dojotoolkit.org/dojotoolkit-1.7.2-src.tar.gz -O djsrc.tar.gz && tar xfz djsrc.tar.gz && rm djsrc.tar.gz
cd dojotoolkit-1.7.2-src/
svn checkout http://example/mylibrary app
sh utils/buildscripts/build.sh --profile app/package.profile --release /var/nodejs/docroot/lib/
There is no harm at all in developing your app.widgets somewhere else then in your main document root (/lib). You could simply setup one global variable that tells loader where to look.
If built, nothing should be nescessary, but as far as your current tree goes, try something like this
<script>
var isDevelopement = true;
var dojoConfig = {
packages : (isDevelopement) ? [ name: 'app', location: '/app/client/' ] : []
}
</script>