Download the plunker angular setup by visiting https://plnkr.co/ and clicking the ‘Launch the Editor’ button, then in the top menu choose New->Angular , after it will finish loading click the download button in the top right corner to download this setup as a zip file, create folder for your project and extract it there , and for converting it to local development setup follow those steps:

In index.html

  1. Change from <base href="." /> to <base href="/" />
  2. Add bellow this: <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
  3. Change from <script src="config.js"></script> to <script src="systemjs.config.js"></script>
    Change also the file name !
  4. Change from: System.import('app')
    to: System.import('src/main.js')

In systemjs.config.js (you have changed to this name from config.js)

  1. Delete (or comment) the first lines in the System.config method:
    transpiler: 'typescript',
    typescriptOptions: {
    emitDecoratorMetadata: true
    },
  2. If you don't intend to use angular animations then delete (or comment) those lines:
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
  3. If you don't intend to use angular testing packages then delete (or comment) those lines:
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
  4. Change from:
    app: {
       main: './main.ts',
       defaultExtension: 'ts'
    },
    to:
    app: {
       defaultExtension: 'js',
       meta: {
         './*.js': {
           loader: 'systemjs-angular-loader.js'
         }
       }
    },
    Create the file systemjs-angular-loader.js and copy its content from here:
    https://github.com/angular/quickstart/blob/master/src/systemjs-angular-loader.js

Under src folder

Create the file tsconfig.json and copy its content from here:
https://github.com/angular/quickstart/blob/master/src/tsconfig.json

Back in the root folder

  1. Create new file: server.js and put in it this content:
    process.env.NODE_ENV = 'production';
    var history = require('connect-history-api-fallback');
    var express = require('express');
    var app = express();
    app.use(history({ htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] }));
    app.use(express.static(__dirname));
    app.listen(3000);
    console.log('App listening on port 3000');
  2. Create new file: package.json and put in it this content:
    {
       "name": "package-name",
       "version": "1.0.0",
       "description": "Description of your package",
       "scripts": {
         "build": "tsc -p src/",
         "build:watch": "tsc -p src/ -w",
         "start": "concurrently \"node ./server\" \"node ./node_modules/browser-sync/dist/bin start --proxy localhost:3000 --files src/**/*.*\" \"npm run build:watch\""
       },
       "author": "Your Name",
       "license": "MIT",
       "dependencies": {
         "connect-history-api-fallback": "^1.5.0",
         "express": "4.15.2"
       },
       "devDependencies": {
         "browser-sync": "^2.23.5",
         "concurrently": "^3.2.0"
       }
    }
    Install the dependencies by running npm install and after that run the application by running npm start – if everything is OK your browser will be launched automatically with your starting project page (if it doesn’t make refresh to the page, sometimes it is needed in the initial load).

Notes:

  1. The plunker setup uses CDN from https://unpkg.com/ - of course you can change this to be installed locally in your computer by adding them as dependencies (some of them needs to be in the dependencies section and some in the devDependencies section) in the package.json file and installing them with npm install, then you also need to change line in the systemjs.config.js file, from: paths: { 'npm:': 'https://unpkg.com/' }, to: paths: { 'npm:': ' node_modules/' },
  2. Since the CDN packages defined in the systemjs.config.js file are not available in compilation time, you'll get compile errors (in the command line output after running npm start and in typescript supported editors 'problems' tab like existed in VS Code, you will not get any error in the browser console) like this error message: Cannot find module '@angular/…' – ignore them they are harmless!