Angular-cli: Feature Request: Angular CLI + NativeScript

[lolripgg]

Feature Request: Built-in support for NativeScript

With the announcement of both Angular CLI and NativeScript's support for Angular 2, I tried to create a new project with Angular CLI that supports NativeScript. I did not have much luck getting things running. Given that both projects are relatively new, I couldn't find any resources on how to make them work together.

Can we add a flag to the CLI that would include NativeScript as part of the new project? I would image something like this:

ng new PROJECT_NAME --nativescript

From what I can see, running ng new runs the new command which creates a new directory and then runs the init command inside the directory. init appears to accept a command line argument blueprint that could help here. Is it possible to add NativeScript support simply by creating a blueprint that includes NativeScript? If so, the above command could be ng new PROJECT_NAME --blueprint=nativescript.

I'm happy to create a PR for this if the community agrees that it's a good idea.

[jlooper]

I'm referencing a thread on the NativeScript side; this is a work in progress :) https://github.com/NativeScript/nativescript-angular/issues/225

[NathanWalker]

I wanted to chat with @jeffbcross at ngConf about this regarding the mobile-toolkit, tracked here: https://github.com/angular/mobile-toolkit/issues/23

[NathanWalker]

Dropping a NativeScript app into a new angular-cli project and sharing all your web code is possible today with nativescript-ng2-magic - angular-cli specific steps outlined here: https://github.com/NativeScript/nativescript-angular/issues/225#issuecomment-218069863

We could create even tighter integration if we could work together with the mobile-toolkit team.

[lolripgg]

@NathanWalker I'm wondering if we can't have Angular CLI support all of these things (NativeScript, React Native, Universal, etc) by default.

Angular CLI is based on Ember CLI which has an awesome plugin system. The plugin system supports the concept of "blueprints", which I think is what we're looking for. See angular-CLI/addons/ng2/blueprints (can't link because I'm on mobile).

The one issue I foresee is if two blueprints touch the same file. Merge conflicts would need to be handled some how.

[NathanWalker]

Agreed, angular-cli integration makes a lot of sense not just for NativeScript, but all the options. You can track this issue: https://github.com/angular/mobile-toolkit/issues/23

[lolripgg]

Thanks! Out of curiosity, why should this be part of the mobile-toolkit repo and not part of the angular-CLI repo? I'm not 100% clear on what mobile-toolkit is for.

[NathanWalker]

The mobile toolkit is aimed at providing progressive web app capabilities specifically for vastly improved mobile experiences. Watch Jeff and Alex's presentation from ngConf last week:
https://www.youtube.com/watch?v=wLWVASD0dvU

To me, mobile-toolkit implies a toolkit for all things awesome in the mobile arena. From my perspective, that repo provides the tools to work with progressive web apps at the moment. However hence the name, it would make a great place to expand to provide all things awesome for mobile and Angular.

IMO, It wouldn't make sense as part of the core of angular-cli since it truly is very mobile centric, which is what the mobile-toolkit helps complement the cli with.

[lolripgg]

In general, I agree with you. My personal concern with having a separate repository for mobile-toolkit is that mobile inherently becomes second-class. If we want mobile to be first class, which I think we all do, then it's my perspective that we should support everything mobile right out of the box.

[NathanWalker]

@brwr The decision to have a mobile-toolkit repo and Mobile Team is one made by the angular core team of which I agree with. It's not to say that it doesn't make mobile a first class citizen, but rather from my perspective, a clean separation of concerns. It all feeds back into the cli so not sure I understand your concern.

[jeffbcross]

@brwr I'm in the process of working with @hansl to bake a lot of the mobile-toolkit stuff directly into the CLI behind the --mobile flag. But eventually, when CLI has more of a plugin or addon story, the mobile toolkit should move back out of CLI.

@NathanWalker we're focusing mobile toolkit on pure Web apps at the moment, so we can focus all our efforts on making PWA excellent. I agree, the name is ambiguous about the scope of the project. It was previously angular/progressive, but we changed the name since the toolkit's roadmap isn't completely within the scope of Progressive Web Apps.

[lolripgg]

@jeffbcross That's awesome to hear! Is there anything I can help with? I know the repo says the project is still too early to accept major user contributions, but I thought I'd offer anyways.

[jeffbcross]

@brwr we're in a push to get a few things in order to present Angular and Progressive Web Apps at Google I/O next Wednesday, but I plan to outline more of a roadmap and Github issues after that. I'll make a note to ping you!

[NathanWalker]

