From ce0e67f4278731b93ddbec9d6d2d4bd805b08ae1 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 10 Sep 2018 14:22:25 +0300 Subject: [PATCH 1/2] update typescript workers to work with latest webpack logic --- demo-angular/app/worker.service.ts | 15 +++++++------- demo-angular/package.json | 24 +++++++++------------- demo-angular/tsconfig.tns.json | 7 +++++++ demo-angular/webpack.config.js | 33 +++++++++++++++--------------- 4 files changed, 41 insertions(+), 38 deletions(-) create mode 100644 demo-angular/tsconfig.tns.json diff --git a/demo-angular/app/worker.service.ts b/demo-angular/app/worker.service.ts index 2fb540c..f68e107 100644 --- a/demo-angular/app/worker.service.ts +++ b/demo-angular/app/worker.service.ts @@ -1,8 +1,5 @@ import { Injectable } from "@angular/core"; -// add if building with webpack -import * as TsWorker from "nativescript-worker-loader!./workers/typescript.worker"; - @Injectable() export class WorkerService { constructor() { @@ -10,12 +7,16 @@ export class WorkerService { initTsWorker() { // add if building with webpack - const worker = new TsWorker(); + let w: any; - // remove if building with webpack - // const worker = new Worker("./workers/typescript.worker"); + if ((global).TNS_WEBPACK) { + var TsWorkerr = require("nativescript-worker-loader!./workers/typescript.worker.js"); + w = new TsWorkerr(); + } else { + w = new Worker("./workers/typescript.worker.js"); + } - return worker; + return w; } initJsWorker() { diff --git a/demo-angular/package.json b/demo-angular/package.json index 811e83d..3211131 100644 --- a/demo-angular/package.json +++ b/demo-angular/package.json @@ -5,11 +5,8 @@ "repository": "", "nativescript": { "id": "org.nativescript.webworkerdemo", - "tns-ios": { - "version": "next" - }, "tns-android": { - "version": "next" + "version": "4.2.0" } }, "dependencies": { @@ -22,23 +19,22 @@ "@angular/platform-browser": "~6.1.0", "@angular/platform-browser-dynamic": "~6.1.0", "@angular/router": "~6.1.0", - "nativescript-angular": "rc", + "nativescript-angular": "~6.1.0", "nativescript-theme-core": "~1.0.2", "reflect-metadata": "~0.1.8", - "rxjs": "~6.1.0", - "tns-core-modules": "~4.0.0", - "zone.js": "^0.8.4" + "rxjs": "^6.0.0", + "tns-core-modules": "~4.2.0", + "zone.js": "^0.8.26" }, "devDependencies": { - "@angular/compiler-cli": "~6.1.0", - "@ngtools/webpack": "~6.1.0", + "@angular/compiler-cli": "~6.1.7", + "@ngtools/webpack": "~6.2.0", "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "lazy": "1.0.11", - "nativescript-css-loader": "~0.26.0", - "nativescript-dev-typescript": "^0.7.1", - "nativescript-dev-webpack": "next", + "nativescript-dev-typescript": "^0.7.3", + "nativescript-dev-webpack": "^0.16.0", "ts-loader": "^4.3.0", "typescript": "~2.7.2", "verify-ns-build": "github:nativescript/verify-ns-build" @@ -48,4 +44,4 @@ "ns-verify-bundle": "ns-verify-bundle", "update-ns-webpack": "update-ns-webpack" } -} +} \ No newline at end of file diff --git a/demo-angular/tsconfig.tns.json b/demo-angular/tsconfig.tns.json new file mode 100644 index 0000000..95f2ece --- /dev/null +++ b/demo-angular/tsconfig.tns.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "module": "es2015", + "moduleResolution": "node" + } +} diff --git a/demo-angular/webpack.config.js b/demo-angular/webpack.config.js index 7c86e1f..8fe2674 100644 --- a/demo-angular/webpack.config.js +++ b/demo-angular/webpack.config.js @@ -3,6 +3,7 @@ const { join, relative, resolve, sep } = 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 CleanWebpackPlugin = require("clean-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); @@ -46,11 +47,18 @@ module.exports = env => { const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - const entryModule = aot ? - nsWebpack.getAotEntryModule(appFullPath) : - `${nsWebpack.getEntryModule(appFullPath)}.ts`; + const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`; const entryPath = `.${sep}${entryModule}`; + const ngCompilerPlugin = new AngularCompilerPlugin({ + hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), + platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null, + mainPath: resolve(appPath, entryModule), + tsConfigPath: join(__dirname, "tsconfig.tns.json"), + skipCodeGeneration: !aot, + sourceMap: !!sourceMap, + }); + const config = { mode: uglify ? "production" : "development", context: appFullPath, @@ -107,7 +115,7 @@ module.exports = env => { test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); + appComponents.some(comp => comp === moduleName); }, enforce: true, }, @@ -177,15 +185,12 @@ module.exports = env => { // Compile TypeScript files with ahead-of-time compiler. { - test: /.ts$/, exclude: /.worker.ts$/, use: [ + test: /.ts$/, use: [ "nativescript-dev-webpack/moduleid-compat-loader", "@ngtools/webpack", ] }, - // Compile Worker files with ts-loader - { test: /\.worker.ts$/, loader: "ts-loader" }, - // Mark files inside `@angular/core` as using SystemJS style dynamic imports. // Removing this will cause deprecation warnings to appear. { @@ -201,7 +206,7 @@ module.exports = env => { "process": undefined, }), // Remove all files from the out dir. - new CleanWebpackPlugin([ `${dist}/**/*` ]), + new CleanWebpackPlugin([`${dist}/**/*`]), // Copy native app resources to out dir. new CopyWebpackPlugin([ { @@ -224,19 +229,13 @@ module.exports = env => { // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), - - new AngularCompilerPlugin({ - hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), - entryModule: resolve(appPath, "app.module#AppModule"), - tsConfigPath: join(__dirname, "tsconfig.esm.json"), - skipCodeGeneration: !aot, - sourceMap: !!sourceMap, - }), + ngCompilerPlugin, // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin(), ], }; + if (report) { // Generate report files for bundles content config.plugins.push(new BundleAnalyzerPlugin({ From c15da341b9aad81133e6a01073036652f43854e3 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 10 Sep 2018 14:26:32 +0300 Subject: [PATCH 2/2] minor refactoring --- demo-angular/app/worker.service.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/demo-angular/app/worker.service.ts b/demo-angular/app/worker.service.ts index f68e107..3cf35c4 100644 --- a/demo-angular/app/worker.service.ts +++ b/demo-angular/app/worker.service.ts @@ -7,16 +7,16 @@ export class WorkerService { initTsWorker() { // add if building with webpack - let w: any; + let worker: any; if ((global).TNS_WEBPACK) { - var TsWorkerr = require("nativescript-worker-loader!./workers/typescript.worker.js"); - w = new TsWorkerr(); + var TsWorker = require("nativescript-worker-loader!./workers/typescript.worker.js"); + worker = new TsWorker(); } else { - w = new Worker("./workers/typescript.worker.js"); + worker = new Worker("./workers/typescript.worker.js"); } - return w; + return worker; } initJsWorker() {