root  | |___ config |     |___helpers, webpack.common, webpack.dev, webpack.prod | |___ dist |     |___ vendor.js, pollyfils.js | |___ src |     |___ app |     |       |___ components |     |       |        |___ *different types of components, each is lazy loaded, has a nested ng-view & its own module  |     |       |___ configurations |     |       |          |___ app.config.module |     |       |          |___ Response_Interfaces |     |       |___ rdx |     |       |       |___ actions (root store)             |     |       |       |___ reducers (root store, includes selectors)  |     |       |       |___ FEATURE FOLDERS (user, costumer, geo etc...) |     |       |___ shared |     |       |        |___ components |     |       |        |     |___ input fields (module) |     |       |        |     |___ modals (module) |     |       |        |     |___ components module (input fields module, modals module) |     |       |        |___ directives |     |       |        |     |___ click outside directive |     |       |        |     |___ image src directive |     |       |        |     |___ directives module |     |       |        |___ pipes |     |       |        |     |___ costume time stamp pipe (other directives as well)  |     |       |        |     |___ directives module |     |       |        |___ services |     |       |               |___ auth guard |     |       |               |___ home page navigate |     |       |               |___ interceptors |     |       |               |___ storage services (local/session storage) |     |       |               |___ language support |     |       |               |___ rtl support |     |       |               |___ shared style |     |       |               |___ shared services module |     |       |___ app.module, app.component, app.routing.module, app.html

webpack.config webpack - common/dev/prod environments webpack - helpers webpack - plugins webpac-dev-server Webpack Config In the package.json in any script that contains the command of "webpack", node will run the wepack compiler using the webpack.config.js script, that should be in the root of project together with package.json file.   The webpack.config.js should export an object that complies with webpack object convention, and which will be use by webpack to determine the steps to take to compile the project. common/dev/prod environments A preffered way to load the webpack object is by required environment, mainly production & development environments. This is done by creating 3 seperate files (under root/config ), one is webpack.common to hold the common steps for both environments, a webpack.dev for the development environment and a webpack.production. both the webpack.dev and the webpack.prod will import the webpack.common and merge it with their own object. Then in the package.json you could either define two different scripts for dev & production, each will import specifically from either the webpack.prod or the webpack.dev by path. example:                                 "build": " webpack --config config/webpack.prod.js --progress --profile --bail",                                 "build:dev": "webpack --config config/webpack.dev.js --progress --profile" Or you could pass the arguments to webpack inside the package.json script itself. example:                                webpack --env.NODE_ENV=local --env.production --progress You can see in the example above the part that says:    --env.NODE_ENV=local which assign a local value to nodes NODE_ENV variable, and the part that says: --env.production  which creates a production veriable but leaves it empty. But there a little bit more to it... in order for this to work we need to adjust the webpack.config.js to export a function instead of an object. This exported function will decide dynamically which object to return depending on the environment variable. example: webpack.config.js const path = require('path'); const dev = require('path/to/dev');               // object of common & dev const prod = require('path/to/prod')           // object of common & prod module.exports = env => {                                                   // Use env. here:                                                  console.log('NODE_ENV: ', env.NODE_ENV);  // 'local'                                                  console.log('Production: ', env.production); // true                                                  if (env.production) {                                                      return prod ;                                                  } else {                                                      return dev ;                                                }                                         };   Helpers The helpers.js file contains helper functions to determine node related parameters, such as path resolving and other resolving functions that depend on the running machine node environment. example of this file: helpers.js var path = require('path'); var _root = path.resolve(__dirname, '..'); function root(args) {                                      args = Array.prototype.slice.call(arguments, 0);                                      return path.join.apply(path, [_root].concat(args)); } exports.root = root; You can see this file uses nodes path function to get the root path (where package json is), and then manipulates it using the root function which it exports. example of use in webpack.common: // html loader {      test: /\.html$/,     loader: 'raw-loader',     exclude: [                        helpers.root('src/index.html')     ] } Plugins  Webpack offers a bunch of plugins to preforms operations on the pre/post compiled code such as: webpack-merge (merges webpack objects), extract-text-webpack-plugin (extracts text from files using a settings object and bundles it into a bundle). And you can also define your own plugins using webpack.DefinePlugin  You use this plugins inside the plugins property of the webpack object, with the new operator (after all were building an object). example: plugins: [                      new ExtractTextPlugin('[name].css'),                       new webpack.DefinePlugin({                                                                            'process.env': {                                                                                                         'ENV': JSON.stringify(ENV),                                                                                                         'APP_CONFIG': JSON.stringify(APP_CONFIG)                                                                                                       }                                                                         }) ]   *FOOT NOTE: REASERCH HOW TO DEFINE YOUR OWN WEBPACK PLUGINS webpac-dev-server the webpac-dev-server is a node_module installed seperatly, and a  webpack-dev-middleware  from webpack, which provides a development server with live reload. it can take webpack params just the same way as webpack, and it has its own params for functionality such as what directories to listen to changes on. *FOOT NOTE: RESEARCH ABOUT webpack-dev-middleware