To carry over some thoughts, I would propose the possibility of a --native flag in addition to --mobile flag (already possible via mobile-toolkit) which could generate a NativeScript shell (or even ReactNative, whichever user prefers). I could certainly help provide a PR over next 2 weeks which would essentially do following (I could work with @jkuri on this):

$ ng new hello-mobile --mobile --native
$ cd hello-mobile

Then run the app:

$ ng run ios

or...

ng run android

There's a lot of nice things that could be done here with regards to this but that'd be my first base run.
If multiple native runtimes were supported we could provide something like this:

$ ng new hello-mobile --mobile --nativescript
...or...
$ ng new hello-mobile --mobile --reactnative

Good luck at Google I/O @jeffbcross, all exciting stuff, nice work!

[NathanWalker]

@brwr if you want to hop in this slack channel and ping me, we can discuss more. We can certainly work together on this to make it as nice as possible. https://t.co/uExEluDrmO

You can ping me there with @walkerrunpdx

[NathanWalker]

A walk-through of how this integration works with the cli today is here:
https://www.youtube.com/watch?v=T2wAb6UX8zo

It could be even more seamless with a lil' collaboration here 👍

[hansl]

Thanks Nathan. I'll keep this issue for the discussion for adding support for nativescript. We don't have a concrete plan for including it, but I'll put the tutorial on the README. I know the web team is interested in having nativescript support in the CLI, but that's a few months off. They're focused on PWA and universal right now.

[nickroberts]

Love the cli so far! It definitely would be awesome to get the Mobile Toolkit and Universal integrated, whether or not they are part of the core, or the plugin system.

It also would be nice to have the option to use Webpack instead of SystemJS.

I've been running the cli off of master, and some nice features have been added since I first starting toying around with it (like the styleExt option).

Keep up the great work!

[kushwahashiv]

+1

[gustavomick]

hi, any news? i would like to know what path/way are angular-cli team recommending today .. in order to integrate nativescript. thanks

[AyWa]

+1

[valentinstoychev]

Hey @hansl, can we (the core NativeScript team) help you in this regard? If you enable us to integrate we can contribute development to make this happen. We can also help with any work that the community will benefit.

Integration with Angular CLI is one of the most request features from our community and we would really love to see this happen.

Please let us know, we are eager to collaborate and contribute.

[CharlBest]

+1

[Florian007]

+1

[jlooper]

🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮🌮

[gelliott181]

@valentinstoychev I'm a little worried about integrating this directly into the CLI. It's not a lack of enthusiasm for the idea (--mobile, --universal, and --native have all made appearances in the issues here too!) but a worry that enabling these flags for X and Y third party bits may lead to unmaintainable bloat. Perhaps we could aim this discussion at how to make the ng generate command more accessible to third party developers.

I say this because the first party native frameworks are on hold for the CLI too. This might be a chance to take that burden off the CLI and move to a more modular approach that would allow the NativeScript team to register a new generator that hooks the CLI's functionality.

[valentinstoychev]

@gelliott181 This is exactly my thinking too. We will have a chat with the CLI team this week and will update this thread.

[perjerz]

We are waiting for ng-cli to support Nativescript.

[valentinstoychev]

We had a quick chat yesterday with @hansl and @Brocco. The Angular CLI team and NativeScript team are starting to work more closely on this integration. Please expect an update on this issue in the next several months (but probably not earlier). The main thing is that we will work together on this and NativeScript will be part of the Angular CLI development workflow soon.

In the interim please use the NativeScript CLI to develop apps using Angular and NativeScript.

I will keep everyone posted once there is more information.

[wellwind]

For people who need to integrate Angular CLI and NativeScript project, I've just created a seed project let you use Angular CLI to generate components, directives or modules in NativeScript project.

https://github.com/wellwind/native-script-with-ng-cli

For me it's better than another magic project - nativescript-ngx-magic

because I don't have to change too much code, and project structure is very familiar to Angular CLI project.

I also write a detail steps about how I create this seed project:
https://gist.github.com/wellwind/a3a11c9c3667878c58775793975acd09

It's not perfectly and fully integrated but could be a good start :)

[listepo]

hi, any news?

[RainingNight]

any news?

[NathanWalker]

You can use the NativeScript schematics now:
https://github.com/NativeScript/nativescript-schematics/blob/master/README.md

If you’re looking for NativeScript with Nx workspaces, you can use:
https://nstudio.io/xplat/

[alexeagle]

For now, use NativeScript's build support which extends the CLI. We're working together to evolve the two toolchains to a common place.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}