nstudio / xplat

Cross-platform (xplat) tools for Nx workspaces.

Cross-platform (xplat) tools for Nx workspaces

---

xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.

Currently supported platforms

• Electron

  Build cross platform desktop apps with JavaScript, HTML, and CSS.

• Ionic

  Build amazing apps in one codebase, for any platform, with the web.

• NativeScript

  Build rich iOS and Android apps with direct access to native api's from JavaScript directly.

Quickstart

npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · {your-workspace-name}

# Choose "None"

? Which stack do you want to use? … 
None:          Configures a minimal structure without specific frameworks or technologies.

# Choose "Integrated"

? Package-based or integrated? … 
Integrated:    Nx creates a workspace structure most suitable for building apps.

Init workspace

Install the @nx/js plugin.

npm install @nx/js -D

Now initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.

npx nx g @nx/js:init

Install the tools:

npm install @nstudio/xplat -D

You are now ready to create apps:

npx nx g @nstudio/xplat:app

Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e

App generation examples

The additional app generators can be used as follows:

Electron

Electron app generator can use any web app in the workspace as it's target.

If you don't have a web app yet, create one first:

npx nx g @nstudio/xplat:app sample

choose web

You can now use the web app as the Electron target:

npx nx g @nstudio/xplat:app desktop --target=web-sample

choose electron

Develop with:

npm run start.electron.desktop

Ionic

npx nx g @nstudio/xplat:app sample

choose ionic

Develop in browser with:

npx nx serve ionic-sample

Build Ionic app:

npx nx build ionic-sample

A. Capacitor iOS - Prepare for development

npm run prepare.ionic.sample.ios

You can now open in Xcode for further development:

npm run open.ionic.sample.ios

B. Capacitor Android - Prepare for development

npm run prepare.ionic.sample.android

You can now open in Android Studio for further development:

npm run open.ionic.sample.android

NativeScript

nx g @nstudio/xplat:app mobile

choose nativescript

A. iOS

npx nx run nativescript-mobile:ios

B. Android

npx nx run nativescript-mobile:android

Documentation

• Getting Started
• Fundamentals
• API Documentation
• Design Doc
• Wiki

Talks

• Super Powered, Server Rendered Progressive Native Apps by Nathan Walker and Jeff Whelpley
• ngAir 172 - xplat (cross-platform) tools for Nx workspaces with Nathan Walker

Recommended extra tooling

• VS Code
• Nx Console for VS Code

Example repos for different scenarios

• Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
• Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing

Context

• Why it's Hard to Decide on Technologies by Adam Klein

xplat's Issues

Bug: Generators for directives, pipes and services uses inconsistent array names

Hi,

If I have a feature named hugo without any directives and create a new directive:

 > ng g directive first --feature hugo
CREATE libs/features/hugo/directives/first.directive.ts (138 bytes)
CREATE libs/features/hugo/directives/index.ts (103 bytes)
UPDATE libs/features/hugo/hugo.module.ts (252 bytes)

libs/features/hugo/directives/index.ts looks like this:

import { FirstDirective } from './first.directive';

export const FIRST_DIRECTIVES = [FirstDirective];

libs/features/hugo/hugo.module.ts looks like this

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HUGO_DIRECTIVES } from './directives';

@NgModule({
  schemas: [NO_ERRORS_SCHEMA],
  declarations: [...HUGO_DIRECTIVES],
  exports: [...HUGO_DIRECTIVES]
})
export class HugoModule {}

As you can see FIRST_DIRECTIVES is exported but the HugoModule expects the name HUGO_DIRECTIVES.

This is only a problem when the directives/index.ts-file doesn't exists.

It is the same issue with services and pipes.

I'm making a PR fixing this in a moment.

electron support

• app generator
  • ability to create new or even target existing web apps to wrap in electron
• xplat/electron

related: #3

Error in "npm i"

Reproduction

create-nx-workspace demo
cd .\demo\
 npm install @nstudio/schematics --save-dev
ng g xplat --prefix=foo --platforms=web,electron
ng g app web
ng g app.electron desktop --target=web-web
npm i

Output

"ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES" is not recognized as an internal or external command, operable program or batch file. 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true npx electron-builder install-app-deps`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

OS: Windows 10
npm: 6.4.1
node: 10.4.1

Question: Unit testing with xplat + nativescript?

Hi @NathanWalker

How would you do unit testing for nativescript with xplat?

The shared code and web is easy enough with ng test, but I'm not sure what is the best strategy for nativescript.

Would it be best to generate a nativescript-test app and configure it with tns test init or is there a better way to do it?

I see nativescript-angular uses their own wrappers for TestBed: https://github.com/NativeScript/nativescript-angular/blob/master/tests/app/tests/list-view-tests.ts

Maybe the generated spec-files for xplat/nativescript should use these?

Cannot update

Running ng update produces the following error:

Not found : @test/scss

---

Reproduction steps:

• create-nx-workspace test
• npm install @nstudio/schematics --save-dev
• ng g xplat --prefix=foo --platforms=web,nativescript,ionic
• ng update

ionic problems

[ts] Cannot find module '@myWorkspace/ionic'.

Failed to compile.
global.scss
@import '~@myWorkspace/ionic/scss/index';

ng update
Not found : @myWorkspace/scss

ionic 4.0.0-rc.11
Angular CLI: 6.0.8
Node: 10.7.0
OS: win32 x64
Angular:
...

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2

when generating services, there's no option for base class

ng generate @nstudio/schematics:service beef --platforms=ionic,web,nativescript

generates services in web, ionic, nativescript, but has no option for creating a base class in libs/core/services this would be useful, but in the meantime the workaround is to make the base class manually and make each platform extend it.

ng g ngrx - usage question

Hi,

I'm trying to generate a shared @ngrx/store under my login-feature.

First a minor problem, error message prints an incorrect example:

> ng g ngrx
You did not specify the name of the state you'd like to generate. For example: ng g state my-state --feature=foo --platforms=web,nativescript

• ng g state isn't a command
• The namemy-state generated invalid code, it should to be camelCased

If I follow the advice (assuming it store should've been ngrx):

 > ng g ngrx session --feature=login --platforms=web,nativescript
CREATE xplat/nativescript/features/login/state/index.ts (90 bytes)
CREATE xplat/nativescript/features/login/state/session.actions.ts (662 bytes)
CREATE xplat/nativescript/features/login/state/session.effects.spec.ts (1017 bytes)
CREATE xplat/nativescript/features/login/state/session.effects.ts (714 bytes)
CREATE xplat/nativescript/features/login/state/session.reducer.spec.ts (401 bytes)
CREATE xplat/nativescript/features/login/state/session.reducer.ts (474 bytes)
CREATE xplat/nativescript/features/login/state/session.state.ts (219 bytes)
CREATE xplat/web/features/login/state/index.ts (90 bytes)
CREATE xplat/web/features/login/state/session.actions.ts (662 bytes)
CREATE xplat/web/features/login/state/session.effects.spec.ts (1017 bytes)
CREATE xplat/web/features/login/state/session.effects.ts (714 bytes)
CREATE xplat/web/features/login/state/session.reducer.spec.ts (401 bytes)
CREATE xplat/web/features/login/state/session.reducer.ts (474 bytes)
CREATE xplat/web/features/login/state/session.state.ts (219 bytes)
UPDATE xplat/nativescript/features/login/index.ts (88 bytes)
UPDATE xplat/nativescript/features/login/login.module.ts (755 bytes)
UPDATE xplat/web/features/login/index.ts (88 bytes)
UPDATE xplat/web/features/login/login.module.ts (755 bytes)
UPDATE package.json (4450 bytes)

As you can see it generated reducers, effects etc under xplat/web/features/login and xplat/nativescript/features/login.
I'd expect them to be generated under libs/features/login.

If I try without --platforms I get this error:

 > ng g ngrx session --feature login                             
libs/features/login/login.module.ts does not exist. Create the feature module first. For example: ng g feature login

But the file libs/features/login/login.module.ts is not created by ng g feature login.

Expected

In most use-cases we want to share the effects and reducers between the platforms.
In rare cases we might want to have a platform specific store or more likely effects-class.

ng update fails with 404 on /scss directory

Having trouble updating from schematics 6.3.2 to latest (7.2.1 currently).

ng update @nstudio/schematics
404 Not Found: @projectname/scss

however, this directory exists under libs/ and hasn't even been touched since the project was generated.

Angular Console: schematic options adjustment to allow dropdown options to show up

option to suffix platform type to app name instead of prefixing

im talking about changing:

apps/
  ionic-myapp
  web-anotherapp
  web-myapp

to:

apps/
  anotherapp-web
  myapp-ionic
  myapp-web

prefixing and suffixing is basically grouping and im in favor of grouping by app instead of platform because:

1. its easier to use the directory tree when having dozens of apps and multiple platforms per app
2. my intuitive reasoning is ordered to prioritize the app over the platform (start.app.platform.ios instead of start.platform.app.ios)
3. if i understand correctly the current way conflicts with nx:

ng g app myapp
ng g app myapp2 --directory=mydirectory
ng g lib mylib
ng g lib mylib2 --directory=mydirectory

ng build myapp
ng build mydirectory-myapp2
ng build mylib # work if the lib is marked as publishable
ng build mydirectory-mylib2 # work if the lib is marked as publishable

--platforms=all

• would add all supported platforms on generation
• would work with individual generators to auto gen them for whichever platforms are currently in the workspace

npm run prepare.ionic.appname.android return an error

Reproduction

# 1
ng g xplat --prefix=bodies --platforms=ionic
# 2
ng g app.ionic bodies
# 3
 npm run prepare.ionic.bodies.android

after this command I got this output

> [email protected] prepare.ionic.bodies.android /home/secret/Projects/xplat/bodies
> npm run prepare.ionic.bodies && cd apps/ionic-bodies && npm run cap.add.android


> [email protected] prepare.ionic.bodies /home/secret/Projects/xplat/bodies
> npm run clean && npm run clean.ionic.bodies && npm run build.ionic.bodies


> [email protected] clean /home/secret/Projects/xplat/bodies
> npx rimraf -- hooks node_modules package-lock.json && npm i

npm WARN deprecated @ionic/[email protected]: @ionic/ng-toolkit and @ionic/schematics-angular have merged into @ionic/angular-toolkit -- see https://github.com/ionic-team/starters/pull/487
npm WARN deprecated @ionic/[email protected]: @ionic/ng-toolkit and @ionic/schematics-angular have merged into @ionic/angular-toolkit -- see https://github.com/ionic-team/starters/pull/487
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.

> [email protected] install /home/secret/Projects/xplat/bodies/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/secret/.npm/node-sass/4.9.3/linux-x64-57_binding.node

> [email protected] postinstall /home/secret/Projects/xplat/bodies/node_modules/node-sass
> node scripts/build.js

Binary found at /home/secret/Projects/xplat/bodies/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine

> @nstudio/[email protected] postinstall /home/secret/Projects/xplat/bodies/node_modules/@nstudio/schematics
> node scripts/postinstall.js

Patch for nx format have been applied
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @nrwl/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/router@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/architect@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/build-angular@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/core@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/schematics@~0.8.0-rc.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1235 packages from 1223 contributors and audited 43723 packages in 58.356s
found 0 vulnerabilities


> [email protected] clean.ionic.bodies /home/secret/Projects/xplat/bodies
> cd apps/ionic-bodies && npx rimraf -- hooks node_modules platforms www plugins ios android package-lock.json && npm i && rimraf -- package-lock.json

npm WARN deprecated @ionic/[email protected]: @ionic/ng-toolkit and @ionic/schematics-angular have merged into @ionic/angular-toolkit -- see https://github.com/ionic-team/starters/pull/487
npm WARN deprecated @ionic/[email protected]: @ionic/ng-toolkit and @ionic/schematics-angular have merged into @ionic/angular-toolkit -- see https://github.com/ionic-team/starters/pull/487
npm ERR! code ENOLOCAL
npm ERR! Could not install from "../../node_modules/rxjs-compat" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/secret/.npm/_logs/2018-11-27T11_50_10_357Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] clean.ionic.bodies: `cd apps/ionic-bodies && npx rimraf -- hooks node_modules platforms www plugins ios android package-lock.json && npm i && rimraf -- package-lock.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] clean.ionic.bodies script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/secret/.npm/_logs/2018-11-27T11_50_10_551Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepare.ionic.bodies: `npm run clean && npm run clean.ionic.bodies && npm run build.ionic.bodies`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepare.ionic.bodies script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/secret/.npm/_logs/2018-11-27T11_50_10_669Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepare.ionic.bodies.android: `npm run prepare.ionic.bodies && cd apps/ionic-bodies && npm run cap.add.android`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepare.ionic.bodies.android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/secret/.npm/_logs/2018-11-27T11_50_10_761Z-debug.log