tsconfig.json The tsconfig.json file, contains the instructions on how to compile a Typescript project into Javascript and the file paths to compile.  The presence of the tsconfig.json file indicates a Typescript project, and should be found in the root folder of your typescript project.

TSLint TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters. The tslint.json file in the root of the project, contains the set of rules, to which your IDE and typescript compiler will comply to when showing syntax errors for example, or when compiling your project and show syntax warnings. The tslint is dependent on typescript tsc.

Package.json The file which defines your project. Lists all its dependencies, for both dev environment and production environment, that should be installed with npm install. it also specifies node scripts to run in the different life cycles of the project. such scripts are: install - goes over dependencies and installes them preinstall - node script to run prior to running the install script. postinstall - node script to run after installation of node modules finished. uninstall - remove all node modules preuninstall - run script before uninstall operation postuninstall - run script after uninstall. You can also define your own scripts to use with in these scripts. for example: "build" : "node rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", "postinstall" : "build" In the above example we wrote a new script called build where we first run node rimraf dist which clears the "dist" folder, then we run webpack --config config/webpack.prod.js --progress --profile --bail which runs the webpack compiler with a specified path to its config file (this process will refill the dist folder). Then we use the new build script inside the postinstall script. this will have the effect of the project building right after the install process finishes. devDependencies When specifying dependencies in you package json you should do that in two properties the dependencies property and the devDependencies  property. The devDependency object is different than the dependencies object by that that it will only install using the install command, it will not install when passing the --production flag to the install command, or when installing a package using the npm install "$package" command thus providing an install environment for development. In the devDependencies object you should define test-packages for testing, transpiles for your project, development servers, and other packages you need for development purposses only.

app folder assets folder environment folder index.html main.ts polyfills.ts vendor.ts app folder The folder that holds the project. should contain the app.module at its root, which is bootstrapped by the main.ts file in the src folder root.   main.ts webpack should get at-list one entry point  path from where to start the execution of compiling, this path should be to the main.ts file which should bootstrap the application.  When webpack reads this file it sees the module being bootstrapped, then it start iterating over the modules dependencies and their dependencies chunking the files together in order and regarding the webpack.config rules.  An example of a minimal main.ts file should look something like this: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { AppModule } from './app/app.module'; if (process.env.ENV === 'production') {       enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule); You can see this file can be also used to do some definitions on the compiling process, in this case using enableProdMode from angulars core module. FOOTNOTE! READ ABOUT  enableProdMode  it then traverses the AppModule module to get further dependencies, chunking them together, resulting in a big main.js  which will be included in the final index.html file located in the dist folder. vendor.ts Here you can chunk together common dependencies, or framework dependencies that are prevailent troughout the application, into one file that will be loaded prior to the application file. When passing the path to this file in the entry point in the webpack config, you should do that before specifying the path to the main.ts file, this way the compiler will recognize dependencies already loaded into the vendor.js chunk, and will ignore them when traversing trough the module dependencies of main.ts. example: // Angular import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; import '@angular/router'; // RxJS import 'rxjs'; // jquery import 'jquery';   all of the above dependencies will loaded into one chunk in the vendor.js file and will be ignored from being loaded into the main.js chunk. polyfills.ts Polyfills in angular are few lines of code which make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers. Polyfills.ts was provided by angular to help you do away with need to specifically setup everything.

pollyfils.js - compiled junk. see src folder vendor.js - compiled junk. see src folder main.js - compiled junk. see src folder

components folder smart components dumb components nested views lazy loaded modules configurations folder app-config.module response-interface.ts rdx folder feature stores typed actions reducers selectors shared folder dumb components Input fields modal stars component shared services auth-guards interceptors lang support rtl support session-storage service decorators home-page navigate service shared styles shared.module