[Docs]: Integration with Nx and Angular v16

[Nxtivision]

Description

Hi,

Thank you for this great library, which seems to be the best alternative to Storybook (and I'm not exaggerating in my words). Everything is so simple to use, and it makes me feel so powerful... :)

I had some difficulties installing and configuring everything, and by fiddling a bit with the files, I think that the documentation should be updated (or at least, write a part on the integration in Nx)

Here are the changes I had to do:

1. Update ng-doc.config.ts

// Update the ng-doc.config.ts

import { NgDocConfiguration } from '@ng-doc/builder';

const config: NgDocConfiguration = {
  pages: 'apps/<project-name>/src',
  tsConfig: 'apps/<project-name>/tsconfig.app.json',
};

export default config;

2. Update project.json (instead of angular.json, which is not used inside a Nx project)

{
  "name": "<your-project-name>",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "design-system",
  "sourceRoot": "apps/<your-project-name>/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@ng-doc/builder:browser",
      ...
    }
  }
}

3. Standalone AppComponent

As I use mainly Standalone Component, I also updated the part concerning the AppModule and refactored it inside the AppConfig and AppComponent

// app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideAnimations(),
    provideSearchEngine(NgDocDefaultSearchEngine),
    provideRouter([
      ...NG_DOC_ROUTING,
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/01-welcome', // Redirect to my splashscreen at the start of the app
      },
    ]),
    ngDocContextProvider,
    {
      provide: NG_DOC_ASSETS_PATH,
      useValue: 'assets/ng-doc/ui-kit', // To retrieve icons etc...
    },
  ],
};

// app.component.ts

@Component({
  selector: 'my-doc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [
    NgDocRootComponent,
    NgDocNavbarComponent,
    RouterOutlet,
    NgDocSidebarComponent,
  ],
  standalone: true,
})
export class AppComponent {}

That's the main changes I've made to make it work 😄

[skoropadas]

Hey, thank you so much! 🙂

Automatic installation should work with NX and it should update project.json instead of angular.json correctly (NX handles it) but I think it's a good idea to create an installation guide for NX since a lot of developers use it.

About standalone apps that's true, I'm gonna update the schematics of the @ng-doc/add package to start supporting standalone applications, but first I need to contribute to the ng-morph library to be able to do that, so it will take some time.

[skoropadas]

I think I will add the documentation a little later. The thing is, if I create an additional page explaining the installation for NX, it will be almost a copy of the installation for the Angular application, and I would like to avoid that. I think I will first add a new feature that allows for tabs for code examples. For example, an example of calling a command for Angular and NX. This will help avoid duplication and simply use the same page to describe the installation for NX.

[Nxtivision]

You're right, it's the best way to go. Do not hesitate to ask for help if needed, I'll be glad to contribute :)

[skoropadas]

Contributing is the next issue. I need to create a guide for users who are ready to do it in order to save their and my time when creating and reviewing pull requests. Somehow, I haven't gotten around to it yet 😃

[skoropadas]

🎉 This issue has been resolved in version 16.7.0 🎉

The release is available on:

• v16.7.0
• GitHub release

Your semantic-release bot 📦🚀