Blancer.com Tutorials and projects

I’m trying to build a Module Federation app using Angular 19 and Webpack 5. My setup consists of:

1. Remote-App: It successfully builds and generates remoteEntry.js, accessible at:
   http://localhost:4201/remoteEntry.js

2. Host-App: Fails to load mfe-app remoteEntry.js from http://localhost:4201/remoteEntry.js
   in the host application, I get this error in the browser console:
   Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at remoteEntry.js:3629:29)

What I’ve Tried

To resolve this, I attempted the following:

1. Configured Remote-App to use CommonJS instead of ES Modules

Here’s my remote-app webpack.config.js:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

const mfConfig = withModuleFederationPlugin({
name: 'remote-mfe-app',
exposes: {
 './RemoteEntryComponent': './src/app/remote-entry/remote-entry.component.ts'
},
shared: {
 ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}
});

module.exports = {
...mfConfig,

output: {
 library: {
   type: "commonjs" // Also tried "module" and "umd"
 }
},

experiments: {
 outputModule: false
}
};

2. Configured Host-App to treat remoteEntry.js as CommonJS instead of an ES Module

Here’s my host-app webpack.config.js:

const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'mfe-host-app',
  remoteType: 'commonjs',

  remotes: {
    'remote-mfe-app': 'alpha-new-business-mfe@http://localhost:4201/remoteEntry.js'
  },

  shared: {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto'
  }
});

Despite all this. The remoteEntry.js file is still generated as ES Module and contain the import.meta I’m trying to avoid. Below is a snippet of remoteEntry.js that is causing this syntax error:

Below is the error I get host-app resulting in remote-app failing to load:

Any suggestion on how to fix this?

In the example below, after running ng test –include my-component.component.spec.ts, I’m getting this error:

An error was thrown in afterAll Uncaught ReferenceError: Cannot access
‘MyComponentComponent’ before initialization

I think this is due to a circular dependency, because my component access a route file where the component itself is referenced.

my-component.component.ts

import {Component, OnInit} from '@angular/core';
import {myRoutes} from './my-routes';

@Component({
  selector: 'mi-component',
  template: ``,
})
export class MyComponentComponent implements OnInit {
  ngOnInit(): void {

  }

  routesModification() {
    const routes = myRoutes;
    routes[0].path = '/new-route';
  }
}

my-component.component.spec.ts

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MyComponentComponent} from './my-component.component';

describe('MyComponentComponent class', () => {
  let component: MyComponentComponent;
  let fixture: ComponentFixture<MyComponentComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponentComponent],
      imports: [],
      providers: [],
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('El componente deberia estar creado correctamente', () => {
    expect(component).toBeTruthy();
  });
});

my-routes.ts

import {Routes} from '@angular/router';
import {MyComponentComponent} from './my-component.component';

export const myRoutes: Routes = [
  {
    path: '',
    component: MyComponentComponent,
  },
];

I need to fix this so that the test passes without touching the component or the route files, which I am not allowed. This is a problem that occurs only when I launch the test individually, when I launch the application or when I launch ng test globally, no such message appears.

I am getting this error:

ReactCodegen: Command PhaseScriptExecution failed with a nonzero exit code

This is my Package.json:

  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.1.1",
    "@react-native-vector-icons/common": "^11.0.0",
    "@react-native-vector-icons/ionicons": "^7.4.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "axios": "^1.7.9",
    "formik": "^2.4.6",
    "react": "18.3.1",
    "react-native": "0.77.0",
    "react-native-bouncy-checkbox": "^4.1.2",
    "react-native-image-picker": "^8.1.0",
    "react-native-popover-view": "^6.1.0",
    "react-native-safe-area-context": "^5.2.0",
    "react-native-screens": "^4.6.0",
    "react-native-toast-message": "^2.2.1",
    "react-native-vision-camera": "^4.6.3",
    "react-native-vision-camera-face-detector": "^1.8.1",
    "react-native-worklets-core": "^1.5.0",
    "yup": "^1.6.1"
  },

I have a webpage with a navbar menu. When a user clicks on a menu item, it dynamically loads the corresponding PHP file into the home dynamic content section using JavaScript, and the content updates without reloading the page.

One of the menu options displays a message form within the dynamic content area. However, when I submit the form, it redirects to the form.php file, causing the entire page to reload and breaking the dynamic content.

I want to submit the form data without causing a page reload, while keeping the dynamic content intact. I would like to display the success or failure message after submission, without reloading the page.

How can I achieve this using JavaScript to submit the form and display the result without breaking the dynamic content?

home.php

<li class="nav-item m-2"><a href="message.php" id="message" class="nav-link text-white px-3 py-2">message</a></li>

js

