Angular 17中安装Nebular 13遇问题求助

我使用Angular结合Nebular UI组件开发后台仪表盘，遇到三类问题：

1. 执行ng add @nebular/theme安装时，报错：Could not read Angular module file: /src/null.ts
2. 手动执行以下命令安装依赖后，独立组件使用Nebular组件出现异常：

   npm install --save @nebular/theme @angular/cdk @angular/animations
   npm install --save eva-icons @nebular/eva-icons
   npm install --save @nebular/auth @nebular/security
   

   • 直接使用nb-card组件时无样式
   • 将内容包裹在nb-layout和nb-layout-column中后，抛出依赖错误：

     ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_NbMediaBreakpointsService   -> _NbMediaBreakpointsService -> _NbMediaBreakpointsService]: 
     NullInjectorError: No provider for _NbMediaBreakpointsService!
     

   我的app.component.ts和app.component.html代码如下：

   import { Component } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   import {
     NB_MEDIA_BREAKPOINTS,
     NB_THEME_OPTIONS,
     NbCardModule,
     NbLayoutModule,
     NbStatusService,
     NbThemeModule,
     NbThemeOptions,
     NbThemeService,
   } from '@nebular/theme';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [RouterOutlet, NbCardModule, NbThemeModule, NbLayoutModule],
     providers: [
       NbStatusService,
       NbThemeService,
       { provide: NB_THEME_OPTIONS, useValue: {} as NbThemeOptions },
       { provide: NB_MEDIA_BREAKPOINTS, useValue: {} as any },
     ],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',
   })
   export class AppComponent {}
   

   <nb-layout>
     <nb-layout-column>
       <nb-card>
         <nb-card-header>Card Header</nb-card-header>
         <nb-card-body> This is the body of the card. </nb-card-body>
         <nb-card-footer>Card Footer</nb-card-footer>
       </nb-card>
     </nb-layout-column>
   </nb-layout>
   

3. 从GitHub下载ngx-admin项目后，执行npm i安装失败。创建项目时选择了CSS样式表格式且未启用服务端渲染。

1. 解决ng add @nebular/theme报错问题 #

该错误源于Angular CLI在独立组件项目中无法识别传统模块文件（独立组件无app.module.ts）。直接跳过ng add，采用手动安装+配置的方式即可，或创建带模块的Angular项目后再执行ng add。

2. 解决独立组件中Nebular的样式与依赖问题 #

2.1 修复依赖注入错误 #

你手动提供的NB_MEDIA_BREAKPOINTS为空对象，导致_NbMediaBreakpointsService无法初始化。正确做法是导入Nebular默认断点配置：

• 从@nebular/theme导入NbMediaBreakpointsService和defaultBreakpoints
• 调用NbThemeModule.forRoot()初始化主题配置（此前遗漏此步骤）
• 用defaultBreakpoints作为NB_MEDIA_BREAKPOINTS的提供者值

修改后的app.component.ts：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  NB_MEDIA_BREAKPOINTS,
  NB_THEME_OPTIONS,
  NbCardModule,
  NbLayoutModule,
  NbMediaBreakpointsService,
  NbStatusService,
  NbThemeModule,
  NbThemeOptions,
  NbThemeService,
  defaultBreakpoints,
} from '@nebular/theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NbCardModule, NbThemeModule.forRoot(), NbLayoutModule],
  providers: [
    NbStatusService,
    NbThemeService,
    NbMediaBreakpointsService,
    { provide: NB_THEME_OPTIONS, useValue: {} as NbThemeOptions },
    { provide: NB_MEDIA_BREAKPOINTS, useValue: defaultBreakpoints },
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {}

2.2 修复组件无样式问题 #

Nebular样式需全局引入，在angular.json的styles数组中添加预构建主题文件：

"styles": [
  "src/styles.css",
  "node_modules/@nebular/theme/styles/prebuilt/default.css"
]

若使用其他主题，替换default.css为对应文件名（如cosmic.css、corporate.css）。

3. 解决ngx-admin项目npm i失败问题 #

3.1 清除缓存后重试 #

执行以下命令：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

3.2 适配Node.js版本 #

ngx-admin对Node.js版本有要求，确保使用项目package.json中engines字段指定的LTS版本（如18.x或20.x），可通过nvm切换：

nvm install 18
nvm use 18

3.3 切换依赖源（可选） #

若因网络问题导致下载失败，切换到国内npm源：

npm config set registry https://registry.npmmirror.com/
npm install

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