update for NS 5+

Author: PeterStaev

.travis.yml

@@ -5,7 +5,6 @@ android:
     - tools
     - platform-tools
     - build-tools-28.0.3
-    - android-23
     - android-28
     - extra-android-m2repository
 

demo-ng/package-lock.json

@@ -5,52 +5,41 @@
   "repository": "<fill-your-repository-here>",
   "nativescript": {
     "id": "com.tangrainc.maskedtextfielddemong",
-    "tns-android": {
-      "version": "4.0.1"
-    },
     "tns-ios": {
-      "version": "4.0.1"
+      "version": "5.0.0"
+    },
+    "tns-android": {
+      "version": "5.0.0"
     }
   },
   "dependencies": {
-    "@angular/animations": "~5.2.0",
-    "@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",
-    "nativescript-angular": "^5.3.0",
+    "@angular/animations": "~7.0.0",
+    "@angular/common": "~7.0.0",
+    "@angular/compiler": "~7.0.0",
+    "@angular/core": "~7.0.0",
+    "@angular/forms": "~7.0.0",
+    "@angular/http": "~7.0.0",
+    "@angular/platform-browser": "~7.0.0",
+    "@angular/platform-browser-dynamic": "~7.0.0",
+    "@angular/router": "~7.0.0",
+    "nativescript-angular": "^7.0.3",
     "nativescript-masked-text-field": "file:../bin/dist",
     "nativescript-theme-core": "^1.0.4",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "^5.5.0",
-    "tns-core-modules": "~4.0.1",
-    "zone.js": "^0.8.4"
+    "rxjs": "^6.3.3",
+    "tns-core-modules": "^5.0.5",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^5.2.11",
-    "@ngtools/webpack": "~1.9.4",
+    "@angular/compiler-cli": "~7.0.0",
+    "@ngtools/webpack": "~7.0.0",
     "babel-traverse": "6.24.1",
     "babel-types": "6.24.1",
     "babylon": "6.17.0",
-    "clean-webpack-plugin": "~0.1.19",
-    "copy-webpack-plugin": "~4.3.0",
-    "css-loader": "~0.28.7",
-    "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "nativescript-css-loader": "~0.26.0",
-    "nativescript-dev-typescript": "^0.7.1",
-    "nativescript-dev-webpack": "^0.11.0",
-    "nativescript-worker-loader": "~0.8.1",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.2.1",
-    "typescript": "~2.6.2",
-    "uglifyjs-webpack-plugin": "~1.1.6",
-    "webpack": "~3.10.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-sources": "~1.1.0"
+    "nativescript-dev-typescript": "^0.7.8",
+    "nativescript-dev-webpack": "^0.18.2",
+    "typescript": "~3.1.1"
   }
 }

demo-ng/package.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "module": "es2015",
+        "moduleResolution": "node"
+    }
+}

demo-ng/tsconfig.tns.json

@@ -1,23 +1,29 @@
-const { relative, resolve, join  } = require("path");
+const { join, relative, resolve, sep } = require("path");
 
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const { AngularCompilerPlugin } = require("@ngtools/webpack");
 
 module.exports = env => {
+    // Add your custom Activities, Services and other Android app components here.
+    const appComponents = [
+        "tns-core-modules/ui/frame",
+        "tns-core-modules/ui/frame/activity",
+    ];
+
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
 
-    const platforms = ["ios", "android"];
     const projectRoot = __dirname;
-    nsWebpack.loadAdditionalPlugins({ projectDir: projectRoot });
 
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
@@ -30,21 +36,37 @@ module.exports = env => {
         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,
+        // You can provide the following flags when running 'tns run android|ios'
+        aot, // --env.aot
+        snapshot, // --env.snapshot
+        uglify, // --env.uglify
+        report, // --env.report
+        sourceMap, // --env.sourceMap
+        hmr, // --env.hmr,
     } = env;
-    const ngToolsWebpackOptions = { tsConfigPath: join(__dirname, "tsconfig.json") };
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
+    const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const entryPath = `.${sep}${entryModule}`;
+
+    const ngCompilerPlugin = new AngularCompilerPlugin({
+        hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
+        platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
+        mainPath: resolve(appPath, entryModule),
+        tsConfigPath: join(__dirname, "tsconfig.tns.json"),
+        skipCodeGeneration: !aot,
+        sourceMap: !!sourceMap,
+    });
+
     const config = {
+        mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -54,16 +76,14 @@ module.exports = env => {
         },
         target: nativescriptTarget,
         entry: {
-            bundle: aot ?
-                `./${nsWebpack.getAotEntryModule(appFullPath)}` :
-                `./${nsWebpack.getEntryModule(appFullPath)}`,
-            vendor: "./vendor",
+            bundle: entryPath,
         },
         output: {
-            pathinfo: true,
+            pathinfo: false,
             path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
+            globalObject: "global",
         },
         resolve: {
             extensions: [".ts", ".js", ".scss", ".css"],
@@ -88,9 +108,64 @@ module.exports = env => {
             "timers": false,
             "setImmediate": false,
             "fs": "empty",
+            "__dirname": false,
+        },
+        devtool: sourceMap ? "inline-source-map" : "none",
+        optimization: {
+            splitChunks: {
+                cacheGroups: {
+                    vendor: {
+                        name: "vendor",
+                        chunks: "all",
+                        test: (module, chunks) => {
+                            const moduleName = module.nameForCondition ? module.nameForCondition() : '';
+                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
+                                appComponents.some(comp => comp === moduleName);
+                        },
+                        enforce: true,
+                    },
+                }
+            },
+            minimize: !!uglify,
+            minimizer: [
+                new UglifyJsPlugin({
+                    parallel: true,
+                    cache: true,
+                    uglifyOptions: {
+                        output: {
+                            comments: false,
+                        },
+                        compress: {
+                            // The Android SBG has problems parsing the output
+                            // when these options are enabled
+                            'collapse_vars': platform !== "android",
+                            sequences: platform !== "android",
+                        }
+                    }
+                })
+            ],
         },
         module: {
             rules: [
+                {
+                    test: new RegExp(entryPath),
+                    use: [
+                        // Require all Android app components
+                        platform === "android" && {
+                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            options: { modules: appComponents }
+                        },
+
+                        {
+                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            options: {
+                                angular: true,
+                                loadCss: !snapshot, // load the application css if in debug mode
+                            }
+                        },
+                    ].filter(loader => !!loader)
+                },
+
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
                 // tns-core-modules reads the app.css and its imports using css-loader
@@ -113,62 +188,59 @@ module.exports = env => {
                 { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
                 { 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: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+                    use: [
+                        "nativescript-dev-webpack/moduleid-compat-loader",
+                        "@ngtools/webpack",
+                    ]
+                },
+
+                // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+                // Removing this will cause deprecation warnings to appear.
+                {
+                    test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
+                    parser: { system: true },
+                },
             ],
         },
         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",
+                "process": undefined,
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin([ `${dist}/**/*` ]),
+            new CleanWebpackPlugin([`${dist}/**/*`]),
             // Copy native app resources to out dir.
             new CopyWebpackPlugin([
-              {
-                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
-                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
-                context: projectRoot
-              },
+                {
+                    from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
+                    to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
+                    context: projectRoot
+                },
             ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "fonts/**" },
-                { from: "**/*.jpg" },
-                { from: "**/*.png" },
-                { from: "**/*.xml" },
+                { from: { glob: "fonts/**" } },
+                { from: { glob: "**/*.jpg" } },
+                { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([
                 "./vendor",
                 "./bundle",
             ]),
-            // Support for web workers since v3.2
+            // For instructions on how to set up workers with webpack
+            // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),
-            // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution.
-            new nsWebpack.NativeScriptAngularCompilerPlugin(
-                Object.assign({
-                    entryModule: resolve(appPath, "app.module#AppModule"),
-                    skipCodeGeneration: !aot,
-                    platformOptions: {
-                        platform,
-                        platforms,
-                        // ignore: ["App_Resources"]
-                    },
-                }, ngToolsWebpackOptions)
-            ),
+            ngCompilerPlugin,
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
             new nsWebpack.WatchStateLoggerPlugin(),
         ],
     };
+
+
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({
@@ -179,26 +251,28 @@ module.exports = env => {
             statsFilename: resolve(projectRoot, "report", `stats.json`),
         }));
     }
+
     if (snapshot) {
         config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
             chunk: "vendor",
+            angular: true,
+            requireModules: [
+                "reflect-metadata",
+                "@angular/platform-browser",
+                "@angular/core",
+                "@angular/common",
+                "@angular/router",
+                "nativescript-angular/platform-static",
+                "nativescript-angular/router",
+            ],
             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: {
-                compress,
-            }
-        }));
+
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
     }
+
     return config;
 };