NativeScript · NickIliev · Mar 19, 2020 · Mar 19, 2020
diff --git a/app/ng-ui-widgets-category/tabs/end.md b/app/ng-ui-widgets-category/tabs/end.md
@@ -6,8 +6,12 @@
 |:----------|:---------|:---------------|
 | `items`   | `Array<TabContentItem>` |  Gets or sets the items of the BottomNavigation. |
 | `selectedIndex` | `number` | Gets or sets the selectedIndex of the BottomNavigation. |
+| `swipeEnabled` | `boolean` | Gets or sets the swipe enabled state of the Tabs. |
+| `offscreenTabLimit` | `number` | Gets or sets the number of offscreen preloaded tabs of the Tabs. |
 | `tabStrip`| `TabStrip` | Gets or sets the tab strip of the BottomNavigation. |
 |` tabsPosition` | _"top"_, _"bottom"_ | Gets or sets the position state of the Tabs. Default value: **top** |
+|` iOSTabBarItemsAlignment` | _"leading"_, _"justified"_, _"center"_, _"centerSelected"_  | **iOS Only:** Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: **justified** |
+
 
 ### TabStrip Properties
 
@@ -16,16 +20,18 @@
 | `iosIconRenderingMode`   | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. |
 | `isIconSizeFixed` | `boolean` | When set to `true` the icon will have fixed size following the platform-specific design guidelines. Default value: `true`. |
 | `items`   | `Array<TabStripItem>` |  Gets or sets an array of strip items of the TabStrip. |
-| `highlightColor`   |  |  Gets or sets the underline color of the selected TabStripItem. |
+| `highlightColor`   | `Color` |  Gets or sets the underline color of the selected TabStripItem. |
+| `selectedItemColor`   | `Color` |  Gets or sets the color of the selected items in the tab strip. |
+| `unSelectedItemColor`   | `Color` |  Gets or sets the color of the non-selected items in the tab strip. |
+
 
 ### TabStripItem Properties
 
 | Name      | Type     | Description                                    |
 |-----------|----------|------------------------------------------------|
 | `title`   | `string` | Gets or sets the title of the tab strip entry. |
-| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`) |
-| `image`   | `Image` | Gets or sets the image of the tab strip entry.  |
-| `label`   | `Label` | Gets or sets the label of the tab strip entry.  |
+| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`). **Note:** To be used for programmatic creation of Tabs |
+| `iconClass` | `string` | Gets or sets the CSS class name of the icon in the tab strip entry. **Note:** To be used for programmatic creation of Tabs |
 
 
 ## Events
@@ -67,4 +73,4 @@
 
 | Android               | iOS      |
 |:----------------------|:---------|
-| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [UITabViewController](https://developer.apple.com/documentation/uikit/uitabbarcontroller?language=objc) | 
+| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [MDCTabBar](https://material.io/develop/ios/components/tabs/api-docs/Classes/MDCTabBar.html) | 
diff --git a/app/ng-ui-widgets-category/tabs/styling/styling.component.css b/app/ng-ui-widgets-category/tabs/styling/styling.component.css
@@ -2,7 +2,7 @@
 Tabs.bottom-nav {
     background-color: orangered;
     color: gold;
-    font-size: 24;
+    font-size: 18;
 }
 
 TabStripItem.tabstripitem-active {

diff --git a/app/ng-ui-widgets-category/tabs/styling/styling.component.html b/app/ng-ui-widgets-category/tabs/styling/styling.component.html
@@ -1,8 +1,7 @@
 <!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
-<Tabs class="bottom-nav">
-
+<Tabs class="bottom-nav" tabPosition="top" iOSTabBarItemsAlignment="jistified">
     <!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
-    <TabStrip>
+    <TabStrip highlightColor="orangered" selectedItemColor="red" unSelectedItemColor="green">
         <TabStripItem>
             <Label text="Home"></Label>
             <Image src="font://&#xf015;" class="fas"></Image>

diff --git a/package.json b/package.json
@@ -22,10 +22,10 @@
   "nativescript": {
     "id": "org.nativescript.nativescriptsdkexamplesng",
     "tns-android": {
-      "version": "6.2.0-2019-10-16-170919-03"
+      "version": "6.5.0"
     },
     "tns-ios": {
-      "version": "6.1.0"
+      "version": "6.5.0"
     }
   },
   "dependencies": {
@@ -36,14 +36,15 @@
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
+    "@nativescript/core": "^6.5.0",
     "@nativescript/theme": "^2.1.2",
-    "nativescript-angular": "8.3.0-next-2019-10-17-143908-01",
+    "nativescript-angular": "^8.21.0",
     "nativescript-camera": "^4.5.0",
     "nativescript-geolocation": "^5.1.0",
     "nativescript-intl": "~3.0.0",
     "reflect-metadata": "~0.1.12",
     "rxjs": "^6.4.0",
-    "tns-core-modules": "6.3.0-next-2019-10-17-174536-07",
+    "tns-core-modules": "^6.5.0",
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
@@ -54,11 +55,11 @@
     "glob": "^7.1.3",
     "lazy": "1.0.11",
     "markdown-snippet-injector": "^0.2.2",
-    "nativescript-dev-webpack": "1.4.0-next-2019-10-17-185549-03",
+    "nativescript-dev-webpack": "^1.5.1",
     "opener": "^1.4.1",
     "rimraf": "^2.5.3",
     "tar.gz": "^1.0.5",
-    "tns-platform-declarations": "6.0.1",
+    "tns-platform-declarations": "^6.4.2",
     "tslint": "^5.11.0",
     "typescript": "~3.5.3"
   },

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,7 @@ const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns
 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 { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
+const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
@@ -18,12 +18,13 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-    ];
+    ]);
 
-    const platform = env && (env.android && "android" || env.ios && "ios");
+    const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
@@ -60,11 +61,32 @@ module.exports = env => {
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
     const externals = nsWebpack.getConvertedExternals(env.externals);
     const appFullPath = resolve(projectRoot, appPath);
-    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
     const tsConfigName = "tsconfig.tns.json";
+    const tsConfigPath = join(__dirname, tsConfigName);
+    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
+    const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
+    let coreModulesPackageName = "tns-core-modules";
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
+
+    const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
+    if (hasRootLevelScopedModules) {
+        coreModulesPackageName = "@nativescript/core";
+        alias["tns-core-modules"] = coreModulesPackageName;
+        nsWebpack.processTsPathsForScopedModules({ compilerOptions });
+    }
+
+    if (hasRootLevelScopedAngular) {
+        alias["nativescript-angular"] = "@nativescript/angular";
+        nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
+    }
+
+    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
     const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
-    const entries = { bundle: entryPath };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
     const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
     if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
@@ -98,10 +120,11 @@ module.exports = env => {
         hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
         platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)),
         mainPath: join(appFullPath, entryModule),
-        tsConfigPath: join(__dirname, tsConfigName),
+        tsConfigPath,
         skipCodeGeneration: !aot,
         sourceMap: !!isAnySourceMapEnabled,
-        additionalLazyModuleResources: additionalLazyModuleResources
+        additionalLazyModuleResources: additionalLazyModuleResources,
+        compilerOptions: { paths: compilerOptions.paths }
     });
 
     let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
@@ -141,14 +164,12 @@ module.exports = env => {
             extensions: [".ts", ".js", ".scss", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
-                resolve(__dirname, "node_modules/tns-core-modules"),
+                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
                 resolve(__dirname, "node_modules"),
-                "node_modules/tns-core-modules",
+                `node_modules/${coreModulesPackageName}`,
                 "node_modules",
             ],
-            alias: {
-                '~': appFullPath
-            },
+            alias,
             symlinks: true
         },
         resolveLoader: {
@@ -228,19 +249,24 @@ module.exports = env => {
 
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
-                // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },