fix-next(preview): externalize Angular and Vue dependencies

The external plugins that depend on Angular or Vue won't work if the
corresponding dependency is bundled. The plugin will look for these
dependencies only in the external `tns_modules`. That's why Angular and
Vue should be external and not bundled by webpack.

Author: sis0k0

lib/services/livesync/playground/preview-app-plugins-service.ts

@@ -34,14 +34,15 @@ export class PreviewAppPluginsService implements IPreviewAppPluginsService {
 		const devicePlugins = this.getDevicePlugins(device);
 		const result = _.keys(devicePlugins)
 			.filter(plugin => plugin.indexOf("nativescript") !== -1)
-			// exclude angular and vue related dependencies as they do not contain
-			// any native code. In this way, we will read them from the bundle
-			// and improve the app startup time by not reading a lot of
-			// files from the file system instead. Also, the core theme links
-			// are custom and should be handled by us build time.
-			.filter(plugin => !_.includes(["nativescript-angular", "nativescript-vue", "nativescript-intl", "nativescript-theme-core"], plugin));
-
-		result.push(...["tns-core-modules", "tns-core-modules-widgets"]);
+			// The core theme links are custom and should be handled by us build time.
+			.filter(plugin => !_.includes(["nativescript-theme-core"], plugin));
+
+		result.push(
+			"tns-core-modules",
+			"tns-core-modules-widgets",
+			"@angular"
+		);
+
 		return result;
 	}
 

test/services/playground/preview-app-plugins-service.ts

@@ -417,44 +417,44 @@ describe("previewAppPluginsService", () => {
 	describe("getExternalPlugins", () => {
 		const testCases = [
 			{
-				name: "should return default plugins(`tns-core-modules` and `tns-core-modules-widgets`) when no plugins are provided",
+				name: "should return default plugins(`tns-core-modules`, `tns-core-modules-widgets` and `@angular`) when no plugins are provided",
 				plugins: {},
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
-				name: "should exclude `nativescript-vue`",
+				name: "should include `nativescript-vue`",
 				plugins: { "nativescript-vue": "1.2.3" },
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["nativescript-vue", "tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
-				name: "should exclude `nativescript-intl`",
+				name: "should include `nativescript-intl`",
 				plugins: { "nativescript-intl": "4.5.6" },
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["nativescript-intl", "tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
-				name: "should exclude `nativescript-angular`",
+				name: "should include `nativescript-angular`",
 				plugins: { "nativescript-angular": "7.8.9" },
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["nativescript-angular", "tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
 				name: "should exclude `nativescript-theme-core`",
 				plugins: { "nativescript-theme-core": "1.3.5" },
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
 				name: "should return plugins that contain `nativescript` in their names",
 				plugins: {
 					"nativescript-facebook": "4.5.6"
 				},
-				expectedPlugins: ["nativescript-facebook", "tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["nativescript-facebook", "tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			},
 			{
 				name: "should not return plugins that do not contain `nativescript` in their names",
 				plugins: {
 					lodash: "4.5.6",
 					xmlhttprequest: "1.2.3"
 				},
-				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets", "@angular"]
 			}
 		];