update demos to latest deps

Author: PeterStaev

demo-ng/package-lock.json

@@ -6,10 +6,10 @@
   "nativescript": {
     "id": "com.tangrainc.dropdownsample.ng",
     "tns-android": {
-      "version": "4.1.3"
+      "version": "5.2.1"
     },
     "tns-ios": {
-      "version": "4.1.1"
+      "version": "5.2.0"
     }
   },
   "scripts": {
@@ -25,45 +25,33 @@
     "build-ios-bundle": "npm run ns-bundle --ios --build-app"
   },
   "dependencies": {
-    "@angular/animations": "~6.0.6",
-    "@angular/common": "~6.0.6",
-    "@angular/compiler": "~6.0.6",
-    "@angular/core": "~6.0.6",
-    "@angular/forms": "~6.0.6",
-    "@angular/http": "~6.0.6",
-    "@angular/platform-browser": "~6.0.6",
-    "@angular/platform-browser-dynamic": "~6.0.6",
-    "@angular/router": "~6.0.6",
-    "nativescript-angular": "^6.0.6",
+    "@angular/animations": "~7.2.0",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/forms": "~7.2.0",
+    "@angular/http": "~7.2.0",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
+    "nativescript-angular": "^7.2.2",
     "nativescript-drop-down": "file:../bin/dist",
     "reflect-metadata": "~0.1.8",
-    "rxjs": "~6.0.0 || >=6.1.0",
-    "tns-core-modules": "^4.1.0",
-    "zone.js": "^0.8.26"
+    "rxjs": "^6.3.3",
+    "tns-core-modules": "^5.2.2",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular-devkit/core": "~0.6.3",
-    "@angular/compiler-cli": "~6.0.6",
-    "@ngtools/webpack": "~6.0.3",
+    "@angular/compiler-cli": "~7.2.0",
+    "@ngtools/webpack": "~7.2.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.5.1",
-    "css-loader": "~0.28.11",
     "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.12.0",
-    "nativescript-worker-loader": "~0.9.0",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.3.0",
-    "typescript": "~2.7.2",
-    "uglifyjs-webpack-plugin": "~1.2.5",
-    "webpack": "~4.6.0",
-    "webpack-bundle-analyzer": "~2.13.0",
-    "webpack-cli": "~2.1.3",
-    "webpack-sources": "~1.1.0"
+    "nativescript-dev-webpack": "^0.20.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,13 +1,18 @@
-const { join, relative, resolve, sep } = require("path");
+const { join, relative, resolve, sep, dirname } = 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 { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
+const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng");
+const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
 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.
@@ -21,9 +26,7 @@ module.exports = env => {
         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));
@@ -33,27 +36,62 @@ module.exports = env => {
         // 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",
+        appPath = "src",
+        appResourcesPath = "App_Resources",
 
         // 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 externals = nsWebpack.getConvertedExternals(env.externals);
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
-
-    const entryModule = aot ?
-        nsWebpack.getAotEntryModule(appFullPath) : 
-        `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const tsConfigName = "tsconfig.tns.json";
+    const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
+    const ngCompilerTransformers = [];
+    const additionalLazyModuleResources = [];
+    if (aot) {
+        ngCompilerTransformers.push(nsReplaceBootstrap);
+    }
+
+    if (hmr) {
+        ngCompilerTransformers.push(nsSupportHmrNg);
+    }
+
+    // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
+    // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
+    // fixes https://github.com/NativeScript/nativescript-cli/issues/4024
+    if (env.externals && env.externals.indexOf("@angular/core") > -1) {
+        const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName);
+        if (appModuleRelativePath) {
+            const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath));
+            // include the lazy loader inside app module
+            ngCompilerTransformers.push(nsReplaceLazyLoader);
+            // include the new lazy loader path in the allowed ones
+            additionalLazyModuleResources.push(appModuleFolderPath);
+        }
+    }
+
+    const ngCompilerPlugin = new AngularCompilerPlugin({
+        hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
+        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))),
+        mainPath: resolve(appPath, entryModule),
+        tsConfigPath: join(__dirname, tsConfigName),
+        skipCodeGeneration: !aot,
+        sourceMap: !!sourceMap,
+        additionalLazyModuleResources: additionalLazyModuleResources
+    });
 
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -97,7 +135,7 @@ module.exports = env => {
             "fs": "empty",
             "__dirname": false,
         },
-        devtool: "none",
+        devtool: sourceMap ? "inline-source-map" : "none",
         optimization: {
             splitChunks: {
                 cacheGroups: {
@@ -107,7 +145,7 @@ module.exports = env => {
                         test: (module, chunks) => {
                             const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                             return /[\\/]node_modules[\\/]/.test(moduleName) ||
-                                    appComponents.some(comp => comp === moduleName);
+                                appComponents.some(comp => comp === moduleName);
                         },
                         enforce: true,
                     },
@@ -116,9 +154,9 @@ module.exports = env => {
             minimize: !!uglify,
             minimizer: [
                 new UglifyJsPlugin({
+                    parallel: true,
+                    cache: true,
                     uglifyOptions: {
-                        parallel: true,
-                        cache: true,
                         output: {
                             comments: false,
                         },
@@ -146,7 +184,7 @@ module.exports = env => {
                         {
                             loader: "nativescript-dev-webpack/bundle-config-loader",
                             options: {
-                                registerPages: false,
+                                angular: true,
                                 loadCss: !snapshot, // load the application css if in debug mode
                             }
                         },
@@ -158,14 +196,15 @@ module.exports = env => {
                 // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
-                    use: {
-                        loader: "css-loader",
-                        options: { minimize: false, url: false },
-                    }
+                    use: [
+                        "nativescript-dev-webpack/style-hot-loader",
+                        { loader: "css-loader", options: { minimize: false, url: false } }
+                    ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
+                        "nativescript-dev-webpack/style-hot-loader",
                         { loader: "css-loader", options: { minimize: false, url: false } },
                         "sass-loader"
                     ]
@@ -175,10 +214,11 @@ 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: [
+                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+                    use: [
                         "nativescript-dev-webpack/moduleid-compat-loader",
+                        "nativescript-dev-webpack/lazy-ngmodule-hot-loader",
                         "@ngtools/webpack",
                     ]
                 },
@@ -195,9 +235,10 @@ module.exports = env => {
             // 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([
                 {
@@ -208,9 +249,9 @@ module.exports = env => {
             ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "fonts/**" },
-                { from: "**/*.jpg" },
-                { from: "**/*.png" },
+                { 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([
@@ -220,21 +261,13 @@ module.exports = env => {
             // 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({
-                entryModule: resolve(appPath, "app.module#AppModule"),
-                tsConfigPath: join(__dirname, "tsconfig.esm.json"),
-                skipCodeGeneration: !aot,
-                platformOptions: {
-                    platform,
-                    platforms,
-                },
-            }),
+            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({
@@ -249,6 +282,7 @@ module.exports = env => {
     if (snapshot) {
         config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
             chunk: "vendor",
+            angular: true,
             requireModules: [
                 "reflect-metadata",
                 "@angular/platform-browser",
@@ -263,5 +297,9 @@ module.exports = env => {
         }));
     }
 
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+
     return config;
 };

demo-ng/webpack.config.js

@@ -1,5 +1,5 @@
 import "./bundle-config";
 
-import application = require("application");
+import * as application from "application";
 
 application.start({ moduleName: "main-page" });

demo/app/app.ts

@@ -1,6 +1,6 @@
 import { EventData, Observable } from "data/observable";
-import { GestureTypes } from "ui/gestures";
-import pages = require("ui/page");
+import * as pages from "ui/page";
+
 import { DropDown, SelectedIndexChangedEventData, ValueList } from "nativescript-drop-down";
 
 let viewModel: Observable;

demo/app/main-page.ts

@@ -7,6 +7,4 @@ application.loadAppCss();
 
 require("./vendor-platform");
 
-require("nativescript-drop-down"); // Added for snapshots
-
 require("bundle-entry-points");