function loadPage(event, page) {
        if (event) event.preventDefault(); 

        fetch(page) // Fetch the PHP page
            .then(response => response.text()) 
            .then(data => {
                mainContent.innerHTML = data;
            })
            .catch(error => console.error("Error loading page:", error));
    }if (message) makeTimetable.addEventListener("click", (event) => loadPage(event, "../message.php"));</script>```

I have GeoJSON files containing a FeatureCollection using EPSG:27700 and for Maplibre I believe the coordinates need to be specified in EPSG:4326).

What is the best way of either getting Maplibre to handle a GeoJSON layer with EPSG:27700 coordinates or mapping the coordinates from EPSG:27700 to EPSG:4326 ?

I have the following node.js javascript code using aws-sdk/client-s3:

console.log("Begin Program");

const client = getS3Client();
const params = { Bucket: "my_bucket", Key: "my_file" }
const cmd = new GetObjectCommand(params)

try {
 const resp = await client.send(cmd);
 const str = await response.Body.transformToString();
 console.log(str);
} catch (err) {
 console.log(err);
}

console.log("End Program");

When I run this code, 2 out of 20 times, the code would execute the console.log(str) line and I would see the content of the file I download. The rest of the times, I only see “Begin Program”.

I am not sure why the program would behave differently from run to run. Am I using the client.send() wrong therefore await is not allowing the promise returned by client.send() to be fulfilled before proceeding?

Is there a known bug in the AWS S3Client?

I don’t see the console.log(err) executed ever so I don’t think the program crashed with an “exception”.

Thank you for your help in advance!

I have tried different version of the aws-sdk/client-s3 version 3.689 and the latest version. But I get the same error

So why does typescript make visibly hectic javascript code when used enum?
Here is an exaple of me using enum in TS.

enum SeatChoice {
    AISLE,
    WINDOW,
    MIDDLE,
    FOURTH
}

const seat = SeatChoice.AISLE;

and the equivalent javascript code is:

var SeatChoice;
(function (SeatChoice) {
    SeatChoice[SeatChoice["AISLE"] = 0] = "AISLE";
    SeatChoice[SeatChoice["WINDOW"] = 1] = "WINDOW";
    SeatChoice[SeatChoice["MIDDLE"] = 2] = "MIDDLE";
    SeatChoice[SeatChoice["FOURTH"] = 3] = "FOURTH";
})(SeatChoice || (SeatChoice = {}));
var seat = SeatChoice.AISLE;

while if I just replaced enum by const in typescript:

const SeatChoice {
    AISLE,
    WINDOW,
    MIDDLE,
    FOURTH
}

const seat = SeatChoice.AISLE;

its equivalent javascript code becomes much more simpler:

var SeatChoice, _a = void 0, AISLE = _a.AISLE, WINDOW = _a.WINDOW, MIDDLE = _a.MIDDLE, FOURTH = _a.FOURTH;
var seat = SeatChoice.AISLE;

Also I don’t understand the concept of “_a” in above javscript code snipet?

first of all, I’m not very good at English, so I’m using a translator to ask my question. Please understand if my question sounds strange.

I’m implementing Apple SNS login for the web, and at first, I tried using this code:

const clientSecret = jwt.sign(
  {
    iss: process.env.APPLE_TEAM_ID,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 3600,
    aud: `https://appleid.apple.com`,
    sub: process.env.APPLE_CLIENT_ID
  },
  privateKey,
  {
    algorithm: 'ES256',
    keyid: process.env.APPLE_KEY_ID,
  }
);

However, I kept encountering the 'invalid_client' error.

After repeatedly asking ChatGPT for help, I got this code, which I’m currently using:

const clientSecret = jwt.sign({}, privateKey, { 
  algorithm: 'ES256',
  expiresIn: '1h', 
  audience: 'https://appleid.apple.com',
  issuer: `${process.env.APPLE_TEAM_ID}`,
  subject: `${process.env.APPLE_CLIENT_ID}`,
  keyid: `${process.env.APPLE_KEY_ID}`,
});

This version works without errors.

But I just can’t understand the difference between these two codes. Why didn’t the first version work, even though I included the payload values as required…?

const currentDate = Date.now(); // Time stamp
pm.environment.set("currentDate", currentDate);

Body Request

{
    "refTime": {{currentDate}},
}

The Error Result

type: "Error"
name: "JSONError"
message: "Unexpected token 'c' at 11:18
    "refTime": {{currentDate}},
                 ^" 

I just want to do body request with {{currentDate}} as number into my backend.

*(I apologize in advance if I tagged inapplicable or irrelevant language in my post tags.)

I want to know how to populate a div’s content differently, based on which page a visitor came from?

For example:

If a site visitor enters the direct URL mywebsite.com/pageC into their browser, the ‘default’ content loaded into a particular div [id=fruitBasket] is a photo of an apple.

And, If the visitor arrives at pageC from a link on pageA (or any other page except pageB), the same ‘default’ content [a photo of an apple] is loaded into the same div.

However… If the visitor arrives at PageC from a link on PageB, the same div is loaded with a photo of an orange instead.