chore(renderer): update to webpack4 and NG 6

Author: sis0k0

e2e/renderer/app/vendor-platform.android.ts

@@ -5,8 +5,6 @@ const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sas
 global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
-require("./vendor-platform");
-
 require("reflect-metadata");
 require("@angular/platform-browser");
 require("@angular/core");

e2e/renderer/app/vendor-platform.ios.ts

@@ -6,28 +6,29 @@
   "nativescript": {
     "id": "org.nativescript.renderer",
     "tns-android": {
-      "version": "3.4.1-2018-02-06-02"
+      "version": "4.1.0-2018.4.13.1"
     }
   },
   "dependencies": {
-    "@angular/common": "~5.2.0",
-    "@angular/compiler": "~5.2.0",
-    "@angular/core": "~5.2.0",
-    "@angular/forms": "~5.2.0",
-    "@angular/http": "~5.2.0",
-    "@angular/platform-browser": "~5.2.0",
-    "@angular/platform-browser-dynamic": "~5.2.0",
-    "@angular/router": "~5.2.0",
+    "@angular/common": "~6.0.0-rc.3",
+    "@angular/compiler": "~6.0.0-rc.3",
+    "@angular/core": "~6.0.0-rc.3",
+    "@angular/forms": "~6.0.0-rc.3",
+    "@angular/http": "~6.0.0-rc.3",
+    "@angular/platform-browser": "~6.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "~6.0.0-rc.3",
+    "@angular/router": "~6.0.0-rc.3",
     "nativescript-angular": "file:../../nativescript-angular",
     "nativescript-intl": "^3.0.0",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "^5.5.0",
+    "rxjs": "~6.0.0-rc.1",
     "tns-core-modules": "next",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~5.2.0",
-    "@ngtools/webpack": "~1.9.4",
+    "@angular-devkit/core": "~0.5.5",
+    "@angular/compiler-cli": "~6.0.0-rc.3",
+    "@ngtools/webpack": "~6.0.0-rc.3",
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
@@ -36,25 +37,27 @@
     "babylon": "6.17.4",
     "chai": "~4.1.1",
     "chai-as-promised": "~7.1.1",
+    "clean-webpack-plugin": "~0.1.19",
     "colors": "^1.1.2",
-    "copy-webpack-plugin": "~4.3.0",
+    "copy-webpack-plugin": "~4.5.1",
     "css-loader": "~0.28.7",
     "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "mocha": "~3.5.0",
     "mocha-junit-reporter": "^1.13.0",
     "mocha-multi": "^0.11.0",
     "nativescript-dev-appium": "next",
-    "nativescript-dev-typescript": "~0.4.0",
-    "nativescript-dev-webpack": "^0.9.2",
+    "nativescript-dev-typescript": "~0.7.1",
+    "nativescript-dev-webpack": "github:nativescript/nativescript-dev-webpack#sis0k0/webpack4",
     "nativescript-worker-loader": "~0.8.1",
     "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.2.1",
+    "resolve-url-loader": "~2.3.0",
     "tslib": "^1.7.1",
-    "typescript": "~2.6.2",
-    "uglifyjs-webpack-plugin": "~1.1.6",
-    "webpack": "~3.10.0",
+    "typescript": "~2.7.2",
+    "uglifyjs-webpack-plugin": "~1.2.4",
+    "webpack": "~4.5.0",
     "webpack-bundle-analyzer": "^2.9.1",
+    "webpack-cli": "~2.0.14",
     "webpack-sources": "~1.1.0"
   },
   "scripts": {

e2e/renderer/app/vendor.ts

@@ -1,10 +1,10 @@
-const { resolve, join  } = require("path");
+const { relative, resolve, join  } = require("path");
 
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
@@ -14,23 +14,60 @@ module.exports = env => {
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
+
     const platforms = ["ios", "android"];
-    const { snapshot, uglify, report, aot } = env;
-    const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" };
+    const projectRoot = __dirname;
+    // Default destination inside platforms/<platform>/...
+    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform));
+    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
+
+    const {
+        // The 'appPath' and 'appResourcesPath' values are fetched from
+        // the nsconfig.json configuration file
+        // when bundling with `tns run android|ios --bundle`.
+        appPath = "app",
+        appResourcesPath = "app/App_Resources",
+
+        // Aot, snapshot, uglify and report can be enabled by providing
+        // the `--env.snapshot`, `--env.uglify` or `--env.report` flags
+        // when running 'tns run android|ios'
+        aot,
+        snapshot,
+        uglify,
+        report,
+    } = env;
+    const ngToolsWebpackOptions = { tsConfigPath: join(__dirname, "tsconfig.json") };
+
+    const appFullPath = resolve(projectRoot, appPath);
+    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
+
+    const entryModule = aot ?
+        nsWebpack.getAotEntryModule(appFullPath) : 
+        `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const entryPath = `./${entryModule}`;
+    const vendorPath = `./vendor.ts`;
 
     const config = {
-        context: resolve("./app"),
+        mode: "development",
+        context: appFullPath,
+        watchOptions: {
+            ignored: [
+                appResourcesFullPath,
+                // Don't watch hidden files
+                "**/.*",
+            ]
+        },
         target: nativescriptTarget,
         entry: {
-            bundle: aot ? "./main.aot.ts" : "./main.ts",
-            vendor: "./vendor",
+            bundle: entryPath,
+            vendor: vendorPath,
         },
         output: {
             pathinfo: true,
-            // Default destination inside platforms/<platform>/...
-            path: resolve(nsWebpack.getAppPath(platform)),
+            path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
+            globalObject: "global",
         },
         resolve: {
             extensions: [".ts", ".js", ".scss", ".css"],
@@ -40,7 +77,7 @@ module.exports = env => {
                 "node_modules",
             ],
             alias: {
-                '~': resolve("./app")
+                '~': appFullPath
             },
             // don't resolve symlinks to symlinked modules
             symlinks: false
@@ -55,6 +92,30 @@ module.exports = env => {
             "timers": false,
             "setImmediate": false,
             "fs": "empty",
+            "__dirname": false,
+        },
+        devtool: "none",
+        optimization: {
+            runtimeChunk: { name: "vendor" },
+            splitChunks: {
+                cacheGroups: {
+                    common: {
+                        name: "common",
+                        chunks: "all",
+                        test: /vendor/,
+                        enforce: true,
+                    },
+                }
+            },
+            minimize: !!uglify,
+            minimizer: [
+                // Override default minimizer to work around an Android issue by setting compress = false
+                new UglifyJsPlugin({
+                    uglifyOptions: {
+                        compress: platform !== "android"
+                    }
+                })
+            ],
         },
         module: {
             rules: [
@@ -81,32 +142,40 @@ module.exports = env => {
                 { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
 
                 // Compile TypeScript files with ahead-of-time compiler.
-                { test: /.ts$/, use: [
-                    "nativescript-dev-webpack/moduleid-compat-loader",
-                    { loader: "@ngtools/webpack", options: ngToolsWebpackOptions },
-                ]},
+                {
+                    test: /.ts$/, use: [
+                        "nativescript-dev-webpack/moduleid-compat-loader",
+                        { loader: "@ngtools/webpack", options: ngToolsWebpackOptions },
+                    ]
+                },
             ],
         },
         plugins: [
-            // 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",
             }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin([`${dist}/**/*`]),
+            // Copy native app resources to out dir.
+            new CopyWebpackPlugin([
+                {
+                    from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
+                    to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
+                    context: projectRoot
+                },
+            ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "App_Resources/**" },
                 { from: "fonts/**" },
                 { from: "**/*.jpg" },
                 { from: "**/*.png" },
                 { from: "**/*.xml" },
-            ]),
+            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([
                 "./vendor",
+                "./common",
                 "./bundle",
             ]),
             // Support for web workers since v3.2
@@ -119,45 +188,52 @@ module.exports = env => {
                     platformOptions: {
                         platform,
                         platforms,
-                        // ignore: ["App_Resources"]
                     },
                 }, ngToolsWebpackOptions)
             ),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
             new nsWebpack.WatchStateLoggerPlugin(),
         ],
     };
+
+    if (platform === "android") {
+        // Add your custom Activities, Services and other android app components here.
+        const appComponents = [
+            "tns-core-modules/ui/frame",
+            "tns-core-modules/ui/frame/activity",
+        ];
+
+        // Require all Android app components
+        // in the entry module (bundle.ts) and the vendor module (vendor.ts).
+        config.module.rules.unshift({
+            test: new RegExp(`${entryPath}|${vendorPath}`),
+            use: {
+                loader: "nativescript-dev-webpack/android-app-components-loader",
+                options: { modules: appComponents }
+            }
+        });
+    }
+
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({
             analyzerMode: "static",
             openAnalyzer: false,
             generateStatsFile: true,
-            reportFilename: join(__dirname, "report", `report.html`),
-            statsFilename: join(__dirname, "report", `stats.json`),
+            reportFilename: resolve(projectRoot, "report", `report.html`),
+            statsFilename: resolve(projectRoot, "report", `stats.json`),
         }));
     }
+
     if (snapshot) {
         config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
-            chunk: "vendor",
-            projectRoot: __dirname,
+            chunks: [ "vendor", "common" ],
+            projectRoot,
             webpackConfig: config,
             targetArchs: ["arm", "arm64", "ia32"],
-            tnsJavaClassesOptions: { packages: ["tns-core-modules" ] },
             useLibs: false
         }));
     }
-    if (uglify) {
-        config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
-
-        // Work around an Android issue by setting compress = false
-        const compress = platform !== "android";
-        config.plugins.push(new UglifyJsPlugin({
-            uglifyOptions: {
-                mangle: { reserved: nsWebpack.uglifyMangleExcludes },
-                compress,
-            }
-        }));
-    }
+
     return config;
 };