Webpack angular 4

app.module.ts

import {NativeScriptModule} from 'nativescript-angular/nativescript.module'; //this line always first !
import {NativeScriptFormsModule} from 'nativescript-angular/forms';
import {NativeScriptHttpModule} from 'nativescript-angular/http';
import {NativeScriptRouterModule} from 'nativescript-angular/router';
import {NgModule, APP_INITIALIZER, LOCALE_ID, InjectionToken} from '@angular/core';
import {RouterExtensions} from 'nativescript-angular/router/router-extensions';
import {registerElement} from 'nativescript-angular/element-registry';

//core
import {routes, navigateableComponents} from './app.routes';
import {CoreModule} from './frameworks/core/core.module';
...
...
import {TNSFontIconModule} from 'nativescript-ngx-fonticon';
import {AppComponent} from './app.component';

// general modules
export const API_ARTICLE = new InjectionToken<Article>('api.article');

export function contextLoad(contexts: Contexts) {
	contexts.init();
}

export function apiArticle(api: Api) {
	return new CrudApi('articles/article', api);
}

@NgModule({
	imports: [
		NativeScriptModule,
		NativeScriptFormsModule,
		NativeScriptHttpModule,
		NativeScriptRouterModule,
		NativeScriptRouterModule.forRoot(routes),
		NativeScriptUISideDrawerModule,
		NativeScriptUIListViewModule,
		CoreModule,
		TNSFontIconModule.forRoot({
			flaticon: 'fonts/flaticon.css'
		})
	],
	declarations: [
		//every directive usable in app needs to go here, specific directives go to specific modules
		...navigateableComponents,
		AppComponent
	],
	providers: [
		// app-wide services
		RouterExtensions,
		{provide: LOCALE_ID, useValue: 'cs-CZ'},
		{provide: API_ARTICLE, useFactory: apiArticle, deps: [Api]},
	],
	bootstrap: [AppComponent]
})

export class AppModule {}

package.json

{
  "private": true,
  "version": "0.1.3",
  "nativescript": {
    "id": "lukashlobil",
    "tns-android": {
      "version": "2.5.0"
    },
    "tns-ios": {
      "version": "2.5.0"
    }
  },
  "scripts": {
    "clean": "rm -rf platforms node_modules lib hooks",
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "lodash": "^4.16.4",
    "moment": "2.15.0",
    "nativescript-angular": "1.5.1",
    "nativescript-calendar": "^1.2.0",
    "nativescript-camera": "0.0.8",
    "nativescript-drop-down": "^1.3.2",
    "nativescript-geolocation": "^0.0.12",
    "nativescript-google-maps-sdk": "^1.4.1",
    "nativescript-loading-indicator": "^2.3.1",
    "nativescript-local-notifications": "^1.2.1",
    "nativescript-localstorage": "1.1.2",
    "nativescript-ngx-fonticon": "2.1.2-PR-26-3",
    "nativescript-orientation": "1.5.3",
    "nativescript-permissions": "1.2.2",
    "nativescript-phone": "1.2.3",
    "nativescript-plugin-firebase": "3.9.0",
    "nativescript-slides": "2.2.2",
    "nativescript-telerik-ui": "1.6.1",
    "nativescript-theme-core": "1.0.2",
    "nativescript-toasts": "1.0.2",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.2.0",
    "tns-core-modules": "2.5.2",
    "zone.js": "0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.0.0",
    "@ngtools/webpack": "1.2.13",
    "@types/lodash": "4.14.40",
    "babel-traverse": "6.22.1",
    "babel-types": "6.22.0",
    "babylon": "6.15.0",
    "copy-webpack-plugin": "~3.0.1",
    "extract-text-webpack-plugin": "~2.0.0-beta.4",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "~0.4.2",
    "nativescript-dev-webpack": "^0.3.7",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~1.6.0",
    "shelljs": "^0.7.0",
    "tslint": "^4.5.1",
    "typescript": "2.1.6",
    "webpack": "2.2.0",
    "webpack-sources": "~0.1.3"
  }
}

tsconfg.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "removeComments": true,
        "experimentalDecorators": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "importHelpers": true,
        "types": [
            "jasmine"
        ],
        "lib": [
            "es2015",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

tsconfig.aot.json

{
  "extend": "./tsconfig",
  "compilerOptions": {
	  "target": "es5",
	  "module": "es2015",
	  "moduleResolution": "node",
	  "sourceMap": false,
	  "emitDecoratorMetadata": true,
	  "experimentalDecorators": true,
	  "removeComments": true,
	  "noImplicitAny": false,
	  "suppressImplicitAnyIndexErrors": true,
	  "types": [],
    "baseUrl": ".",
    "paths": {
      "ui/*": ["node_modules/tns-core-modules/ui/*"],
      "platform": ["node_modules/tns-core-modules/platform"],
      "image-source": ["node_modules/tns-core-modules/image-source"],
      "xml": ["node_modules/tns-core-modules/xml"],
      "xhr": ["node_modules/tns-core-modules/xhr"],
      "text": ["node_modules/tns-core-modules/text"],
      "data": ["node_modules/tns-core-modules/data"],
      "fetch": ["node_modules/tns-core-modules/fetch"],
      "trace": ["node_modules/tns-core-modules/trace"],
      "fps-meter": ["node_modules/tns-core-modules/fps-meter"],
      "color": ["node_modules/tns-core-modules/color"],
      "application-settings": ["node_modules/tns-core-modules/application-settings"],
      "http": ["node_modules/tns-core-modules/http"],
      "camera": ["node_modules/tns-core-modules/camera"],
      "console": ["node_modules/tns-core-modules/console"],
      "timer": ["node_modules/tns-core-modules/timer"],
      "utils": ["node_modules/tns-core-modules/utils"],
      "location": ["node_modules/tns-core-modules/location"],
      "file-system": ["node_modules/tns-core-modules/file-system"],
      "application": ["node_modules/tns-core-modules/application"],
      "image-asset": ["node_modules/tns-core-modules/image-asset"],
      "connectivity": ["node_modules/tns-core-modules/connectivity"],
      "globals": ["node_modules/tns-core-modules/globals"]
    }
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true,
    "genDir": "./"
  }
}

webpack.common.js

var webpack = require("webpack");
var nsWebpack = require("nativescript-dev-webpack");
var nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
var path = require("path");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var AotPlugin = require("@ngtools/webpack").AotPlugin;

module.exports = function (platform, destinationApp) {
    if (!destinationApp) {
        //Default destination inside platforms/<platform>/...
        destinationApp = nsWebpack.getAppPath(platform);
    }
    var entry = {};
    //Discover entry module from package.json
    entry.bundle = "./" + nsWebpack.getEntryModule();
    //Vendor entry with third party libraries.
    entry.vendor = "./vendor";
    //app.css bundle
    entry["app.css"] = "./app.css";

    var plugins = [
        new ExtractTextPlugin("app.css"),
        //Vendor libs go to the vendor.js chunk
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor"]
        }),
        //Define useful constants like TNS_WEBPACK
        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
        }),
        //Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            { from: "app.css" },
            { from: "css/**" },
            { from: "fonts/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "**/*.xml" },
        ], { ignore: ["App_Resources/**"] }),
        //Generate a bundle starter script and activate it in package.json
        new nsWebpack.GenerateBundleStarterPlugin([
            "./vendor",
            "./bundle",
        ]),

        //Angular AOT compiler
        new AotPlugin({
            tsConfigPath: "tsconfig.aot.json",
            entryModule: path.resolve(__dirname, "app/app.module#AppModule"),
            typeChecking: false
        }),
        new nsWebpack.StyleUrlResolvePlugin({platform}),
    ];

    if (process.env.npm_config_uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({
            minimize: true
        }));

        //Work around an Android issue by setting compress = false
        var compress = platform !== "android";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: nsWebpack.uglifyMangleExcludes,
            },
            compress: compress
        }));
    }

    return {
        context: path.resolve("./app"),
        target: nativescriptTarget,
        entry: entry,
        output: {
            pathinfo: true,
            path: path.resolve(destinationApp),
            libraryTarget: "commonjs2",
            filename: "[name].js",
        },
        resolve: {
            //Resolve platform-specific modules like module.android.js
            extensions: [
                ".aot.ts",
                ".ts",
                ".js",
                ".css",
                "." + platform + ".ts",
                "." + platform + ".js",
                "." + platform + ".css",
            ],
            //Resolve {N} system modules from tns-core-modules
            modules: [
                "node_modules/tns-core-modules",
                "node_modules"
            ]
        },
        node: {
            //Disable node shims that conflict with NativeScript
            "http": false,
            "timers": false,
            "setImmediate": false,
            "fs": "empty",
        },
        module: {
            loaders: [
                {
                    test: /\.html$|\.xml$/,
                    loaders: [
                        "raw-loader",
                    ]
                },
                // Root app.css file gets extracted with bundled dependencies
                {
                    test: /app\.css$/,
                    loader: ExtractTextPlugin.extract([
                        "resolve-url-loader",
                        "nativescript-css-loader",
                        "nativescript-dev-webpack/platform-css-loader",
                    ]),
                },
                // Other CSS files get bundled using the raw loader
                {
                    test: /\.css$/,
                    exclude: /app\.css$/,
                    loaders: [
                        "raw-loader",
                    ]
                },
                // Compile TypeScript files with ahead-of-time compiler.
                {
                    test: /\.ts$/,
                    loaders: [
                        "nativescript-dev-webpack/tns-aot-loader",
                        "@ngtools/webpack",
                    ]
                },
                // SASS support
                {
                    test: /\.scss$/,
                    loaders: [
                        "raw-loader",
                        "resolve-url-loader",
                        "sass-loader"
                    ]
                }
            ]
        },
        plugins: plugins,
    };
};