Angular2 supports Typescript, Of course Typescript has advantages for better coding. Here I am not going discuss advantages of Typescript.  Lets create basic Angular2 project for both development and production.
Webpack - Click here to read webpack setup for Angular2

Project structure 

Observe below diagram. 
  • app folder - this contains Typescript files for app functionality. Here main.ts is the starting probe of our app
  • css folder - contains styles required for app
  • dist folder - contains production version of the project (generated from development files)
  • production folder - contains production suitable HTML and TS files 
  • index.html - HTML file used in development mode
  • package.json - contains meta data and dependencies
  • systemjs.config.js - SystemJS configuration file
  • tsconfig.json - Typescript configuration file
  • typings.json - Typings dependencies

Download the project

I have uploaded this project to github. You can download it from here

by using git :

git clone https://github.com/SodhanaLibrary/angular2-prod-dev-setup.git

Install dependencies :

npm install
This will install all dependencies including typings

Run this project :

npm start
Above command will transpile Typescript files to JS files and run the lite-server. Now you can see the localhost with angular2.

Generate production version :

npm run build_prod
Above command will create dist folder with all its dependencies and css files.  Now just open index.html of dist folder in browser, You can your angular app running

Index.html - development VS production

index.html code of development and production is different. Observe below code.

Development index.html

Here we need to have systemjs configuration file. SystemJS will load our main angular application based on the configuration
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Production index.html

Here you don't need to import system js configuration file, you will directly import bundle.min.js file. This bundle js file contains all javascript code including libraries. It will be generated by browserify while generating production version. 
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="dependencies/shim.min.js"></script>
    <script src="dependencies/zone.js"></script>
    <script src="dependencies/Reflect.js"></script>
    <script src="dependencies/system.src.js"></script>

  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <script src="bundle.min.js"></script>
  </body>
</html>

Main.ts - development vs production

Maint.ts is the app starting point. development version is in app folder, production version is in production folder.

development main.ts

AppModule is the starting point of the app
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Production main.ts

Here enableProdMode is called. Which will turn off assertions and checks, and improves performance. 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from '../app/app.module';
import {enableProdMode} from '@angular/core';

enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Package.json

Finally package.json which will have all commands, metadata and dependencies. Find below for commands
    {
    "clean": "rm -rf dist && mkdir dist && mkdir dist/dependencies",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "build": "npm run clean && tsc",
    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
    "build_prod": "npm run build && browserify -s main production/main.prod.js > dist/bundle.js && npm run minify && cp -R css dist/css && cp production/index.html dist/ && npm run build_prod_depds",
    "build_prod_depds": "cp node_modules/core-js/client/shim.min.js dist/dependencies/ && cp node_modules/zone.js/dist/zone.js dist/dependencies/ && cp node_modules/reflect-metadata/Reflect.js dist/dependencies/ && cp node_modules/systemjs/dist/system.src.js dist/dependencies/ && cp systemjs.config.js dist/"
    }

5 comments:

  1. Thank you for your post.
    I modified the package.json in order to make it working on windows

    {
    "name": "angular-quickstart",
    "version": "1.0.0",
    "scripts": {
    "clean": "rd /s /q dist && mkdir dist && mkdir dist\\dependencies",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "build": "npm run clean && tsc",
    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
    "build_prod": "npm run build && browserify -s main production\\main.prod.js > dist\\bundle.js && npm run minify && xcopy /I css dist\\css && copy production\\index.html dist\\ && npm run build_prod_depds",
    "build_prod_depds": "copy node_modules\\core-js\\client\\shim.min.js dist\\dependencies\\ && copy node_modules\\zone.js\\dist\\zone.js dist\\dependencies\\ && copy node_modules\\reflect-metadata\\Reflect.js dist\\dependencies\\ && copy node_modules\\systemjs\\dist\\system.src.js dist\\dependencies\\ && copy systemjs.config.js dist\\"
    },
    ...

    ReplyDelete
  2. thank you, but now, how i can to up my app to host?

    ReplyDelete
    Replies
    1. run "npm run build_prod" which creates dist folder with production ready files, you can host these files on your web server

      Delete

Blogroll

Follow this blog by Email

Popular Posts