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

If the application has dependencies that require Angular or Vue, such as
the NativeScript UI Pro plugins, it won't be able to find them in the
bundled files. That's why these plugins should also be external.

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"]
 			}
 		];