Angular 17 with Nebular using Standalone Components

I'm just taking a look at Angular and we use it with Nebular for UI, so I thought I'd try and get a quick app started to explore and become familiar.

After installing angular, I created a new app with app new my-app.

Trying to follow the instructions to add Nebular to the app do not work since the new app is created with standalone components and the Nebular framework appears to require modules?

I've spent some time and tried a lot of combinations, so my questions are this:

Can I use nebular with angular 17?
If yes, can I use it with standalone components?
Do I need to create an app.module file?

Essentially, I could just use a really basic template that has these items working together.

Being new to angular, this whole process has been quite frustrating, especially given the angular tutorials don't even work as expected either.

Any thoughts / assistance greatly appreciated.

Info from ng version


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

Solution

So it isn't obvious from their docs but it looks like nebular supports Angular 16 and 17. Here is their upgrade to Angular 16. And here is the upgrade to Angular 17, committed just four days ago. Presumably that means it works in Angular 17 however the documentation you linked doesn't reflect those versions. It looks like v13 of Nebular is what you need for Angular 17. If you run,

npm i @nebular/theme@13

And the equivalent for each nebular module that you want, you should notice pretty quickly if there are dependency issues.

Regarding standalone components, yes you can use it with standalone components. Their documentation is behind but you can still import modules with standalone components. Importing a module in a standalone component looks like this,

@Component({
  standalone: true,
  selector: 'photo-gallery',
  // an existing module is imported directly into a standalone component
  imports: [MatButtonModule],
  template: `
    ...
    <button mat-button>Next Page</button>
  `,
})
export class PhotoGalleryComponent {
  // logic
}

Just replace MatButtonModule with whatever you want to import and that module will become available in your standalone component.

You should probably have an app.module.ts file but not because of Nebular. It is typically the root module where you import, declare, and export components and modules that you want to be accessible to your entire application. Standalone components make it less critical but it is still pretty common to see in tandem with standalone components.