I also ensured that all dependencies installed by running npm install
My OS is Ubuntu 16.04 LTS x64
I have globally installed @nrwl/schematics, @angular/cli, ionic, cordova

How to solve this problem?

error generating web app - cannot read property "split" of undefined

To re create...

issue the following commands from setup guide ..
https://nstudio.io/xplat/#setupguide

1. create-nx-workspace abcFoundry
2. npm install @nstudio/schematics --save-dev
3. ng g xplat --prefix=abc--platforms=web,nativescript
4. ng g app appname

Get Error ...
Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at /abcFoundry/node_modules/@angular/cli/node_modules/yargs-parser/index.js:385:15
at Array.forEach ()

package.json as follows...

{
"name": "abc-foundry",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "./node_modules/.bin/nx lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "./node_modules/.bin/nx affected:apps",
"affected:libs": "./node_modules/.bin/nx affected:libs",
"affected:build": "./node_modules/.bin/nx affected:build",
"affected:e2e": "./node_modules/.bin/nx affected:e2e",
"affected:test": "./node_modules/.bin/nx affected:test",
"affected:lint": "./node_modules/.bin/nx affected:lint",
"affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph",
"format": "./node_modules/.bin/nx format:write",
"format:write": "./node_modules/.bin/nx format:write",
"format:check": "./node_modules/.bin/nx format:check",
"update": "ng update @nrwl/schematics",
"update:check": "ng update",
"workspace-schematic": "./node_modules/.bin/nx workspace-schematic",
"dep-graph": "./node_modules/.bin/nx dep-graph",
"help": "./node_modules/.bin/nx help",
"clean.shared": "cd libs/ && git clean -dfX && cd ../xplat/ && git clean -dfX"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26",
"@nrwl/nx": "6.4.0",
"@ngrx/effects": "6.1.0",
"@ngrx/router-store": "6.1.0",
"@ngrx/store": "6.1.0",
"@ngx-translate/core": "~10.0.1",
"@ngx-translate/http-loader": "~3.0.1",
"@abcFoundry/scss": "file:libs/scss",
"reflect-metadata": "^0.1.12",
"nativescript-angular": "~6.1.0",
"nativescript-ngx-fonticon": "^4.2.0",
"nativescript-theme-core": "^1.0.4",
"rxjs-compat": "^6.2.2",
"tns-core-modules": "~4.2.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/cli": "6.2.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@ngrx/store-devtools": "6.1.0",
"@nrwl/schematics": "6.4.0",
"@nstudio/schematics": "^6.2.8",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "0.3.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ngrx-store-freeze": "0.2.4",
"prettier": "1.13.7",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
"tns-platform-declarations": "~4.2.0"
},
"xplat": {
"prefix": "abc"
}
}

