Upgrade demos to NS5.2

Author: lfabreges

demo-angular/package.json

@@ -9,40 +9,40 @@
  "tslint": "tslint **/*.ts --config ../tslint.json"
  },
  "dependencies": {
- "@angular/animations": "~7.0.0",
- "@angular/common": "~7.0.0",
- "@angular/compiler": "~7.0.0",
- "@angular/core": "~7.0.0",
- "@angular/forms": "~7.0.0",
- "@angular/http": "~7.0.0",
- "@angular/platform-browser": "~7.0.0",
- "@angular/platform-browser-dynamic": "~7.0.0",
- "@angular/router": "~7.0.0",
- "nativescript-angular": "^7.0.0",
+ "@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-localize": "file:../src",
  "nativescript-theme-core": "~1.0.4",
  "reflect-metadata": "^0.1.12",
  "rxjs": "^6.3.3",
- "tns-core-modules": "^5.0.2",
- "zone.js": "^0.8.26"
+ "tns-core-modules": "^5.2.1",
+ "zone.js": "^0.8.4"
  },
  "devDependencies": {
- "@angular/compiler-cli": "~7.0.0",
- "@nativescript/schematics": "^0.3.4",
- "@ngtools/webpack": "~7.0.0",
- "nativescript-dev-typescript": "^0.7.6",
- "nativescript-dev-webpack": "^0.18.0",
+ "@angular/compiler-cli": "~7.2.0",
+ "@nativescript/schematics": "^0.5.1",
+ "@ngtools/webpack": "~7.2.0",
+ "nativescript-dev-typescript": "^0.8.0",
+ "nativescript-dev-webpack": "^0.20.2",
  "tns-platform-declarations": "^5.0.2",
  "tslint": "^5.8.0",
  "typescript": "~3.1.1"
  },
  "nativescript": {
  "id": "org.nativescript.demo.angular",
  "tns-ios": {
- "version": "5.0.0"
+ "version": "5.2.0"
  },
  "tns-android": {
- "version": "5.0.0"
+ "version": "5.2.0"
  }
  }
 }

demo-angular/webpack.config.js

@@ -1,9 +1,12 @@
-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");
@@ -33,8 +36,8 @@ 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
@@ -44,23 +47,45 @@ module.exports = env => {
  sourceMap, // --env.sourceMap
  hmr, // --env.hmr,
  } = env;
- const externals = (env.externals || []).map((e) => { // --env.externals
- return new RegExp(e + ".*");
- });
 
+ const externals = nsWebpack.getConvertedExternals(env.externals);
  const appFullPath = resolve(projectRoot, appPath);
  const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
-
+ 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: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
+ platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))),
  mainPath: resolve(appPath, entryModule),
- tsConfigPath: join(__dirname, "tsconfig.tns.json"),
+ tsConfigPath: join(__dirname, tsConfigName),
  skipCodeGeneration: !aot,
  sourceMap: !!sourceMap,
+ additionalLazyModuleResources: additionalLazyModuleResources
  });
 
  const config = {
@@ -171,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"
  ]
@@ -192,6 +218,7 @@ module.exports = env => {
  test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
  use: [
  "nativescript-dev-webpack/moduleid-compat-loader",
+ "nativescript-dev-webpack/lazy-ngmodule-hot-loader",
  "@ngtools/webpack",
  ]
  },

demo/package.json

@@ -8,24 +8,24 @@
  "dependencies": {
  "nativescript-localize": "file:../src",
  "nativescript-theme-core": "^1.0.4",
- "nativescript-unit-test-runner": "^0.3.4",
- "tns-core-modules": "^5.0.2"
+ "nativescript-unit-test-runner": "^0.5.0",
+ "tns-core-modules": "^5.2.1"
  },
  "devDependencies": {
  "jasmine-core": "^3.3.0",
- "karma": "^3.1.1",
+ "karma": "^4.0.0",
  "karma-jasmine": "^2.0.1",
  "karma-nativescript-launcher": "^0.4.0",
- "nativescript-dev-webpack": "^0.18.0",
+ "nativescript-dev-webpack": "^0.20.2",
  "tslint": "^5.8.0"
  },
  "nativescript": {
  "id": "org.nativescript.demo.javascript",
  "tns-ios": {
- "version": "5.0.0"
+ "version": "5.2.0"
  },
  "tns-android": {
- "version": "5.0.0"
+ "version": "5.2.0"
  }
  }
 }

demo/webpack.config.js

@@ -42,9 +42,7 @@ module.exports = env => {
  sourceMap, // --env.sourceMap
  hmr, // --env.hmr,
  } = env;
- const externals = (env.externals || []).map((e) => { // --env.externals
- return new RegExp(e + ".*");
- });
+ const externals = nsWebpack.getConvertedExternals(env.externals);
 
  const appFullPath = resolve(projectRoot, appPath);
  const appResourcesFullPath = resolve(projectRoot, appResourcesPath);