open-index/open-npm huggingface dataset:
npm package: @liuk123/insui
Description: insui的安装过程
Latest version: 0.0.1-alpha.2

# InsuiProject

insui的安装过程

## Install

### 安装插件

安装 `@liuk123/insui` 和 `@liuk123/insui-icons` 插件。

```
npm install @liuk123/insui @liuk123/insui-icons
```

### 引入样式

在项目的 `angular.json` 文件中引入 `ins-ui-global.less` 样式文件。

```

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@liuk123/insui/styles/ins-ui-global.less"
            ]
          }
        }
      }
    }
  }
}
```

### 引入依赖注入项

在项目的`src/app/app.config.ts`文件中引入 `NG_EVENT_PLUGINS` 依赖注入项。

```
export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), provideClientHydration(withEventReplay()),
    ...
    NG_EVENT_PLUGINS <!-- 引入事件插件 -->
  ]
};
```
### 引入root组件和主题

在 `app.component.ts` 文件中引入 `InsRoot` 组件和主题服务。  
主题目前支持 `light` 和 `dark` 两种主题。

```
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, InsRoot], <!-- 引入InsRoot组件 -->
  template: `<ins-root ><router-outlet /></ins-root>`, <!-- 在最外层使用InsRoot组件 -->
  host: { 
    '[attr.insTheme]': 'theme()', <!-- 绑定主题属性 light dark -->
   },
   providers: []
})
export class AppComponent {
  settingSrv = inject(SettingService)
  theme = toSignal(
    this.settingSrv.theme$.pipe(
      map(v=>v=='sys'?this.settingSrv.getSystemTheme(): v)
    )
  )
}
```

### 设置ICONS

在 `angular.json` 文件中配置 `assets` 选项，将 `@liuk123/insui-icons` 插件的图标文件复制到项目的 `assets/ins-ui/icons` 目录下。

```
{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          // ...
          "assets": [
            {
              "glob": "**/*",
              "input": "node_modules/@liuk123/insui-icons/src",
              "output": "assets/icons"
            }
          ]
        }
      }
    }
  }
}
npm package: @liuk123/insui-doc
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
Latest version: 0.0.1-alpha.1

# InsuiDoc

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build insui-doc
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/insui-doc
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @liuk123/insui-icons
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
Latest version: 0.0.1-alpha.1

# InsuiIcons

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build insui-icons
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/insui-icons
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.