--sample flag question

From twitter:

Hi. Was trying to test out xplat with --sample. But looks like items not added to xplat/nativescript/features. "Please add a @NgModule annotation.
../../xplat/nativescript/features/index.ts(1,15): error TS2307: Cannot find module './items'." Ideas? Thnx!

Bug: Can't generate shared ngrx for feature

Hi @NathanWalker

I'm having problems generating a new ngrx store.

I want to create a feature called settings and under that I want to create a state called rendering-settings.

> ng g ngrx rendering-settings --feature settings
libs/features/settings/settings.module.ts does not exist. Create the feature module first. For example: ng g feature settings

But libs/features/settings/settings.module.ts is not generated by:

> ng g feature settings --platforms web,nativescript --only-module
CREATE xplat/web/features/settings/index.ts (34 bytes)
CREATE xplat/web/features/settings/settings.module.ts (171 bytes)
CREATE xplat/nativescript/features/settings/index.ts (35 bytes)
CREATE xplat/nativescript/features/settings/settings.module.ts (214 bytes)
UPDATE xplat/web/features/index.ts (166 bytes)
UPDATE xplat/nativescript/features/index.ts (193 bytes)

I've @nstudio/[email protected]

Nativescript related code in no-nativescript platforms

Hi,
Why are nativescript packages added to package.json when I create a workspace with web/ionic platforms?

package.json:

    "nativescript-angular": "~6.1.0",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-theme-core": "^1.0.4"

Is this a bug?

Question about creating & accessing shared components

@NathanWalker I'm trying to learn the best approach for creating a shared component in libs and then accessing it either in xplat or my app.

I am testing out a search feature that I previously built on the web and want to make it accessible on mobile and web. I added my ngrx and api.service to libs. I manually added the following component libs/features/ui/base/search.base-component.ts to add in my search code.

I tried importing that into my web project's home component (just to test) and I get compiling errors and the following error:
ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for HomeComponent: (?). Error: Can't resolve all parameters for HomeComponent: (?).

Can you assist with the proper work-flow and any explanation?

Question: Migration strategy for existing Angular CLI project with shared code?

I don't see anything obvious in the Nx or xplat documentation, so I'm curious if there is a best practices guide or set of migration tools that would ease the pain of:

1. Adding Nx + xplat to an existing Angular CLI web application
2. Converting existing shared code into Nx libs without having to manually update all imports

Couldn't run NativeScript app with AOT enabled

Hi, I created a NativeScript app and tried running it with AOT enabled, but I got the following error:

System.err: com.tns.NativeScriptException: 
System.err: Calling js method onCreate failed
System.err: 
System.err: TypeError: Cannot read property 'name' of undefined
System.err: File: "file:///data/data/org.nativescript.client/files/app/vendor.js, line: 24892, column: 128
System.err: 
System.err: StackTrace: 
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 24892, column: 129
System.err: 	Frame: function:'push.../../../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 56413, column: 26
System.err: 	Frame: function:'onInvoke', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 24427, column: 33
System.err: 	Frame: function:'push.../../../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 56412, column: 32
System.err: 	Frame: function:'push.../../../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.Zone.run', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 56163, column: 43
System.err: 	Frame: function:'push.../../../node_modules/@angular/core/fesm5/core.js.NgZone.run', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 24341, column: 28
System.err: 	Frame: function:'push.../../../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 24891, column: 23
System.err: 	Frame: function:'_bootstrapper', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 52840, column: 35
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 52916, column: 19
System.err: 	Frame: function:'push.../../../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 73988, column: 23
System.err: 	Frame: function:'notifyLaunch', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 91871, column: 17
System.err: 	Frame: function:'push.../../../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 91804, column: 28
System.err: 	Frame: function:'push.../../../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 91678, column: 14
System.err: 	Frame: function:'push.../../../node_modules/tns-core-modules/ui/frame/activity.js.NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.client/files/app/vendor.js', line: 89619, column: 25
System.err: 
System.err: 	at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: 	at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
System.err: 	at android.app.Activity.performCreate(Activity.java:6975)
System.err: 	at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1213)
System.err: 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2770)
System.err: 	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892)
System.err: 	at android.app.ActivityThread.-wrap11(Unknown Source:0)
System.err: 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:105)
System.err: 	at android.os.Looper.loop(Looper.java:164)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:6541)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

I am using the following configuration:
Angular: 7.1.1
NativeScript CLI: 5.0.2

Do I need to add any extra configuration to make AOT work?

Thanks!

How to use scss inside libs folder in apps.

I could see an issue in xplat while adding scss files(variables and colors) from libs to app. Did anyone face the same issue, please help me to solve it.

Changes to {N} templates do not update

