feat: Add AoT compilation with webpack (#215)

Added AoT/Webpack support and updates it to NativeScript 2.5

Fixes #213

app/app.css

@@ -1,4 +1,4 @@
-@import url("~/platform.css");
+@import url("./platform.css");
 
 Page {
   font-size: 15;

app/app.module.ts

@@ -1,5 +1,5 @@
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
-import { NgModule } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptHttpModule } from "nativescript-angular/http";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 
@@ -29,6 +29,7 @@ setStatusBarColors();
   declarations: [
       AppComponent,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class AppModule { }

app/groceries/groceries.component.ts

@@ -12,8 +12,9 @@ import { LoginService, alert } from "../shared";
 
 @Component({
   selector: "gr-groceries",
-  templateUrl: "groceries/groceries.component.html",
-  styleUrls: ["groceries/groceries-common.css", "groceries/groceries.component.css"],
+  moduleId: module.id,
+  templateUrl: "./groceries.component.html",
+  styleUrls: ["./groceries-common.css", "./groceries.component.css"],
   providers: [GroceryService]
 })
 export class GroceriesComponent implements OnInit {

app/groceries/groceries.module.ts

@@ -1,6 +1,6 @@
-import { NativeScriptModule } from "nativescript-angular/platform";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
-import { NgModule } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { groceriesRouting } from "./groceries.routing";
 import { GroceriesComponent } from "./groceries.component";
 import { GroceryListComponent } from "./grocery-list/grocery-list.component";
@@ -16,6 +16,7 @@ import { ItemStatusPipe } from "./grocery-list/item-status.pipe";
     GroceriesComponent,
     GroceryListComponent,
     ItemStatusPipe
-  ]
+  ],
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class GroceriesModule {}

app/groceries/grocery-list/grocery-list.component.ts

@@ -8,8 +8,9 @@ declare var UIColor: any;
 
 @Component({
   selector: "gr-grocery-list",
-  templateUrl: "groceries/grocery-list/grocery-list.component.html",
-  styleUrls: ["groceries/grocery-list/grocery-list.component.css"],
+  moduleId: module.id,
+  templateUrl: "./grocery-list.component.html",
+  styleUrls: ["./grocery-list.component.css"],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroceryListComponent {

app/login/login.component.ts

@@ -12,8 +12,9 @@ import { alert, LoginService, User } from "../shared";
 
 @Component({
   selector: "gr-login",
-  templateUrl: "login/login.component.html",
-  styleUrls: ["login/login-common.css", "login/login.component.css"],
+  moduleId: module.id,
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login-common.css", "./login.component.css"],
 })
 export class LoginComponent implements OnInit {
   user: User;

app/login/login.module.ts

@@ -1,6 +1,6 @@
-import { NativeScriptModule } from "nativescript-angular/platform";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
-import { NgModule } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 
 import { loginRouting } from "./login.routing";
 import { LoginComponent } from "./login.component";
@@ -13,6 +13,7 @@ import { LoginComponent } from "./login.component";
   ],
   declarations: [
     LoginComponent
-  ]
+  ],
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class LoginModule { }

app/main.aot.ts

@@ -0,0 +1,6 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { platformNativeScript } from "nativescript-angular/platform-static";
+
+import { AppModuleNgFactory } from "./app.module.ngfactory";
+
+platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

app/vendor-platform.android.ts

@@ -0,0 +1,25 @@
+// Resolve JavaScript classes that extend a Java class, and need to resolve
+// their JavaScript module from a bundled script. For example:
+// NativeScriptApplication, NativeScriptActivity, etc.
+//
+// This module gets bundled together with the rest of the app code and the
+// `require` calls get resolved to the correct bundling import call.
+//
+// At runtime the module gets loaded *before* the rest of the app code, so code
+// placed here needs to be careful about its dependencies.
+
+require("application");
+require("ui/frame");
+require("ui/frame/activity");
+
+if (global.TNS_WEBPACK) {
+    global.__requireOverride = function (name, dir) {
+        if (name === "./tns_modules/application/application.js") {
+            return require("application");
+        } else if (name === "./tns_modules/ui/frame/frame.js") {
+            return require("ui/frame");
+        } else if (name === "./tns_modules/ui/frame/activity.js") {
+            return require("ui/frame/activity");
+        }
+    };
+}

app/vendor.ts

@@ -0,0 +1,13 @@
+require("./vendor-platform");
+
+require("reflect-metadata");
+require("@angular/platform-browser");
+require("@angular/core");
+require("@angular/common");
+require("@angular/forms");
+require("@angular/http");
+require("@angular/router");
+
+require("nativescript-angular/platform-static");
+require("nativescript-angular/forms");
+require("nativescript-angular/router");

package.json

@@ -18,47 +18,72 @@
   "nativescript": {
     "id": "org.nativescript.groceries",
     "tns-android": {
-      "version": "2.4.1"
+      "version": "2.5.0"
     },
     "tns-ios": {
-      "version": "2.4.0"
+      "version": "2.5.0"
     }
   },
   "scripts": {
-    "tslint": "tslint \"app/**/*.ts\""
+    "tslint": "tslint \"app/**/*.ts\"",
+    "clean-android": "tns clean-app android",
+    "clean-ios": "tns clean-app ios",
+    "prewebpack-android": "npm run clean-android",
+    "prewebpack-ios": "npm run clean-ios",
+    "webpack-android": "webpack --config=webpack.android.js --progress",
+    "webpack-ios": "webpack --config=webpack.ios.js --progress",
+    "prestart-android-bundle": "npm run webpack-android",
+    "prestart-ios-bundle": "npm run webpack-ios",
+    "start-android-bundle": "tns run android --bundle --disable-npm-install",
+    "start-ios-bundle": "tns run ios --bundle --disable-npm-install",
+    "prebuild-android-bundle": "npm run webpack-android",
+    "prebuild-ios-bundle": "npm run webpack-ios",
+    "build-android-bundle": "tns build android --bundle --disable-npm-install",
+    "build-ios-bundle": "tns build ios --bundle --disable-npm-install"
   },
   "dependencies": {
-    "@angular/common": "~2.3.1",
-    "@angular/compiler": "~2.3.1",
-    "@angular/core": "~2.3.1",
-    "@angular/forms": "~2.3.1",
-    "@angular/http": "~2.3.1",
-    "@angular/platform-browser": "~2.3.1",
-    "@angular/platform-browser-dynamic": "~2.3.1",
-    "@angular/router": "~3.3.1",
+    "@angular/common": "2.4.5",
+    "@angular/compiler": "2.4.5",
+    "@angular/core": "2.4.5",
+    "@angular/forms": "2.4.5",
+    "@angular/http": "2.4.5",
+    "@angular/platform-browser": "2.4.5",
+    "@angular/platform-browser-dynamic": "2.4.5",
+    "@angular/router": "3.4.5",
     "email-validator": "1.0.4",
-    "nativescript-angular": "1.3.0",
+    "nativescript-angular": "1.4.0",
     "nativescript-iqkeyboardmanager": "1.0.1",
-    "nativescript-social-share": "1.3.1",
+    "nativescript-social-share": "~1.3.2",
     "nativescript-unit-test-runner": "^0.3.3",
     "reflect-metadata": "^0.1.8",
-    "rxjs": "5.0.0-rc.4",
-    "tns-core-modules": "^2.4.2"
+    "rxjs": "~5.0.1",
+    "tns-core-modules": "2.5.0"
   },
   "devDependencies": {
-    "zone.js": "~0.7.2",
+    "@angular/compiler-cli": "2.4.5",
     "babel-traverse": "6.8.0",
     "babel-types": "6.8.1",
     "babylon": "6.8.0",
-    "codelyzer": "0.0.28",
+    "codelyzer": "2.0.0-beta.4",
+    "copy-webpack-plugin": "~3.0.1",
+    "extract-text-webpack-plugin": "~2.0.0-beta.4",
     "filewalker": "0.1.2",
     "jasmine-core": "^2.4.1",
     "karma": "^1.2.0",
     "karma-jasmine": "^1.0.2",
     "karma-nativescript-launcher": "^0.4.0",
     "lazy": "1.0.11",
     "nativescript-dev-typescript": "^0.3.2",
-    "tslint": "^3.14.0",
-    "typescript": "~2.0.10"
+    "nativescript-dev-webpack": "^0.3.1",
+    "raw-loader": "~0.5.1",
+    "resolve-url-loader": "~1.6.0",
+    "tslint": "^4.0.0",
+    "typescript": "^2.1.0",
+    "webpack-sources": "~0.1.3",
+    "zone.js": "~0.7.2",
+    "nativescript-css-loader": "~0.26.0",
+    "htmlparser2": "^3.9.2",
+    "webpack": "2.2.0",
+    "@ngtools/webpack": "1.2.4"
   }
 }

tsconfig.aot.json

@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "ui/*": ["node_modules/tns-core-modules/ui/*"],
+      "platform": ["node_modules/tns-core-modules/platform"],
+      "image-source": ["node_modules/tns-core-modules/image-source"],
+      "xml": ["node_modules/tns-core-modules/xml"],
+      "xhr": ["node_modules/tns-core-modules/xhr"],
+      "text": ["node_modules/tns-core-modules/text"],
+      "data": ["node_modules/tns-core-modules/data"],
+      "fetch": ["node_modules/tns-core-modules/fetch"],
+      "trace": ["node_modules/tns-core-modules/trace"],
+      "fps-meter": ["node_modules/tns-core-modules/fps-meter"],
+      "color": ["node_modules/tns-core-modules/color"],
+      "application-settings": ["node_modules/tns-core-modules/application-settings"],
+      "http": ["node_modules/tns-core-modules/http"],
+      "camera": ["node_modules/tns-core-modules/camera"],
+      "console": ["node_modules/tns-core-modules/console"],
+      "timer": ["node_modules/tns-core-modules/timer"],
+      "utils": ["node_modules/tns-core-modules/utils"],
+      "location": ["node_modules/tns-core-modules/location"],
+      "file-system": ["node_modules/tns-core-modules/file-system"],
+      "application": ["node_modules/tns-core-modules/application"],
+      "image-asset": ["node_modules/tns-core-modules/image-asset"],
+      "connectivity": ["node_modules/tns-core-modules/connectivity"],
+      "globals": ["node_modules/tns-core-modules/globals"]
+
+    }
+   },
+  "exclude": [
+      "node_modules",
+      "platforms"
+  ],
+  "angularCompilerOptions": {
+    "skipMetadataEmit": true,
+    "genDir": "./"
+  }
+}

tsconfig.json

@@ -9,6 +9,7 @@
     },
     "exclude": [
         "node_modules",
-        "platforms"
+        "platforms",
+        "**/*.aot.ts"
     ]
 }

webpack.android.js

@@ -0,0 +1,2 @@
+var makeConfig = require("./webpack.common");
+module.exports = makeConfig("android");