{"id":14986839,"url":"https://github.com/nativescript/nativescript-schematics","last_synced_at":"2025-04-05T06:09:07.346Z","repository":{"id":27522773,"uuid":"111834299","full_name":"NativeScript/nativescript-schematics","owner":"NativeScript","description":"nativescript, mobile, schematics, angular","archived":false,"fork":false,"pushed_at":"2022-04-15T18:39:57.000Z","size":3225,"stargazers_count":185,"open_issues_count":76,"forks_count":26,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-10-29T15:51:53.935Z","etag":null,"topics":["angular","angular-cli","code-sharing","cross-platform","monorepo","nativescript","nativescript-angular","schematics","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-23T17:12:07.000Z","updated_at":"2024-09-22T22:07:24.000Z","dependencies_parsed_at":"2022-08-07T13:00:23.264Z","dependency_job_id":null,"html_url":"https://github.com/NativeScript/nativescript-schematics","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-schematics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-schematics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-schematics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-schematics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/nativescript-schematics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294540,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","angular-cli","code-sharing","cross-platform","monorepo","nativescript","nativescript-angular","schematics","typescript"],"created_at":"2024-09-24T14:13:39.236Z","updated_at":"2025-04-05T06:09:07.318Z","avatar_url":"https://github.com/NativeScript.png","language":"TypeScript","readme":"# NativeScript Schematics  [![Build Status](https://travis-ci.org/NativeScript/nativescript-schematics.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-schematics)\n\nThis repository contains schematics for generating components in NativeScript Angular apps using the Angular CLI.\n\n## Installation\n\n### Install Angular CLI\n\nYou should be using `@angular/cli@9.1.0` or newer.\n\n```bash\nnpm i -g @angular/cli\n```\n\n### Install NativeScript Schematics\n```bash\nnpm i -g @nativescript/schematics\n```\n\n## Usage\n\n### Creating a new project\nTo generate new NativeScript Angular project, you can use `ng new` with `@nativescript/schematics` specified as the schematics collection.\n\n#### NativeScript Only\n\n```bash\nng new --collection=@nativescript/schematics my-mobile-app\n```\n\nYou can specify the following options when generating new applications:\n\n| Option | Description | Default\n| --- | --- | ---\n| prefix | The prefix to apply to generated selectors. | `app`\n| theme | Specifies whether the {N} css theme should be included. | `true`\n| style | Specifies whether the app should use 'css' or 'scss' files for styling. | `css`\n| webpack | Specifies whether the app will be ready for building with webpack. | `true`\n\n#### Web + Mobile Code Sharing project\n\n```bash\nng new --collection=@nativescript/schematics my-shared-app --shared\n```\n\nYou can specify the following options when generating new applications:\n\n| Option | Description | Default\n| --- | --- | ---\n| sourceDir | The name of the source directory. | `src`\n| prefix | The prefix to apply to generated selectors. | `app`\n| theme | Specifies whether the {N} css theme should be included. | `true`\n| style | Specifies whether the app should use 'css' or 'scss' files for styling. | `css`\n| sample | Generates an eagerly loaded module and master-detail navigation. | `false`\n\n### Prerequisites for using `@nativescript/schematics` in an existing project\nYou need to add an `angular.json` configuration file to your NativeScript project root directory. That will allow you to use Angular CLI for generating components.\n```json\n{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"cli\": {\n    \"defaultCollection\": \"@nativescript/schematics\"\n  },\n  \"projects\": {\n    \"project-name\": {\n      \"root\": \"\",\n      \"sourceRoot\": \".\",\n      \"projectType\": \"application\",\n      \"prefix\": \"app\",\n      \"schematics\": {\n        \"@schematics/angular:component\": {\n          \"style\": \"scss\"\n        }\n      }\n    }\n  },\n  \"defaultProject\": \"project-name\"\n}\n```\n\n\u003e **Note:** If you created your project with `ng new`, your project already has `angular.json`.\n\n#### Generate angular.json\n\nYou can generate it the configuration using `Schematics`. Install `Schematics globally`\n\n```bash\nnpm install -g @angular-devkit/schematics-cli\n```\n\nFrom inside your project call:\n\n```bash\nschematics @nativescript/schematics:angular-json --name=project-name\n```\n\n### Generating Components, Modules, Directives, etc.\nYou can use the `ng generate` (or just `ng g`) command to generate pretty much any Angular building unit - components, modules, directives, classes and so on. For the full list, check out the Angular CLI [repo](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services).\nSome of these generators are overwritten in NativeScript Schematics to suite the needs of a NativeScript Angular application. \n\nTo generate a component, call:\n```bash\nng g c component-name\n```\n\nTo generate a module, call:\n```bash\nng g m module-name\n```\n\nTo generate a component in an existing module folder, call:\n```bash\nng g c module-name/component-name\n```\n\n### Migrating ng Project to a shared project\n\n### Migrating Web Components to a Shared Components\nYou can use `ng generate migrate-component` to convert a web Component to a shared component.\nThis includes the following steps:\n\n * add `component-name`.component.tns.html\n * add the component to its `.tns` parent module - note that the `module-name`.module.tns.ts need to exist before you execute the command, or just use the `--skipModule` flag\n\nParams:\n\n * name - `required` - name of the component to be migrated - do not include the word `Component`\n * componentPath - `optional` - the location of the component file, do not include `src/app`, i.e. `home/home.component.ts` - use if the componentPath cannot be derived from the parent module\n * module - `optional` - the name of the parent module - do not include the word `Module`, leave empty if using the default EntryModule (`AppModule`)\n * modulePath - `optional` - the location of the parent module file, do not include `src/app`, i.e. `home/home.module.ts` - use if the module is not located at the `root/app` (by default: `src/app`)\n * skipModule - `optional` - use if you don't want the module to be used for finding the component, and if you don't want to add the Component to Modules providers\n\n### Migrating Web Modules to Shared Modules\nYou can use `ng generate migrate-module` to convert a Web Module to a Shared Module and also convert all of its Components.\nThis includes the following steps:\n\n * add `module-name`.component.tns.ts\n * convert all of modules' components, by using `migrate-component` schematic\n * copy over all providers from the web module\n\n\n## Code sharing: Build\n\nIn a code sharing project to build:\n\n * a `web` app call: `ng serve`,\n * an `iOS` app call: `tns run ios`,\n * an `Android` app call: `tns run android`\n\n## Templates\n\n### Master Detail template\n\nTo generate a Master Detail module, you can use the following command\n`ng g master-detail --master=dogs --detail=dog`\n\nThe above command will generate the following file structure\n\n * dogs\n  * dog-detail\n    * dog-detail component files\n  * dogs\n    * dogs component files\n  * data.service.ts\n  * dogs.module.ts\n\n#### Options\n\n| Option | Description \n| --- | --- \n| master | The name of the master component and the name of the module.\n| detail | The name of the detail component\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-schematics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fnativescript-schematics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-schematics/lists"}