fix(generators): angular feature/component + update {N} deps

#152

CONTRIBUTING.md

@@ -40,7 +40,7 @@ This will setup a fresh Nx workspace at `tmp/myworkspace` and auto open in VS Co
 
 ```
 rm -rf node_modules/@nstudio
-ng add @nstudio/xplat
+npm i -D @nstudio/xplat
 ```
 
 Anytime you make further changes to the schematic just rebuild/republish:

docs/xplat/getting-started/getting-started.md

@@ -6,6 +6,13 @@ Everything starts with a [Nx workspace](https://nx.dev).
 npx create-nx-workspace myworkspace
 ```
 
+**Note:** We recommend the following options when creating your Nx workspace:
+
+- Choose `Empty`
+- Choose `Nx` cli
+
+We find this provides opportunities for broader use cases while also allowing you to setup your workspace the way you want which may include using `xplat` app generators (which we'll install in a moment) which leverage those from Nx however enhances a few to work best for xplat tooling.
+
 # Install Nrwl cli
 
 Having Nrwl's cli installed globally will enhance usability of the tooling:

packages/nativescript-angular/src/schematics/application/_files/package.json

@@ -38,11 +38,11 @@
     "zone.js": "file:<%= pathOffset %>node_modules/zone.js"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~8.1.0",
+    "@angular/compiler-cli": "~8.2.0",
     "@angular/language-service": "file:<%= pathOffset %>node_modules/@angular/language-service",
-    "@ngtools/webpack": "~8.1.0",
+    "@ngtools/webpack": "~8.3.0",
     "codelyzer": "file:<%= pathOffset %>node_modules/codelyzer",
-    "nativescript-dev-webpack": "~1.0.1",
+    "nativescript-dev-webpack": "~1.2.0",
     "terser-webpack-plugin": "file:<%= pathOffset %>node_modules/terser-webpack-plugin",
     "tns-platform-declarations": "file:<%= pathOffset %>node_modules/tns-platform-declarations",
     "typescript": "file:<%= pathOffset %>node_modules/typescript"

packages/nativescript-angular/src/schematics/application/_files/webpack.config.js

@@ -57,7 +57,7 @@ module.exports = env => {
 
     // You can provide the following flags when running 'tns run android|ios'
     aot, // --env.aot
-    snapshot, // --env.snapshot,
+    snapshot, // --env.snapshot
     production, // --env.production
     uglify, // --env.uglify
     report, // --env.report
@@ -91,8 +91,22 @@ module.exports = env => {
     ngCompilerTransformers.push(nsReplaceBootstrap);
   }
 
-  if (hmr) {
-    ngCompilerTransformers.push(nsSupportHmrNg);
+  const copyTargets = [
+    { from: { glob: 'assets/**' } },
+    { from: { glob: 'fonts/**' } }
+    // copy monorepo shared assests
+    // for example:
+    // { from: '../../../libs/assets/i18n', to: 'assets/i18n' }
+  ];
+
+  if (!production) {
+    // copy monorepo shared assets which are for development purposes only
+    // for example: a mock data json folder
+    // copyTargets.push({ from: '../../../libs/assets/mockdata', to: 'assets/mockdata' });
+
+    if (hmr) {
+      ngCompilerTransformers.push(nsSupportHmrNg);
+    }
   }
 
   // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
@@ -236,7 +250,7 @@ module.exports = env => {
       minimizer: [
         new TerserPlugin({
           parallel: true,
-          cache: true,
+          cache: !ci,
           sourceMap: isAnySourceMapEnabled,
           terserOptions: {
             output: {
@@ -251,6 +265,7 @@ module.exports = env => {
               // custom
               drop_console: true,
               drop_debugger: true,
+              ecma: 6,
               keep_infinity: platform === 'android', // for Chrome/V8
               reduce_funcs: platform !== 'android', // for Chrome/V8
               pure_funcs: [
@@ -262,16 +277,22 @@ module.exports = env => {
                 'this.log.error',
                 'this.log.info',
                 'this.log.warn'
-              ]
-            }
+              ],
+              global_defs: {
+                __UGLIFIED__: true
+              }
+            },
+            // custom
+            ecma: 6,
+            safari10: platform !== 'android'
           }
         })
       ]
     },
     module: {
       rules: [
         {
-          test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
+          include: join(appFullPath, entryPath),
           use: [
             // Require all Android app components
             platform === 'android' && {
@@ -346,16 +367,13 @@ module.exports = env => {
       // Remove all files from the out dir.
       new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
       // Copy assets to out dir. Add your own globs as needed.
-      new CopyWebpackPlugin(
-        [{ from: { glob: 'assets/**' } }, { from: { glob: 'fonts/**' } }],
-        { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }
-      ),
+      new CopyWebpackPlugin(copyTargets, {
+        ignore: [`${relative(appPath, appResourcesFullPath)}/**`]
+      }),
       new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
       // For instructions on how to set up workers with webpack
       // check out https://github.com/nativescript/worker-loader
-      new NativeScriptWorkerPlugin({
-        plugins: [ngCompilerPlugin]
-      }),
+      new NativeScriptWorkerPlugin(),
       ngCompilerPlugin,
       // Does IPC communication with the {N} CLI to notify events when running in watch mode.
       new nsWebpack.WatchStateLoggerPlugin()
@@ -395,7 +413,7 @@ module.exports = env => {
     );
   }
 
-  if (hmr) {
+  if (!production && hmr) {
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
   }
 

packages/nativescript/src/schematics/application/_files/package.json

@@ -19,7 +19,7 @@
     "tns-core-modules": "file:<%= pathOffset %>node_modules/tns-core-modules"
   },
   "devDependencies": {
-    "nativescript-dev-webpack": "~1.0.1",
+    "nativescript-dev-webpack": "~1.2.0",
     "terser-webpack-plugin": "file:<%= pathOffset %>node_modules/terser-webpack-plugin",
     "tns-platform-declarations": "file:<%= pathOffset %>node_modules/tns-platform-declarations",
     "typescript": "file:<%= pathOffset %>node_modules/typescript"

packages/nativescript/src/schematics/application/_files/tsconfig.json

@@ -6,6 +6,7 @@
     "emitDecoratorMetadata": true,
     "noEmitHelpers": true,
     "noEmitOnError": true,
+    "skipLibCheck": true,
     "lib": ["es6", "dom"],
     "typeRoots": ["./node_modules/@types"],
     "baseUrl": ".",

packages/nativescript/src/schematics/application/_files/webpack.config.js

@@ -36,8 +36,7 @@ module.exports = env => {
 
   const {
     // The 'appPath' and 'appResourcesPath' values are fetched from
-    // the nsconfig.json configuration file
-    // when bundling with `tns run android|ios --bundle`.
+    // the nsconfig.json configuration file.
     appPath = 'app',
     appResourcesPath = 'app/App_Resources',
 
@@ -50,7 +49,9 @@ module.exports = env => {
     hiddenSourceMap, // --env.hiddenSourceMap
     hmr, // --env.hmr,
     unitTesting, // --env.unitTesting,
-    verbose // --env.verbose
+    verbose, // --env.verbose
+    snapshotInDocker, // --env.snapshotInDocker
+    skipSnapshotTools // --env.skipSnapshotTools
   } = env;
   const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
   const externals = nsWebpack.getConvertedExternals(env.externals);
@@ -204,7 +205,7 @@ module.exports = env => {
     module: {
       rules: [
         {
-          test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
+          include: join(appFullPath, entryPath),
           use: [
             // Require all Android app components
             platform === 'android' && {
@@ -324,7 +325,9 @@ module.exports = env => {
         chunk: 'vendor',
         requireModules: ['tns-core-modules/bundle-entry-points'],
         projectRoot,
-        webpackConfig: config
+        webpackConfig: config,
+        snapshotInDocker,
+        skipSnapshotTools
       })
     );
   }

packages/xplat/src/schematics/mode/index.ts

@@ -9,14 +9,14 @@ import {
   XplatHelpers
 } from '@nstudio/xplat';
 import { Schema as xPlatOptions } from './schema';
-import { PlatformModes } from '../../utils';
+import { PlatformModes, supportedPlatformsWithNx } from '../../utils';
 
 let name: PlatformModes;
 export default function(options: xPlatOptions) {
   if (!options.name) {
     name = 'fullstack';
     console.warn(
-      `Using 'fullstack' since no mode was specified. Currently supported: fullstack,${supportedPlatforms}. Example: nx g mode nativescript`
+      `Using 'fullstack' since no mode was specified. Currently supported: fullstack,${supportedPlatformsWithNx}. Example: nx g mode nativescript`
     );
   } else {
     name = options.name;
@@ -47,7 +47,7 @@ export default function(options: xPlatOptions) {
           );
           let containsPlatform = false;
           for (const n of nameParts) {
-            if (supportedPlatforms.includes(n)) {
+            if (supportedPlatformsWithNx.includes(n)) {
               containsPlatform = true;
             }
           }

packages/xplat/src/utils/xplat.ts

@@ -324,16 +324,16 @@ export namespace XplatHelpers {
         if (supportedFrameworks.includes(framework)) {
           if (platforms.length) {
             for (const platform of platforms) {
-              if (platform === 'web' && framework === 'angular') {
-                // TODO: move angular app into web-angular package
-                // right now it lives in angular package
-                const packageName = `@nstudio/${framework}`;
+              if (framework === 'angular') {
+                // Angular generators start with @nstudio/angular and branch from there
+                const packageName = `@nstudio/angular`;
                 devDependencies[packageName] = xplatVersion;
-                // also need web-angular (won't need this once moved to web-angular)
-                devDependencies[`@nstudio/web-angular`] = xplatVersion;
-                devDependencies[`@nstudio/web`] = xplatVersion;
-                // externalChains.push(externalSchematic(`@nstudio/${framework}`, 'app', options));
-                packagesToRunXplat.push(packageName);
+                // install platform dependencies
+                devDependencies[`@nstudio/${platform}-angular`] = xplatVersion;
+                devDependencies[`@nstudio/${platform}`] = xplatVersion;
+                if (!packagesToRunXplat.includes(packageName)) {
+                  packagesToRunXplat.push(packageName);
+                }
               } else if (
                 isApp &&
                 supportedNxExtraPlatforms.includes(<PlatformNxExtraTypes>(
@@ -865,7 +865,7 @@ xplat/**/*.ngsummary.json
         if (!devMode || devMode === 'fullstack') {
           // show all
           isFullstack = true;
-          for (const p of supportedPlatforms) {
+          for (const p of supportedPlatformsWithNx) {
             const appFilter = groupByName ? `*-${p}` : `${p}*`;
             userUpdates[`**/apps/${appFilter}`] = false;
             userUpdates[`**/xplat/${p}`] = false;
@@ -876,7 +876,7 @@ xplat/**/*.ngsummary.json
         } else if (options.platforms) {
           const platforms = sanitizeCommaDelimitedArg(options.platforms);
           // switch on/off platforms
-          for (const p of supportedPlatforms) {
+          for (const p of supportedPlatformsWithNx) {
             const excluded = platforms.includes(p) ? false : true;
             const appFilter = groupByName ? `*-${p}` : `${p}*`;
             if (focusOnApps.length) {