mesauth-angular 0.1.2 → 0.1.3

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.js

@@ -105,7 +105,7 @@ let MesAuthService = class MesAuthService {
     }
 };
 MesAuthService = __decorate([
-    Injectable({ providedIn: 'root' }),
+    Injectable(),
     __metadata("design:paramtypes", [HttpClient])
 ], MesAuthService);
 export { MesAuthService };

package/package.json

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