{"id":43687822,"url":"https://github.com/NathanWalker/nativescript-ng2-magic","last_synced_at":"2026-02-16T13:01:55.656Z","repository":{"id":57157614,"uuid":"57340206","full_name":"NathanWalker/nativescript-ng2-magic","owner":"NathanWalker","description":"Magically turn your Angular2 web app into a NativeScript app.","archived":false,"fork":false,"pushed_at":"2017-01-16T08:14:32.000Z","size":1481,"stargazers_count":64,"open_issues_count":4,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-01T01:16:53.708Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NathanWalker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-28T23:28:35.000Z","updated_at":"2021-03-12T17:56:06.000Z","dependencies_parsed_at":"2022-09-07T06:21:49.061Z","dependency_job_id":null,"html_url":"https://github.com/NathanWalker/nativescript-ng2-magic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NathanWalker/nativescript-ng2-magic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ng2-magic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ng2-magic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ng2-magic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ng2-magic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NathanWalker","download_url":"https://codeload.github.com/NathanWalker/nativescript-ng2-magic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-ng2-magic/sbom","scorecard":{"id":99171,"data":{"date":"2025-08-11","repo":{"name":"github.com/NathanWalker/nativescript-ng2-magic","commit":"702395cf85add650170ca45ca6f582e6ad609863"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":1,"reason":"Found 4/25 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 9 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-15T09:46:37.503Z","repository_id":57157614,"created_at":"2025-08-15T09:46:37.503Z","updated_at":"2025-08-15T09:46:37.503Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29508735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-05T03:00:21.768Z","updated_at":"2026-02-16T13:01:55.651Z","avatar_url":"https://github.com/NathanWalker.png","language":"JavaScript","readme":"# project has moved!\n\nNote new repo and install:\nhttps://github.com/wwwalkerrun/nativescript-ngx-magic\n \n \n[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Dependency Status](https://david-dm.org/preboot/angular2-library-seed/status.svg)](https://david-dm.org/preboot/angular2-library-seed#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular2-library-seed/dev-status.svg)](https://david-dm.org/preboot/angular2-webpack#info=devDependencies)\n\n![nativescript-ng2-magic](https://cdn.filestackcontent.com/XXMT4f8S8OGngNsJj0pr?v=0)\n\nMagically drop a [NativeScript](https://www.nativescript.org/) app into your existing [Angular2](https://angular.io/) web application and reuse all your code.*\n\n*You will be adding NativeScript views, but you already knew that.*\n\n* [Supported projects that can use magic](#supported-projects)\n* [Watch video on how to integrate with Angular CLI](http://www.nativescriptsnacks.com/videos/2016/05/12/magic-scaffolding.html)\n\n## Install\n\n```\nnpm i nativescript-ng2-magic --save\n```\n\n## Usage\n\n1. Use `Component` from `nativescript-ng2-magic` instead of `@angular/core`. [Why?](#why-different-component)\n2. Create NativeScript views ending with `.tns.html` (and/or styles ending with `.tns.css`) for each of your component's. [How?](#how-to-create-nativescript-views)\n3. [Run your truly *native* mobile app with NativeScript!](#run-for-first-time)\n\n## Example\n\nA sample root component, **app.component.ts**:\n\n```\nimport {Component} from 'nativescript-ng2-magic';\n\n@Component({\n  selector: 'app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {}\n```\n\n### Run for first time!\n\nYou will need to have fully completed steps 1 and 2 above.\n\nRun your app in the iOS Simulator with:\n\n```\nnpm run start.ios\n```\n\nRun your app in an Android emulator with:\n\n```\nnpm run start.android\n```\n\nWelcome to the wonderfully magical world of NativeScript!\n\n## How to create NativeScript views\n\nBased on our example above, assume `app.component.html` looks like this:\n\n```\n\u003cmain\u003e\n  \u003cdiv\u003eThis is my root component\u003c/div\u003e\n\u003c/main\u003e\n```\n\nYou would then create a new file in `app.component.tns.html` like this:\n\n```\n\u003cStackLayout\u003e\n  \u003cLabel text=\"This is my root component\"\u003e\u003c/Label\u003e\n\u003c/StackLayout\u003e\n```\n\nYou can **also** use platform specific views if desired with the `platformSpecific` Component metadata:\n\n```\nimport {Component} from 'nativescript-ng2-magic';\n\n@Component({\n  selector: 'app',\n  templateUrl: './app.component.html',\n  platformSpecific: true\n})\nexport class AppComponent {}\n```\n\nThen you could create separate views for iOS and Android:\n\n* `app.component.ios.html`\n* `app.component.android.html`\n\nYou can [learn more about NativeScript view options here](https://docs.nativescript.org/ui/ui-views).\n\nYou can also install helpful view snippets for [VS Code here](https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets) or [Atom Editor here](https://atom.io/packages/nativescript-ng2-atom-snippets).\n\nYou can [learn more here](http://angularjs.blogspot.com/2016/03/code-reuse-in-angular-2-native-mobile.html?m=1) about how this setup works and why.\n\n## Supported Projects\n\n* [angular-cli](https://cli.angular.io/)\n* [angular2-seed](https://github.com/angular/angular2-seed)\n* [angular2-webpack-seed](https://github.com/NathanWalker/angular2-webpack-seed)\n\n### Why different Component?\n\n`Component` from `nativescript-ng2-magic` is identical to `Component` from `@angular/core`, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.\n\nThe library provides a custom `Decorator` under the hood.\nFeel free to [check it out here](https://github.com/NathanWalker/nativescript-ng2-magic/blob/master/src/client/plugin/decorators/magic.component.ts) and it uses a [utility here](https://github.com/NathanWalker/nativescript-ng2-magic/blob/master/src/client/plugin/decorators/utils.ts).\n\nYou can see more elaborate use cases of this magic with [angular2-seed-advanced](https://github.com/NathanWalker/angular2-seed-advanced).\n\n### Special Note About AoT\n\nCurrently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:\n\n```\nimport { Component } from '@angular/core';\n\n// just comment this out and use Component from 'angular/core'\n// import { Component } from 'nativescript-ng2-magic';\n\n@Component({\n  // etc.\n```\n\nAfter doing the above, running AoT build will succeed. :)\n\nThe Component from `nativescript-ng2-magic` does the auto `templateUrl` switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the `Component` from `nativescript-ng2-magic`. Again this temporary inconvenience may be unnecessary in the future.\n\n## Requirements\n\n* [Install NativeScript](http://docs.nativescript.org/start/getting-started#install-nativescript-and-configure-your-environment)\n\n# License\n\n[MIT](/LICENSE)\n","funding_links":[],"categories":["Awesome {N} [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Table of Contents"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fnativescript-ng2-magic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNathanWalker%2Fnativescript-ng2-magic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNathanWalker%2Fnativescript-ng2-magic/lists"}