Angular 17 结合 Nebular 独立组件使用相关技术咨询

核心问题解答 #

1. 能否在Angular 17中使用Nebular？
   可以。Nebular从17版本开始官方适配Angular 17，完全兼容你当前的环境版本。

2. 如果可以，能否结合独立组件使用？
   可以。Nebular支持与Angular独立组件模式配合，无需完全切换回NgModule模式。

3. 是否需要创建app.module文件？
   不需要强制创建。如果仅使用少量Nebular组件，可直接在独立组件或引导逻辑中单独导入；若需批量使用多个组件，创建app.module.ts并与独立组件引导逻辑结合会更高效。

基础集成模板步骤 #

1. 安装适配版本的Nebular #

先清理可能存在的旧版依赖，再安装Angular 17兼容版：

npm uninstall @nebular/theme @nebular/auth @nebular/eva-icons --save
npm install @nebular/theme@17 @nebular/auth@17 @nebular/eva-icons@17 --save

2. 两种集成方式 #

方式1：无NgModule，独立组件直接导入（适合少量组件）

修改main.ts，添加Nebular核心配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { provideNebular } from '@nebular/theme';
import { provideEvaIcons } from '@nebular/eva-icons';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideNebular({ theme: 'default' }), // 可选主题：cosmic、corporate等
    provideEvaIcons(),
  ],
});

在app.component.ts中直接引入所需Nebular组件：

import { Component } from '@angular/core';
import { NbButtonModule } from '@nebular/theme';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NbButtonModule],
  template: `
    <h1>Angular 17 + Nebular 独立组件示例</h1>
    <button nbButton status="primary">Nebular 按钮</button>
  `,
})
export class AppComponent {
  title = 'my-app';
}

方式2：结合NgModule批量导入（适合多组件场景）

创建app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NbThemeModule, NbButtonModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';

@NgModule({
  imports: [
    BrowserModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbEvaIconsModule,
    NbButtonModule,
    NbLayoutModule,
  ],
  exports: [
    NbThemeModule,
    NbEvaIconsModule,
    NbButtonModule,
    NbLayoutModule,
  ],
})
export class AppModule {}

修改main.ts，关联NgModule与独立组件：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { importProvidersFrom } from '@angular/core';
import { AppModule } from './app/app.module';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    importProvidersFrom(AppModule),
  ],
});

此时app.component.ts可直接使用AppModule中导出的组件：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <nb-layout>
      <nb-layout-header>头部导航</nb-layout-header>
      <nb-layout-column>
        <h1>Angular 17 + Nebular 混合模式示例</h1>
        <button nbButton status="success">成功按钮</button>
      </nb-layout-column>
    </nb-layout>
  `,
})
export class AppComponent {
  title = 'my-app';
}

3. 全局样式配置 #

在styles.scss中添加Nebular主题样式：

@import '~@nebular/theme/styles/prebuilt/default.css';

附：环境信息 #

Angular CLI: 17.1.1
Node: 18.17.1
Package Manager: npm 9.6.7
OS: darwin arm64

Angular: 17.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.1
@angular-devkit/build-angular   17.1.1
@angular-devkit/core            17.1.1
@angular-devkit/schematics      17.1.1
@schematics/angular             17.1.1
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.3

内容的提问来源于stack exchange，提问作者Darren