mesauth-angular 0.1.2 → 0.1.4

package/README.md

@@ -2,40 +2,183 @@
 
 Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications.
 
-Quick start
+## Quick Start
 
 1. Install (from local folder during development):
 
-```bash
-cd /path/to/your/angular-app
-npm install ../path/to/mesauth-angular
-```
-
-2. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
-
-```ts
-// in AppComponent
-constructor(private mesAuth: MesAuthService) {
-  this.mesAuth.init({
-    apiBaseUrl: 'https://api.example.com',
-    withCredentials: true,
-    avatarUrl: 'https://api.example.com/avatars',
-    userBaseUrl: 'https://api.example.com/users'
-  });
-
-  this.mesAuth.currentUser$.subscribe(user => console.log('user', user));
-  this.mesAuth.notifications$.subscribe(n => console.log('notif', n));
-}
-```
-
-3. Build the package for publishing:
-
-```bash
-cd /path/to/mesauth-angular
-npm install
-npm run build
-```
-
-Notes
+    ```bash
+    cd /path/to/your/angular-app
+    npm install ../path/to/mesauth-angular
+    ```
+
+2. Provide the service in your app:
+   - **For module-based apps**: Add `MesAuthService` to the providers in your `AppModule` or a feature module.
+     ```ts
+     import { MesAuthService } from 'mesauth-angular';
+
+     @NgModule({
+       // ... other module config ...
+       providers: [MesAuthService]
+     })
+     export class AppModule { }
+     ```
+   - **For standalone apps**: Add `MesAuthService` to the providers in `app.config.ts`.
+     ```ts
+     import { MesAuthService } from 'mesauth-angular';
+
+     export const appConfig: ApplicationConfig = {
+       providers: [
+         // ... other providers ...
+         MesAuthService
+       ]
+     };
+     ```
+
+3. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
+
+    ```ts
+    // in AppComponent
+    constructor(private mesAuth: MesAuthService) {
+      this.mesAuth.init({
+        apiBaseUrl: 'https://api.example.com',
+        withCredentials: true,
+        avatarUrl: 'https://api.example.com/avatars',
+        userBaseUrl: 'https://api.example.com/users'
+      });
+
+      this.mesAuth.currentUser$.subscribe(user => console.log('user', user));
+      this.mesAuth.notifications$.subscribe(n => console.log('notif', n));
+    }
+    ```
+
+    Alternatively, for standalone components or functions (where constructor injection isn't available), use Angular's `inject()`:
+
+    ```ts
+    // In a standalone component or function
+    const mesAuth = inject(MesAuthService);
+    mesAuth.init({
+      apiBaseUrl: 'https://api.example.com',
+      withCredentials: true,
+      avatarUrl: 'https://api.example.com/avatars',
+      userBaseUrl: 'https://api.example.com/users'
+    });
+
+    mesAuth.currentUser$.subscribe(user => console.log('user', user));
+    mesAuth.notifications$.subscribe(n => console.log('notif', n));
+    ```
+
+    **For Standalone Apps (using `bootstrapApplication`):**
+    - After providing the service as above, initialize it using `APP_INITIALIZER` in your `app.config.ts` for app-wide setup, or in the root component.
+    - Example in `app.config.ts` (add to providers):
+
+      ```ts
+      import { APP_INITIALIZER } from '@angular/core';
+      import { MesAuthService } from 'mesauth-angular';
+
+      export const appConfig: ApplicationConfig = {
+        providers: [
+          // ... other providers ...
+          MesAuthService,
+          {
+            provide: APP_INITIALIZER,
+            useFactory: (mesAuth: MesAuthService) => () => {
+              mesAuth.init({
+                apiBaseUrl: 'https://api.example.com',
+                withCredentials: true,
+                avatarUrl: 'https://api.example.com/avatars',
+                userBaseUrl: 'https://api.example.com/users'
+              });
+            },
+            deps: [MesAuthService],
+            multi: true
+          }
+        ]
+      };
+      ```
+
+    - Then, in your root component (e.g., `AppComponent`), subscribe to observables as usual:
+
+      ```ts
+      // In AppComponent (standalone)
+      constructor() {
+        const mesAuth = inject(MesAuthService);
+        mesAuth.currentUser$.subscribe(user => console.log('user', user));
+        mesAuth.notifications$.subscribe(n => console.log('notif', n));
+      }
+      ```
+
+4. Build the package for publishing:
+
+    ```bash
+    cd /path/to/mesauth-angular
+    npm install
+    npm run build
+    ```
+
+## Components
+
+### ma-user-profile
+
+A reusable Angular component for displaying the current user's profile information, with options for navigation and logout.
+
+- **Description**: Renders user details (e.g., name, avatar) fetched via the MesAuthService. Supports custom event handlers for navigation and logout actions.
+- **Inputs**: None (data is sourced from the MesAuthService).
+- **Outputs**:
+  - `onNavigate`: Emits an event when the user triggers navigation (e.g., to a profile page). Pass a handler to define behavior.
+  - `onLogout`: Emits an event when the user logs out. Pass a handler to perform logout logic (e.g., clear tokens, redirect).
+- **Usage Example**:
+
+    ```html
+    <ma-user-profile 
+      (onNavigate)="handleNavigation($event)"
+      (onLogout)="handleLogout()">
+    </ma-user-profile>
+    ```
+
+    In your component's TypeScript file:
+
+    ```ts
+    handleNavigation(event: any) {
+      // Navigate to user profile page
+      this.router.navigate(['/profile']);
+    }
+
+    handleLogout() {
+      // Perform logout, e.g., clear session and redirect
+      this.mesAuth.logout(); // Assuming a logout method exists
+      this.router.navigate(['/login']);
+    }
+    ```
+
+## Notes
 - The service expects an endpoint `GET /api/user/current` that returns the current user.
 - SignalR events used: `UserUpdated` and `NewNotification` (adjust to your backend).
+
+## Troubleshooting
+
+### JIT Compiler Error in Production or AOT Mode
+If you encounter an error like "The injectable 'MesAuthService' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available," this typically occurs because:
+- The package is being imported directly from source code (e.g., during development) without building it first.
+- The client app is running in AOT (Ahead-of-Time) compilation mode, which requires pre-compiled libraries.
+
+**Solutions:**
+1. **Build the package for production/AOT compatibility:**
+   - Ensure you have built the package using `npm run build` (which uses ng-packagr or similar to generate AOT-ready code).
+   - Install the built package via npm (e.g., from a local tarball or registry) instead of linking to the source folder.
+
+2. **For development (if you must link to source):**
+   - Switch your Angular app to JIT mode by bootstrapping with `@angular/platform-browser-dynamic` instead of `@angular/platform-browser`.
+   - Example in `main.ts`:
+     ```ts
+     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+     import { AppModule } from './app/app.module';
+
+     platformBrowserDynamic().bootstrapModule(AppModule);
+     ```
+   - Note: JIT is not recommended for production; use AOT for better performance.
+
+3. **Verify imports:**
+   - Ensure you're importing from the built package (e.g., `import { MesAuthService } from 'mesauth-angular';`) and not from the `src` folder.
+   - If using standalone components, confirm the service is available in the injection context.
+
+If issues persist, check your Angular version compatibility and ensure the package's `package.json` includes the correct entry points for AOT.

package/dist/mes-auth.service.d.ts

@@ -72,7 +72,6 @@ export interface RealTimeNotificationDto {
     sourceAppIconUrl?: string;
 }
 export declare class MesAuthService {
-    private http;
     private hubConnection;
     private _currentUser;
     currentUser$: Observable<IUser | null>;
@@ -80,7 +79,7 @@ export declare class MesAuthService {
     notifications$: Observable<any>;
     private apiBase;
     private config;
-    constructor(http: HttpClient);
+    readonly http: HttpClient;
     init(config: MesAuthConfig): void;
     getConfig(): MesAuthConfig | null;
     private fetchCurrentUser;

package/dist/mes-auth.service.js

@@ -4,10 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -19,8 +16,7 @@ export var NotificationType;
     NotificationType["Success"] = "Success";
 })(NotificationType || (NotificationType = {}));
 let MesAuthService = class MesAuthService {
-    constructor(http) {
-        this.http = http;
+    constructor() {
         this.hubConnection = null;
         this._currentUser = new BehaviorSubject(null);
         this.currentUser$ = this._currentUser.asObservable();
@@ -28,6 +24,8 @@ let MesAuthService = class MesAuthService {
         this.notifications$ = this._notifications.asObservable();
         this.apiBase = '';
         this.config = null;
+        //constructor(private http: HttpClient) {}
+        this.http = inject(HttpClient);
     }
     init(config) {
         this.config = config;
@@ -105,7 +103,6 @@ let MesAuthService = class MesAuthService {
     }
 };
 MesAuthService = __decorate([
-    Injectable({ providedIn: 'root' }),
-    __metadata("design:paramtypes", [HttpClient])
+    Injectable()
 ], MesAuthService);
 export { MesAuthService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesauth-angular",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Angular-friendly SignalR notifier + API helper for current user and notifications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",