Détail du package

nativescript-angular

NativeScript1.9kApache-2.010.0.0

Compatibility with old style nativescript-angular imports.

NativeScript, Angular

readme

Note on repo

This repo is for Angular <= 11. If looking for 12+ (including 18+, etc) it's maintained here NativeScript/angular.

NativeScript Angular

Build Status

This repository contains the code for integration of NativeScript with Angular.

NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Angular is one of the most popular open source JavaScript frameworks for application development. We worked closely with developers at Google to make Angular in NativeScript a reality. The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular web apps, with the performance you’d expect from native code. Read more about building truly native mobile apps with NativeScript and Angular.

Watch the video explaining Angular and NativeScript

NativeScript session on AngularConnect conference

Explore the examples

The e2e apps are meant for testing stuff. You can take a look at these additional sample apps that use the published builds from npm:

Contribute

We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

Known issues

  1. There are certain issues with the Parse5DomAdapter and we'll likely need to provide our own later on:
    • Self-closing elements (<Label text="Name" /><Button text="Save" />) get parsed wrong (in this case Button gets parsed as a Label child.

Get Help

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

changelog

11.2.0 (2021-03-24)

Bug Fixes

  • ivy: nsRouterLinkActive works on nsRouterLink (#2322) (13a3562)

11.0.1 (2021-01-22)

Bug Fixes

11.0.0 (2020-11-17)

Features

10.1.7 (2020-10-12)

Bug Fixes

  • Export injection token used by plugins (#2268) (75865f2)
  • expose NSLocationStrategy and NSRouteReuseStrategy (9b8435e)

Features

  • export injectiontoken for template items (52a56d7)

10.1.5 (2020-09-21)

Bug Fixes

  • renderer: dynamic views can't be prepended (#2262) (5735a01)

10.1.4 (2020-09-21)

Bug Fixes

10.1.3 (2020-09-21)

Bug Fixes

  • detached-loader: completely deatch components (#2257) (623d2f7)
  • ivy: support view references in insertBefore (#2258) (c2eaef5)

10.1.0 (2020-09-04)

Bug Fixes

  • list-view: fix crash when used with ngFor (#2121) (302afb3)

Features

10.0.3 (2020-08-27)

Bug Fixes

  • router: page navigation bug if there's not outlet for frame after clearing history (#2233) (8bedc2d)

10.0.2 (2020-08-19)

Bug Fixes

10.0.0 (2020-07-30)

Features

Bug Fixes

  • router: query params are now preserved when navigating back (#2062) (221e404)
  • segmented-bar: listview crash when scrolling (#2128) (1b191b0)

9.0.0 (2020-06-03)

Bug Fixes

  • bindable: parent referenced expression-values now load properly using an update call (#8670) (6b0028a), closes #8666 #6981 #5054
  • scroll-view: android 'isScrollEnabled' will apply if changed while gesture is underway (#8695) (02ec7f1)
  • snapshots: android is not defined (#8691) (a8bbd7c)
  • text-view: only reload text if hint is showing on ios (#8662) (ec17727)

Features

Features

8.20.4 (2020-01-07)

Bug Fixes

  • add context to frame navigation (#2100)
  • wrong import path in compat package (#2097)

8.20.3 (2019-11-13)

Bug Fixes

  • add exports for backwards compatibility (fbd46c1)

8.20.2 (2019-11-12)

Bug Fixes

  • add exports in nativescript-angular package for backwards compatibility (4a5d022)

8.20.1 (2019-11-07)

Bug Fixes

  • add exports in nativescript-angular package for backwards compatibility

    8.20.0 (2019-10-23)

Features

  • add scoped package @nativescript/angular (#2014)

Bug Fixes

  • animations: resolve issue with "query animations" on iOS 13 (#2022) (c382682)

8.2.2 (2019-10-16)

Features

  • Support for adding scoped CSS without triggering global refresh (#1999) (662c122)

8.2.1 (2019-08-28)

Bug Fixes

8.2.0 (2019-08-13)

Features

  • Update to Angular 8.2.x (dbe983b)
  • Remove @angular/http from the dependecies (#1842) (c6af21d)

BREAKING CHANGES:

  • The NativeScriptHttpModule is removed
  • @angular/http is removed from the dependencies

Migration steps:

  • If using NativeScriptHttpModule, replace with NativeScriptHttpClientModule as done here
  • as @angular/http is no longer a peerDependency of nativescript-angular, you can remove if from your dependencies

8.1.0 (2019-07-31)

Features

8.0.3 (2019-07-26)

Bug Fixes

  • add backwards compatibility for 'tns-core-modules' version 5.4.x (635bb36)

Features

8.0.2 (2019-06-28)

Bug Fixes

  • remove deprecated API usage (#1874) (ab740cd)

  • migrate from ReflectiveInjector (deprecated) to StaticInjector (#1868) (e432841)

    Features

8.0.1 (2019-06-12)

Bug Fixes

  • do not throw if element already registered (#1838) (e90f8b5)
  • 1845: CSS special selector ":host" only work first time (#1852) (59a5bd8)

8.0.0 (2019-05-29)

Bug Fixes

  • router: fix return value for getTransition of NSRouterLink (d20b645), closes #1784
  • tsconfig: exclude aot files from compilation (a4eb409)

Features

BREAKING CHANGES

  • In Angular version 8, it's required that all @ViewChild and @ContentChild queries have a static flag specifying whether the query is static or dynamic. More details about this change can be found here.

Migration steps:

Anywhere you previously had @ViewChild with a single param you now have to provide a second param with a static property set to either true or false

Previous code:

import { ElementRef } from "@angular/core";

@ViewChild("myElement") myElement: ElementRef;

Migrated code:

import { ElementRef } from "@angular/core";

@ViewChild("myElement", { static: false }) myElement: ElementRef;

7.2.4 (2019-05-14)

Bug Fixes

  • router: routing services should be provided in forRoot only (#1729) (0f6a975)
  • mark reattached view for CD (#1803) (b6dbe57)
  • Potentiel leak: NativeScript views not cleaned up on removal (#1738) (59a1cde)

Features

  • modal: add ‘ios presentationStyle’ option to ModalDialogParams (9cfa127)

7.2.3 (2019-03-14)

Bug Fixes

  • location-strategy: crash on going back with router-outlet after closing modal (#1748) (0ed7de6)

7.2.2 (2019-02-19)

Bug Fixes

  • list-view: add support for default item template (4061cc7)

7.2.1 (2019-02-10)

Bug Fixes

  • location-strategy: extend support for nested primary outlets (566896d)
  • Router tracing does not work with webpack (e87ef68)

7.2.0 (2019-01-31)

Bug Fixes

  • p-r-o: needless forward navigation after back inside nested named outlet (130e392)

Features

  • router: detach change detection on navigation (#1507) (86cd290)

7.1.2 (2019-01-21)

Bug Fixes

  • page-router-outlet: fix(empty-outlet): remove unnecessary moduleId (#1686) (1222e57)

7.1.1 (2018-12-20)

Bug Fixes

  • page-router-outlet: prevent needless forward navigation after back inside nested named outlet (d8a0653)

7.1.0 (2018-12-07)

Features

  • Angular 7.1 support

7.0.3 (2018-12-05)

Bug Fixes

7.0.2 (2018-11-26)

Bug Fixes

  • page-router-outlet: actionBarVisibility not applied (#1621) (a6ff509)
  • router-extensions: unable to go back with relativeTo param (#1632) (63900dc)

7.0.1 (2018-11-20)

Bug Fixes

  • crash in deactivate page router outlet (#1590) (f8c7468)
  • dialogs: unable to reopen shared modal view when tab as root (199c245)
  • location-strategy: crash when going back on nested named lazy loaded module (#1618) (d9ffb83)

7.0.0 (2018-11-12)

Bug Fixes

  • crash in deactivate page router outlet (#1590) (f8c7468)

  • location-strategy: crash on going back to TabView with nested outlets (#1582) (f755991)

Features

  • Angular 7 support

6.2.0 (2018-10-30)

Bug Fixes

  • frame-service: move FrameService provider to NativeScriptModule (#1489) (3b434c9)
  • Import reflect-metadata(needed in JIT mode) before @angular (#1530) (6e45af0)
  • Persist the original "parentNode" when "retrieving" the root View created by createEmbeddedView (#1542) (0b8d2c5)

Features

  • add actionBarVisibility property to page-router-outlet (#1573) (c645ca8)
  • enable nesting named page router outlets (#1556) (46a0dc0)
  • HMR bootstrap and livesync options (#1531) (1e92c7b)

6.1.0 (2018-08-06)

Bug Fixes

  • mark NativeScriptModule as root injector (#1418) (ce70add)
  • provide NullViewportScroller in NativeScriptModule (dd412bf)
  • animations: inject document object in the animation engine (#1395) (379e958), closes angular/angular#23300 #1393
  • forms: TextValueAccessor raises onTouched on blur (#1230) (06ca3a0)
  • remove global document object (2b201be)
  • location-strategy: find the correct outlet when navigating back and forward (#1404) (f0119a0)
  • modal: lower isModalNavigation flag when closing modal (#1378) (6ab1cac)
  • modal: throw from tns-core-modules is now properly caught and rejected (70730d9)
  • router: avoiding throw for app stability improvements (#1344) (82747df)
  • tabview: implement setter for TabViewItem Directive's configuration (#845) (#1370) (1d44679)

Features

  • test-bed: Run render fixtures in a full-page container (#1416) (e551df2)

BREAKING CHANGES

  • The document object is no longer property of the global object. This may cause behavioral changes in some plugin that use the document object to determine if they're running in browser context.

Fixes https://github.com/NativeScript/nativescript-angular/issues/1144.

6.0.6 (2018-06-22)

IMPORTANT! You should use this version with @angular/* v6.0.6 and up.

Bug Fixes

  • clean up properly shared modal page router outlets (#1360) (3332ca2)
  • animations: inject document object in the animation engine (#1395) (379e958), closes #1393
  • modal: lower isModalNavigation flag when closing modal (#1378) (6ab1cac)

6.0.0 (2018-05-30)

Bug Fixes

Features

  • Angular 6 support
  • router: enable flexible page router outlets (#1298) (b98da83)
  • testing: Testing Components with TestBed (#1175) (52f3ec6)

5.3.0 (2018-04-10)

This version requires NativeScript 4.0.

Bug Fixes

  • animations: provide fake document object in both AoT and JiT mode (#1164) (040e0e3), closes #1163
  • App crashes on restart in android (#1261) (331b878)

Features

BREAKING CHANGES

Importing NativeScriptModule and NativeScriptAnimationsModule in multiple ngModules is no longer allowed.

To migrate:

  • in AppModule:
    • import NativeScriptModule
    • importNativeScriptAnimationsModule - only if you are planning to use Angular Animations
  • in the remaining modules:
    • remove NativeScriptModule imports and replace with NativeScriptCommonModule import
    • remove NativeScriptAnimationsModule imports

BEFORE:

app.module.ts:

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptAnimationsModule } from 'nativescript-angular/animations';
...
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptAnimationsModule
  ],
...
})

another.module.ts:

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptAnimationsModule } from 'nativescript-angular/animations';
...
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptAnimationsModule
  ],
...
})

AFTER:

app.module.ts:

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptAnimationsModule } from 'nativescript-angular/animations';
...
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptAnimationsModule
  ],
...
})

another.module.ts:

import { NativeScriptCommonModule } from 'nativescript-angular/common';
...
@NgModule({
  imports: [
    NativeScriptCommonModule
  ],
...
})

NativeScript 4.0 Compatible Bootstrap and Navigation

NativeScript 4.0 allows you to put any view as the root (not only Frame) of the application. To support in angular projects we had to introduce some changes in how A{N}gular apps are bootstrapped.

PREVIOUS BEHAVIOR

Bootstrap creates a root Frame and initial Page. Then it bootstraps the angular application inside this page. Navigation with <page-router-outlet> will always navigate in the Frame created by the bootstrap.

Limitations:

  • You cannot change the root view of the app (to RadSideDrawer for example). It is always the Frame created by the bootstrap.
  • You can have only one <page-router-outlet> as there is only one Frame.
  • You always have a Page view wrapping your components. Because the ActionBar is part of that Page you can always change it with the <ActionBar> component.

NEW BEHAVIOR

Bootstrap will not create root view by default. It will use the root view of your main application component as the root view of the application. The <page-router-outlet> component will create its own Frame and will use it for navigation. It will also wrap the components you navigate to in a Page and will navigate to it as it did before.

Which means:

  • You can use any view for application root. Finally, you can have application-wide RadSideDrawer.

  • You have more flexibility over where to place the <page-router-outlet>, you can even have more than one for more advanced scenarios.

  • If you don't use <page-router-outlet> in your app you will not get the default Page and Frame, which means you will not be able to inject them in you components or show the ActionBar. There is special createFrameOnBootstrap option you can pass on bootstrap to make things as before:

    platformNativeScript({ createFrameOnBootstrap: true })
  .bootstrapModuleFactory(AppModuleNgFactory);

  • If you are using <page-router-outlet> you probably don't have to do any changes. Bootstrap will not create Frame and Page, but the outlet will do that. It will also take care of providing Page and so the ActionBar should work as before.

WORKING WITH FRAMES

There might be multiple frames (if you have multiple <page-router-outlet>'s). Angular DI works with singletons, so it will always return one instance of Frame. We have introduced FrameService (still experimental) which has a getFrame() method. It will return the current frame (the one you have navigated last).

Signature of onAfterLivesync changed

The signature onAfterLivesync observable changed from:

export const onAfterLivesync = new EventEmitter<NgModuleRef<any>>();

to:

export const onAfterLivesync = new EventEmitter<{ moduleRef?: NgModuleRef<any>; error?: Error }>();

5.2.0 (2018-01-17)

Features

5.1.0 (2018-01-10)

Features

5.0.0 (2017-12-20)

Features

  • UI must be created before first render, drainMicroTasks when the first page is created. This removes the white screen displayed between the launch screen and the initial page view. Speeds up roughly 300ms startup times for iOS with Angular. (#1103)
  • update to Angular 5 animations and add support for AnimationBuilder (#1114) (191f2a0)

DEPRECATION

NSModuleFactoryLoader is no longer needed for {N} apps. (192a3d0)

Before:

// app.module.ts

@NgModule({
    providers: [
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
        // ...
    ],
    // ...
})
class AppModule { }

After:

// app.module.ts

@NgModule({
    providers: [
        // ...
    ],
    // ...
})
class AppModule { }

5.0.0-rc.0 (2017-11-06)

Features

  • Initial Angular 5.0 support (#1073)

4.4.1 (2017-10-13)

This is the last version of NativeScript Angular that supports Angular 4.

Bug Fixes

  • forms: add base-value-accessor.ts for <4.4.0 versions compatibility (#1039) (79e425c)

4.4.0 (2017-10-11)

Bug Fixes

  • forms: default to unsetValue for value accessors (#846) (6940955)
  • forms: disable onTouch for date, number and selectedIndex value accessors (#986) (b4b5ef6), closes #887

Features

  • add exportAs logic for isActive on routerLinkActive directive (#940) (147d35a)
  • Http: expand support for request on local files (#982) (b95184f)
  • styling: Allow loading .css files as a fallback if no .scss file is found(#954) (#955) (696e914)
  • Angular 4.4 support (#1002) (c264453)

4.2.0 (2017-08-09)

Features

BREAKING CHANGES

  • NativeScriptModule should be imported only in the root application module (usually named AppModule). All other NgModules in the app (both feature and lazy-loaded ones) should import the NativeScriptCommonModule instead. The behavior is aligned with BrowserModule and CommonModule in web Angular apps described in this guide.

Migration steps: In all NgModules, except the root one (AppModule), replace:

import { NativeScriptModule } from "@nativescript/angular";
…
@NgModule({
    imports: [
        NativeScriptModule,
    ]
…
})

with:

import { NativeScriptCommonModule } from "nativescript-angular/common";
…
@NgModule({
    imports: [
        NativeScriptCommonModule,
    ]
…
})

3.1.3 (2017-07-19)

Bug Fixes

  • action-bar: ignore InvisibleNodes when adding title (#903) (8308e45), closes #897
  • asynchronously destroy items evicted on clearHistory navigation (#847) (448412a), closes #829

3.1.2 (2017-07-12)

Bug Fixes

  • renderer: attach CommentNodes to visual tree (#888) (65359fa), closes #872

3.1.1 (2017-06-29)

Bug Fixes

3.1.0 (2017-06-19)

Bug Fixes

  • animations: use parsers from core modules (#844) (1abebb6), closes #738
  • dom-adapter: add fake implementation for getUserAgent (#835) (743131c), closes #831
  • forms: add (touch) event and [disabled] property for controls (#836) (c8a6404), closes #804
  • ns-router-link: convert clearHistory string to boolean (#834) (ff99984), closes #832
  • renderer: add styles when ViewEncapsulation is None (#812) (8d013e2), closes #794
  • renderer: set templateParent to comment and text nodes (#785) (b127ba7), closes #777 #787
  • renderer: stop performing value conversions (#806) (354074d), closes #799

Features

  • Modal: allow modal to be lazily loaded from a module on demand (#772) (6a1f6a9)

3.0.0 (2017-05-03)

Bug Fixes

  • action-bar: Don't remove action items twice. (b96b61f)
  • animations: add onDestroy method to NativeScriptAnimationPlayer (ec07ec3)
  • animations: set nodeType 'element' to newly created views (#720) (8af20ad)
  • gitignore: Add editor files into gitignore (9beea98)
  • init: Bootstrap Angular on page "navigatingTo" event. (85b9d01)
  • list-view: Destroy item views on unload (71301aa)
  • list-view: Do not access destroyed items' ng views. (c6f7549)
  • list-view-comp: IterableDiffer is now parameterized on <KeyedTemplate> (f692c5f)
  • ns-http: make defaultOptions of type RequestOptions (073c95d)
  • action bar: attach #comment nodes with _addView (#729) (0490605), closes #725
  • ns-router-link: navigate with urlTree (#728) (3c6f5ab), closes #724
  • use providers' map for injectors in page-router-outlet (#744) (07fe66c), closes #741

Code Refactoring

  • stop exporting NativeScriptModule from platform (#701) (0bd2ba5)

Features

  • animations: introduce NativeScriptAnimationsModule (#704) (f9ad6a5)
  • renderer: use EmulatedRenderer to scope component styles (70603c4)
  • renderer: implement createComment and createText methods using (0f128ad)
  • renderer: support namespaced attributes (#719) (9b5b413)

BREAKING CHANGES

  • animations: To use animations, you need to import the NativeScriptAnimationsModule from "nativescript-angular/animations" in your root NgModule.
  • User applications cannot import NativeScriptModule from "nativescript-angular/platform" anymore. Migration: Before:
    import { NativeScriptModule } from "nativescript-angular/platform";
    After
    import { NativeScriptModule } from
"nativescript-angular/nativescript.module";

1.5.2 (2017-04-18)

Bug Fixes

1.5.1 (2017-03-30)

Bug Fixes

1.5.0 (2017-03-22)

Bug Fixes

  • action-bar: Don't remove action items twice. (677d7e0)
  • animations: add onDestroy method to NativeScriptAnimationPlayer (2e24010)
  • dom_adapter: add missing contains method signature (bae45f6)
  • dom_adapter: update setTitle and getGlobalEventTarget to be compliant with Angular API (25c134d)
  • gitignore: Add editor files into gitignore (819a960)
  • init: Bootstrap Angular on page "navigatingTo" event. (ab04aba)
  • list-view-comp: IterableDiffer is now parameterized on \<KeyedTemplate\> (780967d)
  • ns-http: make defaultOptions of type RequestOptions (db730e2)
  • page-router-outlet: activateWith instead of activate method (8d832bc)
  • page-router-outlet: manually run detect changes when navigating to new page (07caa74)
  • platform: import InjectionToken and ViewEncapsulation instead of OpaqueToken (c4dc8d4)
  • platform: import MissingTranslationStrategy (d2328a5)
  • renderer: implement createComment and createText methods using Placeholders (c0ec870)
  • renderer: use _eachChildView for nextSibling (150c1ce)
  • renderer: use flags in setStyle and removeStyle instead of booleans (a6d9247)
  • ts: ship package with reference to iterable interface (7edfa6b)

Code Refactoring

  • stop exporting NativeScriptModule from platform (#701) (409e717)

Features

  • animations: introduce NativeScriptAnimationsModule (b5874ba)
  • renderer: implement simple nextSibling method using parent's _eachChildView (98d9d20)
  • renderer: upgrade to be compliant with Angular 4's Renderer2 and RendererFactory2 (a3adcca)
  • renderer: use EmulatedRenderer to scope component styles (25f5111)

BREAKING CHANGES

  • NativeScriptModule: User applications cannot import NativeScriptModule from "nativescript-angular/platform" anymore. Migration: Before:
    import { NativeScriptModule } from "nativescript-angular/platform";
    After
    import { NativeScriptModule } from
"nativescript-angular/nativescript.module";

  • animations: To use animations, you need to import the NativeScriptAnimationsModule from "nativescript-angular/animations" in your root NgModule. Also you need a dependency to "@angular/animations".

  • typescript: The required version of TypeScript is ~2.1. Support for ~2.2 requires changes in tns-core-modules and will be provided with NativeScript 3.0.

1.1.2 (2016-10-28)

  • Angular 2.1.2 compatibility release

1.1.1 (2016-10-21)

  • Angular 2.1.1 compatibility release
  • [Experimental] Support for ahead-of-time(AOT) compilation.

1.1.0 (2016-10-13)

  • Angular 2.1.0 compatibility release

1.0.2 (2016-10-13)

  • Angular 2.0.2 compatibility release
  • Modal dialogs no longer require that you create a ModalDialogService provider in your component.

0.4.0 (2016-08-19)

  • Migrate to Angular 2 RC5.
  • Bootstrapping apps using NgModule's. The old nativescriptBootstrap method is gone, and apps should switch to the platformNativeScriptDynamic().bootstrapModule(MyAppModule) API
  • The library entrypoint is now the nativescript-angular/platform module. Import NativeScriptRouterModule from nativescript-angular/router and NativeScriptFormsModule from nativescript-angular/forms respectively if you want to use routing and form value accessor directives.

0.1.8 (2016-06-22)

0.1.7 (2016-06-21)

Features

  • (#291) Migrate to Angular RC2

  • (#218) Support the new router

Bug Fixes

  • (#273) ModalDialogService.showModal() doesn't show modal

  • (#257) iOS navigation bug

  • (#252) Using text-decoration in a template causes iOS app to crash

  • (#262) Critical - Memory and cpu usage.

  • (#242) Use the ComponentFactory API instead of deprecated DynamicComponentLoader

  • (#229) Implement ngStyle directive

Breaking Changes

  • The Beta Angular Router moved to nativescript-angular/router-deprecated to continue using it change imports:

    • nativescript-angular/router -> nativescript-angular/router-deprecated
    • nativescript-angular/router/ns-router -> nativescript-angular/router-deprecated/ns-router-deprecated

  • Build requires globally installed typings (npm install -g typings)