Closed oliviao12345 closed 5 months ago
OktaAuthModule
is an NgModule
https://github.com/okta/okta-angular/blob/master/lib/src/okta/okta.module.ts#L25
This sample show OktaAuthModule
being imported https://github.com/okta/samples-js-angular/tree/master/okta-hosted-login
What version of angular are you using? What errors are being thrown?
The version of Angular being used: Angular CLI: 18.0.3 Node: 20.14.0 Package Manager: npm 10.8.1
The error being thrown while executing "ng serve":
X [ERROR] TS-996002: 'OktaAuthModule' does not appear to be an NgModule class. [plugin angular-compiler]
src/app/app.module.ts:66:4:
66 │ OktaAuthModule
╵ ~~~~~~~~~~~~~~
This likely means that the library (@okta/okta-angular) which declares OktaAuthModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
node_modules/@okta/okta-angular/src/okta/okta.module.d.ts:6:21:
6 │ export declare class OktaAuthModule {
╵
Describe the bug
I should be able to add this as an import in app.module.ts
Reproduction Steps?
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component'; import { ProductListComponent } from './product-list/product-list.component'; import {Routes, RouterModule} from '@angular/router'; import { ProductCategoryMenuComponent } from './components/product-category-menu/product-category-menu.component'; import { SearchComponent } from './components/search/search.component'; import { ProductDetailsComponent } from './components/product-details/product-details.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { CartStatusComponent } from './components/cart-status/cart-status.component'; import { CartDetailsComponent } from './components/cart-details/cart-details.component'; import { CheckoutComponent } from './components/checkout/checkout.component'; import { ReactiveFormsModule } from '@angular/forms'; import { LoginComponent } from './components/login/login.component'; import { LoginStatusComponent } from './components/login-status/login-status.component'; import { OktaAuthModule, OktaCallbackComponent, OKTA_CONFIG } from '@okta/okta-angular'; import { OktaAuth } from '@okta/okta-auth-js'; import myAppConfig from 'src/app/authentication/my-app-config'; import { ProductService } from './services/product.service';
const oktaConfig = myAppConfig.oidc; const oktaAuth = new OktaAuth(oktaConfig);
// Define an array of routes for the application ORDER FROM SPECIFIC TO GENERIC const routes: Routes = [ {path: 'login/callback', component: OktaCallbackComponent}, {path: 'login', component: LoginComponent}, { path: 'checkout', component: CheckoutComponent}, //<<Added This { path: 'cart-details', component: CartDetailsComponent}, { path: 'products/:id', component: ProductDetailsComponent}, //<<Add for Prod Details { path: 'search/:keyword', component: ProductListComponent}, // << ADDED THIS // Route for specific category with an ID parameter { path: 'category/:id', component: ProductListComponent }, // Route for general category { path: 'category', component: ProductListComponent }, // Route for products { path: 'products', component: ProductListComponent }, // Default route, redirect to '/products' when the path is empty { path: '', redirectTo: '/products', pathMatch: 'full' }, // Wildcard route, redirect to '/products' for any other unknown paths { path: '**', redirectTo: '/products', pathMatch: 'full' }
];
@NgModule({ // Declare the components used in the module declarations: [AppComponent, ProductListComponent, ProductCategoryMenuComponent, SearchComponent, ProductDetailsComponent, CartStatusComponent, CartDetailsComponent, CheckoutComponent, LoginComponent, LoginStatusComponent], // Import necessary modules and specify the defined routes imports: [ RouterModule.forRoot(routes), BrowserModule, HttpClientModule, NgbModule, //<-- Ng Bootstrap Module ReactiveFormsModule, //<-- Reactive Forms Module OktaAuthModule ], // Provide any services or dependencies providers: [ProductService, {provide: OKTA_CONFIG, useValue: {oktaAuth}}], // Bootstrap the root component of the application bootstrap: [AppComponent], }) export class AppModule {}
SDK Versions
Olivi@MacBook-Air ecommerce-frontend % npm show @okta/okta-angular version
6.3.2
Additional Information?
No response