We Keep Coding

How to bundle asset folder in angular4 app?

I am using Angular4 App with Webpack. When I build the application using ng-build --prod command, the assets folder is coming in the dist folder. But, the css & js files are not in the bundled or minified form.
I would like to know how to bundle & minify the js & css files in my assets folder?

I guess your js and css files in the assets folder are external dependencies.
You can add these in the .angular-cli.json file. They will will be compiled automatically in the scripts.bundle.js for Javscript respectively in the styles.bundle.js for CSS.
Go to .angular-cli.json and add for Javascript:
"scripts": [
"path/to/your/js/file"
],
and for CSS files:
"styles": [
"path/to/your/css/file"
],
You should not add external dependencies to the assets folder.
Regards

Ember build output (dist folder)

In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?

What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.

As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).

ember-cli where to put images

In the ember-cli folder structure where should I put images?
/app
/bower_components
/config
/dist
/node_modules
/public
/tests
/vendor
I am using ember-cli version 1.13.1.

Create a folder inside public -> public/assets/images/, and place your images inside. You can then access them in the browser using /assets/images/imagename.png
Source from the ember-cli documentation it states:
Raw Assets
public/assets vs app/styles
To add images, fonts, or other assets, place them in the public/assets directory. For example, if you place logo.png in public/assets/images, you can reference it in templates with assets/images/logo.png or in stylesheets with url('/assets/images/logo.png').

How to handle angular module dependencies in other directories?

Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?

You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.

They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.

grunt and javascript partial file

In my project I have directory with partials of javascript files.
In this directory I have files like:
_register.js, _user.js, _cart.js, _common.js
and I wanna make some full files
user.js must have _user.js, _common.js, _register.js
product.js must have _user.js, _common.js, _cart.js
and this should be compiled to 2 directories
dev/ and prod/
in dev I must have normal javascript and in prod I must have minified versions, how to get it with grunt?