I've created a new xplat nativescript project using the guide:

npm install -g @nrwl/schematics
npm install -g @angular/cli
create-nx-workspace test-app

npm install @nstudio/schematics --save-dev

ng g xplat --prefix=foo --platforms=web,nativescript

ng g app.nativescript appname
npm i

The app compiles successfully when I run npm run start.nativescript.appname.android and I can see the app screen with the text hello xplat.

If I try to make a change to either the en.json locale or the Label element in app.component.ts to something else I see webpack pick up on the change and it recompiles. However the label does not update in the android emulator.

<Label automationText="helloLabel" text="Hello World" class="h1 p-10 text-center"></Label>

I've tried stopping the npm script and starting it again but I still see the old label. I have to run npm run clean.nativescript.app and then npm run start.nativescript.app.android to see the change.

I also have a another xplat project that has both a web and nativescript app and I see the same issue with the nativescript app. I have no problems with the web app updating.

I uploaded the demo to a github repo: https://github.com/barryajones/xplat-demo

feature: livesync-navigation for hmr

Hi,

Great update with HMR support, thanks.

A small suggestion:
Add livesync-navigation.ts to preserve and restore the state.

I think xplat/nativescript/core/livesync-navigation.ts would be a good place to put it.

Not able to add admin script

I started to play with xplat today. Followed instructions from main page, started only with web platform, but in the admin part, when I tried to run ng g admin in workspace root, got this error:

Schematic "admin" not found in collection "@nstudio/schematics".
Error: Schematic "admin" not found in collection "@nstudio/schematics".
    at SchematicEngine.createSchematic (C:\git\xplat-angular-workspace\node_modules\@angular-devkit\schematics\src\engine\engine.js:224:23)
    at CollectionImpl.createSchematic (C:\git\xplat-angular-workspace\node_modules\@angular-devkit\schematics\src\engine\engine.js:69:29)
    at Object.getSchematic (C:\git\xplat-angular-workspace\node_modules\@angular\cli\utilities\schematics.js:43:23)
    at GenerateCommand.getOptions (C:\git\xplat-angular-workspace\node_modules\@angular\cli\models\schematic-command.js:216:40)
    at GenerateCommand.<anonymous> (C:\git\xplat-angular-workspace\node_modules\@angular\cli\commands\generate.js:45:53)
    at Generator.next (<anonymous>)
    at fulfilled (C:\git\xplat-angular-workspace\node_modules\@angular\cli\commands\generate.js:11:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)

Windows 8. Node 8.11.4. npm 5.8.0.

Nx module boundary enforcement for platform folders

• To prevent and warn devs of platform related imports in incorrect barrels

Source Maps When Launching and Debugging with VSCode - generate proper launch.json on {N} app creation

