Skip to content
This repository has been archived by the owner on Nov 17, 2022. It is now read-only.

docs: improve schematics article #1855

Merged
merged 1 commit into from
Dec 17, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions docs/code-sharing/creating-a-new-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ Creating a code-sharing project is a straightforward process. You can use Angula
You need to use the following versions of npm modules:

* **Angular CLI** - v6.1.0 or newer
```
npm i -g @angular/cli
```

* The latest version of **NativeScript Schematics**
```
npm i -g @nativescript/schematics
```
```
npm i -g @nativescript/schematics
```

## Using the Angular CLI

Expand Down
44 changes: 22 additions & 22 deletions docs/code-sharing/migrating-a-web-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ To convert your project to use a single (shared) navigation configuration, you n
Here are the steps:

1. Add a shared file with the routes configuration: **app.routes.ts**
```TypeScript
```TypeScript
import { Routes } from '@angular/router';

export const routes: Routes = [
Expand All @@ -137,7 +137,7 @@ export const routes: Routes = [
```

1. Replace the routes configuration in **app-routing.module.ts** with the import of **ROUTES**
```TypeScript
```TypeScript
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

Expand All @@ -151,7 +151,7 @@ export class AppRoutingModule { }
```

1. Replace the routes configuration in **app-routing.module.tns.ts** with the import of **ROUTES**
```TypeScript
```TypeScript
import { NgModule } from '@angular/core';
import { NativeScriptRouterModule } from 'nativescript-angular/router';

Expand All @@ -164,6 +164,24 @@ import { routes } from '@src/app/app.routes';
export class AppRoutingModule { }
```

### Migrating Modules

You should also migrate your **NgModules** into code sharing modules.

Often the migration step will consist of these steps:

* Add the NativeScript version of the **@NgModule**—**module-name.component.tns.ts**,
* copy the providers from your web **@NgModule**,
* copy the imports from your web **@NgModule** - use NativeScript versions for those that are web-specific (e.g. use **NativeScriptHttpClientModule** instead of **HttpClientModule**)
* convert all of modules' components, by using migrate-component schematic,
* and migrate declared components and add them to **declarations**

This task can be helped with the [module migration schematic](./migrating-a-web-project#schematic-migrate-module):

```bash
ng g migrate-module --name=module-name
```

### Migrating Components

Your next task is to migrate your individual components into a code-sharing structure.
Expand All @@ -179,7 +197,7 @@ This task can be helped with the [component migration schematic](./migrating-a-w
ng g migrate-component --name=component-name
```

In the case where the component class contains web-specific code, you will need to extract the **platform-specific** code into a set of **helper files** of **services** and keep only the shared code. You can read more on handling [partial differences here]([read more here ](./code-splitting#partial-differences)).
In the case where the component class contains web-specific code, you will need to extract the **platform-specific** code into a set of **helper files** of **services** and keep only the shared code. You can read more on handling [partial differences here](./code-splitting#partial-differences).

### Schematic: migrate-component

Expand Down Expand Up @@ -324,24 +342,6 @@ Run the following code to achieve the same result.
ng g migrate-component --name=dog --component-path=animals/dog/dog-cmp.ts --skip-module
```

### Migrating Modules

You should also migrate your **NgModules** into code sharing modules.

Often the migration step will consist of these steps:

* Add the NativeScript version of the **@NgModule**—**module-name.component.tns.ts**,
* copy the providers from your web **@NgModule**,
* copy the imports from your web **@NgModule** - use NativeScript versions for those that are web-specific (e.g. use **NativeScriptHttpClientModule** instead of **HttpClientModule**)
* convert all of modules' components, by using migrate-component schematic,
* and migrate declared components and add them to **declarations**

This task can be helped with the [module migration schematic](./migrating-a-web-project#schematic-migrate-module):

```bash
ng g migrate-module --name=module-name
```

### Schematic: migrate-module

The **migrate-module** performs the module migration steps, which involve:
Expand Down