Skip to content

Commit

Permalink
feat: enable ng-add prompts for routing & metadata modules (#990)
Browse files Browse the repository at this point in the history
  • Loading branch information
davidlj95 authored Oct 24, 2024
1 parent 0a62f6e commit 5f4c2c3
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 72 deletions.
77 changes: 10 additions & 67 deletions projects/ngx-meta/docs/content/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,27 @@

Glad you're here 🥰 Let's set it up in 3 steps ⚡️

## ➕ 1. Install
## ➕ 1. Install and setup

```shell
ng add @davidlj95/ngx-meta
```

The command will install the library and add the core provider to your app configuration or root module.
The command will install the library and add ask you if you want to set up the routing module to set metadata values in Angular routes' `data`.

## ⚙️ 2. Setup
Then, to set some metadata to get started, choose at least the [standard module].

Let's add the library to your Angular site and set some standard `#!html <meta>` tags.
??? tip "Select just the metadata modules you need"

=== "For standalone, module-free apps"
In order to reduce the bundle size. You can also [lazy load them later](late-loading-modules.md) if you don't need to setup some metadata until the user reaches a specific page.

--8<-- "includes/standalone-apps-explanation.md"
??? note "You can set it up manually too"

Open your `app.config.ts` file. Add at least the core provider to the `providers` section. It should be there already if installed the library with `ng add`.
Check out the [manual setup](manual-setup.md) guide for more information.

If you want to set metadata in each route's `data` using Angular's `Router`, add the library's routing module too.
## 🏷️ 2. Set some metadata

In order to set some standard `#!html <meta>`s, let's add the [standard module] provider.

```typescript title="app.config.ts"
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

export const appConfig: ApplicationConfig = {
// ...
providers: [
// ...
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
provideNgxMetaStandard(),
// ...
],
}
```

--8<-- "includes/example-standalone-app-config.md"

=== "For non-standalone, module-based apps"

--8<-- "includes/module-apps-explanation.md"

Open your `app.module.ts` file. Add at least the library's core module to the `providers` section. It should be there already if installed the library with `ng add`.

If you want to set metadata in each route's `data` using Angular's `Router`, add the library's routing module too.

In order to set some standard `<meta>`s, let's add the [standard module].

```typescript title="app.module.ts"
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

@NgModule({
// ...
providers: [
// ...
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
provideNgxMetaStandard(),
],
// ...
})
export class AppModule {}
```

--8<-- "includes/example-module-based-app-module.md"

??? tip "Lazy load them if you want!"

You can load metadata modules (like [Open Graph module]) later. They can be lazy loaded too actually. So if you don't need all metadata modules to be available in all your app, you can reduce the main bundle size by loading some later. Check out the [late loading modules guide](late-loading-modules.md) for more information

## 🏷️ 3. Set some metadata

### Using the service
### 2.1 Using the service

--8<-- "includes/service-usage.md"

Expand All @@ -89,7 +32,7 @@ Let's add the library to your Angular site and set some standard `#!html <meta>`

See [service guide about clearing metadata values](set-metadata-using-service.md#clearing-metadata-values) for more information

### Using [route's data]
### 2.2 Using [route's data]

If you added the library's routing module, you can set the metadata for a page using a [route's data]. For instance:

Expand Down
82 changes: 82 additions & 0 deletions projects/ngx-meta/docs/content/guides/manual-setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# Manual setup

If you don't want to use the `ng add` schematics to install and set up the library as described in [get started](get-started.md), you can install and set up the library manually.

## 1. Install the library

Using your package manager's install command. For instance, with `npm`:

```shell
npm install @davidlj95/ngx-meta
```

## 2. Add library's providers

Now, let's add some providers to set the library up.

=== "For standalone, module-free apps"

--8<-- "includes/standalone-apps-explanation.md"

Open your `app.config.ts` file. Add at least the core provider to the `providers` section.

If you want to set metadata in each route's `data` using Angular's `Router`, add the library's routing module too.

In order to set some standard `#!html <meta>`s, let's add the [standard module] provider.

```typescript title="app.config.ts"
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

export const appConfig: ApplicationConfig = {
// ...
providers: [
// ...
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
provideNgxMetaStandard(),
// ...
],
}
```

--8<-- "includes/example-standalone-app-config.md"

=== "For non-standalone, module-based apps"

--8<-- "includes/module-apps-explanation.md"

Open your `app.module.ts` file. Add at least the library's core module to the `providers` section.

If you want to set metadata in each route's `data` using Angular's `Router`, add the library's routing module too.

In order to set some standard `<meta>`s, let's add the [standard module].

```typescript title="app.module.ts"
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

@NgModule({
// ...
providers: [
// ...
provideNgxMetaCore(),
provideNgxMetaRouting(), // (optional)
provideNgxMetaStandard(),
],
// ...
})
export class AppModule {}
```

--8<-- "includes/example-module-based-app-module.md"

??? tip "Lazy load them if you want!"

You can load metadata modules (like [Open Graph module]) later. They can be lazy loaded too actually. So if you don't need all metadata modules to be available in all your app, you can reduce the main bundle size by loading some later. Check out the [late loading modules guide](late-loading-modules.md) for more information

## 3. Enjoy

You can use the library as usual now. Take a look at the steps after the setup in the [get started docs](get-started.md)
1 change: 1 addition & 0 deletions projects/ngx-meta/docs/mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ nav:
- guides/late-loading-modules.md
- guides/manage-your-custom-metadata.md
- guides/custom-metadata-providers-selection.md
- guides/manual-setup.md
- Built-in modules:
- Built-in modules: built-in-modules/index.md
- built-in-modules/standard.md
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-meta/schematics/ng-add/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function ngAdd(options: Schema): Rule {
[
'ngx-meta `ng add` schematics only work for Angular v16.1 and above, sorry :(',
"Please, setup the library manually. Don't worry, it's just a few lines around :)",
'You can find a guide at: https://ngx-meta.dev/get-started/',
'You can find a guide at: https://ngx-meta.dev/guides/manual-setup/',
].join('\n'),
)
logLibraryInfo(context.logger)
Expand Down
6 changes: 2 additions & 4 deletions projects/ngx-meta/schematics/ng-add/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
"type": "boolean",
"description": "Enables routing module to provide metadata in Angular routes' data",
"default": false,
"//todo": "Enable x-prompts for this and metadata modules to include when both are ready",
"//x-prompt": "Would you like to provide metadata in Angular routes' data?"
"x-prompt": "Would you like to provide metadata in Angular routes' data?"
},
"metadataModules": {
"type": "array",
Expand All @@ -33,8 +32,7 @@
},
"uniqueItems": true,
"default": [],
"//todo": "Enable x-prompts for this and metadata modules to include when both are ready",
"//x-prompt": {
"x-prompt": {
"type": "list",
"message": "What metadata would you like to set?",
"items": [
Expand Down

0 comments on commit 5f4c2c3

Please sign in to comment.