I'm trying to use the NativeScript VSCode Plugin to debug my xplat app. I've found that the default launch.json that comes with the extension does work with some minor tweaking (updating the webpack:/// directory to point to apps/my-nativescript-app/app)

However the breakpoints do not work for anything outside of the apps folder. Anything in libs or xplat/nativescript has breakpoint issues. I'm sure it's just a matter of configuring sourceMapPathOverrides to map the right webpack paths to the right files on disk but I'm not really a webpack expert.

It might be good to potentially provide an example launch.json with the project to show how you can debug xplat in VSCode.

My launch.json looks something like this:

      "name": "Launch on iOS",
      "type": "nativescript",
      "request": "launch",
      "platform": "ios",
      "appRoot": "${workspaceRoot}/apps/nativescript-client/",
      "sourceMaps": true,
      "watch": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/apps/nativescript-app/app/*",
      }

Electron Main Process logging.

It seems that console.log('Test main process'); inside main process located in:
xplat-project/apps/electron-app/src/index.ts
is not outputting anything to terminal.

Unable to generate Web App

I have made a clean install of my workspace using the instruccions step by step.
But the generation of the web app with ng g app webapp fails with Cannot read property 'kind' of undefined.

The generation of a NativeScript app is successful.
I have also erased the node_modules folder and reinstall the packages

I have tried to track the issue and it seems to be a problem with the schematics in nrwl. The process fails at the function addNxModule of @nrwl\schematics\src\collection\application\index.js at the line 25.

I'm not sure if the issue is rooted in Xplat or Nrwl as I'm not quite sure how schematics work. Otherwise I'd like to help as much as a I can.

Here are the dependencies on the generated package.json following the instructions:

"dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
    "@nrwl/nx": "6.2.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@ngx-translate/core": "~10.0.1",
    "@ngx-translate/http-loader": "~3.0.1",
    "@CloudReports/scss": "file:libs/scss",
    "nativescript-angular": "~6.1.0",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-theme-core": "^1.0.4",
    "reflect-metadata": "^0.1.12",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "~4.2.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@ngrx/store-devtools": "6.0.1",
    "@nrwl/schematics": "6.2.0",
    "@nstudio/schematics": "^6.2.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "0.3.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "0.2.4",
    "prettier": "1.13.7",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "2.7.2",
    "tns-platform-declarations": "~4.2.0"
  },
  "xplat": {
    "prefix": "app"
  }

Updates to Support Ionic in 4.0.0-beta.3

I ran into a series of issues with Ionic and solved them one by one. Here are the needed changes in order for the Ionic 4.0.0-beta.3 and greater to work.

1. After running npm run clean.ionic.[appName] I would run into errors saying rxjs-compat does not have a config file. The solution:

npm i rxjs-compat

2. After running npm run start.ionic.[appName] I would receive [ng] ERROR in ../../node_modules/@ionic/core/dist/types/interface.d.ts(41,42): error TS1005: ';' expected.. The solution was to update TypeScript in package.json:

"typescript": "~2.9.2"

3. After running npm run start.ionic.[appName] again the following error came up [ng] ERROR in src/app/app.component.ts(3,10): error TS2305: Module '"/usr/app/node_modules/@ionic/core/dist/types/interface"' has no exported member 'isCapacitorNative'.. The solution is to do the following in the Ionic Apps app.component.ts file.

A. Remove import { isCapacitorNative } from '@ionic/core';
B. Change if (isCapacitorNative(window)) to if (this.platform.is('capacitor'))

NativeScript Core module generation support

Support generating a new NativeScript Core set of related resources according to an opinionated architectural pattern.

feat: template generated from predefined templates in workspace

Hi! Playing around with xplat and generating components. I'm concerned about duplicate Ionic templates. Part of the joy of Ionic is that the templates are identical.

I'm wondering if there is the possibility of "base" templates? For instance,

libs/features/home/home.component.html
libs/features/home/home.component.ts

and when web or ionic components are generated, have the component reference the template from libs?

@Component({
  selector: 'abc-home',
  templateUrl: 'home.component.html' <-- import from libs/features? 
})
export class ActivityListComponent extends ActivityListBaseComponent {
  constructor() {
    super();
  }
}

alternatively, if at build time no templates are found, copy them from libs?

Brand new nx workspace cannot find xplat

Just created new nrwl/nx workspace and installed @nstudio/schematics.

ng g xplat --prefix=myprefix --platforms=nativescript

Schematic "xplat" not found in collection "@nrwl/schematics"

Schematic "app.nativescript" not found in collection "@nrwl/schematics".

"@nrwl/nx": "7.4.1",
`ng --version

Package Version

@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/cli 7.1.4
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
`

unable to generate new app after i have first generated an app

after i have generated my native script app doing

ng g app.nativescript reaction

i am unable to do

ng g app reaction

the system takes up 100% and the system does not go anywhere. I have tried with a blank repo, no avail.

Hooks needed for component scss-files

Hi @NathanWalker,

We're using scss for our shared components.
This gives us some problems during the bundling process, since nativescript-dev-sass only compiles the scss-files in the app-folder.

We've solved this by making this before-prepare script:

const converter = require('nativescript-dev-sass/lib/converter');
const path = require('path');
const rootPkg = require('../../../../package.json');

module.exports = function($logger, $projectData) {
  const nodeModulesPath = path.join($projectData.projectDir, 'node_modules');
  const prefix = `@${rootPkg.name}`;
  const prefixModulePath = path.join(nodeModulesPath, prefix, 'nativescript');
  return converter.convert($logger, $projectData.projectDir, prefixModulePath, $projectData.appResourcesDirectoryPath);
};

watch-hook (only needed for non-bundle builds):

const converter = require('nativescript-dev-sass/lib/converter');
const path = require('path');
const rootPkg = require('../../../../package.json');

module.exports = function($logger, $projectData, hookArgs) {
	if (hookArgs.config) {
		const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
		if (appFilesUpdaterOptions.bundle) {
			$logger.warn("Hook skipped because bundling is in progress.")
			return;
		}
	}

  const nodeModulesPath = path.join($projectData.projectDir, 'node_modules');
  const prefix = `@${rootPkg.name}`;
  const prefixModulePath = path.join(nodeModulesPath, prefix, 'nativescript');
  return converter.convert($logger, $projectData.projectDir, prefixModulePath, $projectData.appResourcesDirectoryPath, { watch: true });
}

We've run into this problem after we started using the unit tests for nativescript, when we switched the styleUrls from *.component.scss to *.component.css.

I'm making a PR for this.

environments dir placement

For the sake of consistency (with Angular), can we have the environments dir on the same level as libs, apps and xplat instead of inside libs/core?

Add link to Angular Console in readme and in docs as preferred tool to use with xplat

NativeScript core themes not applied

Hi !

I tried to apply the NativeScript core themes (doc : https://docs.nativescript.org/angular/ui/theme), in a NativeScript app within my xplat workspace, but it seems that themes are ignored (testing on Android).

By default, the ~nativescript-theme-core/css/core.light.css theme appears to be applied without needing to import it. But when I import either ~nativescript-theme-core/css/core.dark.css or a color palette like ~nativescript-theme-core/css/lime.css into my app's scss/_index.scss file, no change is visible on my buttons or ActionBar.

Here is my scss/_index.scss file:

@import '~nativescript-theme-core/css/lime.css';
@import 'variables';

And here is the template of the first component to be loaded inside AppComponent's <page-router-outlet>:

<ActionBar class="action-bar" title="This is the title"></ActionBar>

<StackLayout class="page">
	<Label text="My first page" class="body"></Label>
	<Button class="btn btn-primary btn-active" text="Little button"></Button>
</StackLayout>

How can I use NativeScript core themes, color palettes or custom themes in an xplat workspace?

format is not applied to all files under xplat

Hi @NathanWalker

npm run format only works for a few the files under xplat/.

e.g.:

xplat/nativescript/index.ts 3ms
xplat/web/index.ts 1ms

It is caused by the patch in: https://github.com/nstudio/xplat/blob/master/scripts/postinstall.ts#L34
The globs should be wrapped in quotation.

If I've time later tonight I'll write a PR fixing it.
But before I do that I've a question:
If I just fix the patch, it will throw an error, if the old-patch have been applied.

Do you want me to fix old already applied patch, or should I just let it throw that error?

peerDependencies note

From @m-abs on July 10, 2018 14:12

Hi,

When we create a new xplat-project, npm complains about many packages.
nativescript-angular is ~6.0.0, which installs 6.0.6 at the moment.

But angular is locked to 6.0.1, which is too low for [email protected].

ngrx is at 5.2.0 which have peerDependencies for angular/*@5.x and [email protected].
Unfortunately @nrwl/schematics breaks for ngrx/[email protected]

Copied from original issue: nstudio/xplat-issues#24

Routing not working in the Ionic App

Routing is not working in the ionic 4 app created.
The URL is updated, but the view is not rendered.

react support

• create-react-app generator
• xplat/react for shared react component use
• ability to consume react in angular apps and vice versa

Approach to dealing with nested smart/ dumb components

From @goelinsights on April 23, 2018 19:53

Trying to figure out the pattern for injecting nested smart and dumb components. Is the solution to re-create them but extract the repeating function logic in the components into services?

Example (gallery with a list of photos. Smart/dumb component pattern for gallery but not for photo using material design):
app-gallery-page.component.html

<div [data]="gallery$ | async">
  <app-gallery [data]="gallery">
   <mat-grid-list>
      <app-gallery-photo *ngFor="photo of gallery.photos">
        <mat-grid-tile> 
            ...
        </mat-grid-tile>
      </app-gallery-photo>
   </mat-grid-list>
  </app-gallery>
</div>

In the current angular smart/ dumb approach you use the html template for AppGalleryPage to drive the remainder of what's displayed downstream. Is there any way to reuse all of this (i.e., swapping out HTML templates using a conditional in templateUrl that would compile, etc, that would be smaller than stuffing all of the HTML for different versions with a flag?)

In this case, say material design only works in a SSR (web) and Admin (web) version of the app, but you'd want to reuse the logic in the smart component as a starting point for the AMP version but need a different HTML setup, is there a way to do this that would be better than shipping a bunch of conditional IF blocks, i.e.,?

app-gallery-page.component.html

<div [data]="gallery$ | async">
  <app-gallery [data]="gallery">
   <mat-grid-list *ngIf="!!web">
      <app-gallery-photo *ngFor="photo of gallery.photos" [admin]="adminStatus"[version]="web">
        <mat-grid-tile> 
            ...stuff
        </mat-grid-tile>
       <app-gallery-photo-admin *ngIf="!!adminStatus">
       <app-gallery-photo-admin
      </app-gallery-photo>
   </mat-grid-list>
    <amp-alternative-to-grid *ngIf="!web && !!amp">
        <app-gallery-photo *ngFor="photo of gallery.photos" [admin]="false" [version]="amp">
             ...stuff
        </app-gallery-photo>
    </amp-alternative-to-grid>

  </app-gallery>
</app-gallery-page>

Similar question on if that means that we'd need to ship all the code related to the Admin version so things don't break, despite creating a much lighter non-admin app if we can avoid loading that code.

Copied from original issue: nstudio/xplat-issues#3

universal support

• xplat/ssr for shared universal bits as well as nest integrations
• universal app generation or targeting of existing apps for universal integration

missing postinstall.js

Seems like I can still build and run tests, but after the initial yarn I get

$ node scripts/postinstall.js
module.js:549
    throw err;
    ^

Error: Cannot find module '/Users/xxx/code/xplat/scripts/postinstall.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

suggestion to organize schematics

this is regrding nrwl/nx#619 (comment)

i love what xplat makes possible but i find it difficult to use because of its opinionated nature. to make my point of view clear, i see that xplat is about extending nx with the ability to create nativescript, ionic, electron, etc apps in addition to what nx already has, angular "web" apps. however, xplat goes beyond this by populating the libs directory and any generated app dirs with opinionated base code.

problem

the generated opinionated base code conflicts with my opinionated base code.

suggested solution

split the schematics into core (ng g app commands) and optional (everything else including the xplat dir).

on one hand there shouldn't even be optional schematics because people could extend the core collection with their own schematic repos. on the other hand if enough standards exist having "official" optional schematics that could all be run separately (i.e. one for i18n, one for themes, etc) would be helpful too.

main.ts issue after update

Just updated to xplat 7.2.3.

Running:
cd apps/nativescript-maintmobile && tns run ios --emulator --bundle --hmr

Getting TSC errors in main.ts due to <% syntax and references to routing and sample not existing:

app/main.ts(16,6): error TS1109: Expression expected.
app/main.ts(16,31): error TS1109: Expression expected.
app/main.ts(16,32): error TS1109: Expression expected.
app/main.ts(19,4): error TS1110: Type expected.
app/main.ts(19,6): error TS1109: Expression expected.
app/main.ts(19,8): error TS1109: Expression expected.
app/main.ts(19,9): error TS1109: Expression expected.
app/main.ts(20,3): error TS1109: Expression expected.

Line 16 issue in main.ts:

  // attach to livesync hooks and perform navigation
  require('@gp-mm/nativescript').attachLivesyncNavigation();
  <% } %>
  const hmrUpdate = require('nativescript-dev-webpack/hmr').hmrUpdate;

Full main.ts

import 'reflect-metadata';
import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { AppOptions } from 'nativescript-angular/platform-common';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

// If built with env.uglify
declare const __UGLIFIED__;
if (typeof __UGLIFIED__ !== 'undefined' && __UGLIFIED__) {
  require('@angular/core').enableProdMode();
}

let options: AppOptions = {};
if (module['hot']) {
  <% if (routing || sample) { %>
  // attach to livesync hooks and perform navigation
  require('@gp-mm/nativescript').attachLivesyncNavigation();
  <% } %>
  const hmrUpdate = require('nativescript-dev-webpack/hmr').hmrUpdate;

  options.hmrOptions = {
    moduleTypeFactory: () => AppModule,
    livesyncCallback: platformReboot => {
      console.log('HMR: Sync...');
      hmrUpdate();
      setTimeout(platformReboot, 0);
    }
  };
  hmrUpdate();

  module['hot'].accept(['./app.module']);
}

platformNativeScriptDynamic(options).bootstrapModule(AppModule);

Package.json Deps:

    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "^7.1.0",
    "@ngx-translate/core": "~11.0.0",
    "@ngx-translate/http-loader": "~4.0.0",
    "@nrwl/nx": "7.5.0",
    "@types/underscore": "^1.8.9",
    "core-js": "^2.5.4",
    "moment": "^2.22.2",
    "nativescript-angular": "~7.1.0",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-theme-core": "^1.0.4",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.2.2",
    "tns-core-modules": "~5.1.0",
    "underscore": "^1.9.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@ngrx/store-devtools": "6.0.1",
    "@nrwl/schematics": "7.5.0",
    "@nstudio/schematics": "^7.2.3",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "0.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "nativescript-dev-typescript": "^0.7.9",
    "nativescript-dev-webpack": "^0.19.0",
    "ngrx-store-freeze": "0.2.4",
    "prettier": "1.13.7",
    "protractor": "~5.3.0",
    "tns-platform-declarations": "~5.1.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.1.1"
  }```

AMP web version

From @goelinsights on April 23, 2018 19:13

Trying to understand the docs. Sounds like if it needs different HTML templates, then it would go under a xplat category rather than an app?

Therefore would we need to create an xplat/amp directory? Sounds like that will be the structure for the upcoming ssr?

Copied from original issue: nstudio/xplat-issues#2

{N} 5 and HMR

Just curious what patterns, especially build/run script setup will be put in place to handle HMR in {N} 5. Would the current xplat project setup even be affected? I haven't tried HMR with the xplat-ionic yet, but assume that works.

Could not install from "..\..\node_modules\@ngx-translate\core"

Just built a workspace from scratch.
Commands:

npm install -g @nrwl/schematics
npm install -g @angular/cli
create-nx-workspace myproj-workspace
npm install @nstudio/schematics --save-dev
ng g xplat --prefix=myproj --platforms=web,nativescript
ng g app.nativescript myproj-ns
npm run start.nativescript.myproj-ns.android

PS: Nativescript was already installed.

Then, I tried to run Nativescript project. Error:

c:\Android\Projetos\myproj-workspace>npm run start.nativescript.myproj-ns.android

> [email protected] start.nativescript.myproj-ns.android c:\Android\Projetos\myproj-workspace
> cd apps/nativescript-myproj-ns && tns run android --emulator --bundle --env.aot

Skipping node_modules folder! Use the syncAllFiles option to sync files from this folder.
Searching for devices...
npm ERR! code ENOLOCAL
npm ERR! Could not install from "..\..\node_modules\@ngx-translate\core" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\...\AppData\Roaming\npm-cache\_logs\2018-11-08T20_00_48_583Z-debug.log
Command npm.cmd install failed with exit code 1

Any ideas?
Thanks

Can i integrate right now electron?

From @miguelramos on May 22, 2018 23:57

I would like to know if in the current status of the project i could easily configure a way to use electron. Why this? I will start a new project where i will have to do several applications to cover mobile, desktop and web with angular and instead of DRY, and this tooling seems pretty awesome i would like to have the possibility to integrate electron. Can i do this and if yes can you point me how to do it. I would appreciate the help.

Keep angular to be awesome!!!

Copied from original issue: nstudio/xplat-issues#13