I have created a root-config using the create-single-spa CLI.
This runs on port 9000. The npm script section for the root application is:
"scripts": {
"start": "webpack-dev-server --mode=development --port 9000 --env.isLocal=true",
"lint": "eslint src",
"test": "jest",
"prettier": "prettier --write './**'",
"build": "webpack --mode=production"
}
Furthermore, I created a angular 8 micro-front application using single-spa-angular.
This runs on port 4200. The npm script for this micro-front end application is:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:single-spa": "ng build --prod --deploy-url http://localhost:4200/",
"serve:single-spa": "ng serve --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false"
}
The micro-front end application is registered in the root-config as:
registerApplication(
"lego1",
() => System.import("lego1"),
location => location.pathname.startsWith('/lego1')
);
and has {provide: APP_BASE_HREF, useValue: '/'} set inside its app.module.ts.
The micro-front end application loads/mounts correctly when I traverse to http://localhost:9000/lego1/questionnaire (questionnaire is a component in my angular 8 app).
Problem:
I am not able to get an API call working from angular 8 micro-front app. The asp.net core web api is hosted at: http://localhost:21021/
I have created a root-config using the create-single-spa CLI. This runs on port 9000. The npm script section for the root application is: "scripts": { "start": "webpack-dev-server --mode=development --port 9000 --env.isLocal=true", "lint": "eslint src", "test": "jest", "prettier": "prettier --write './**'", "build": "webpack --mode=production" }
Furthermore, I created a angular 8 micro-front application using single-spa-angular. This runs on port 4200. The npm script for this micro-front end application is: "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:single-spa": "ng build --prod --deploy-url http://localhost:4200/", "serve:single-spa": "ng serve --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false" }
The micro-front end application is registered in the root-config as: registerApplication( "lego1", () => System.import("lego1"), location => location.pathname.startsWith('/lego1') );
and has {provide: APP_BASE_HREF, useValue: '/'} set inside its app.module.ts.
The micro-front end application loads/mounts correctly when I traverse to http://localhost:9000/lego1/questionnaire (questionnaire is a component in my angular 8 app).
Problem:
I am not able to get an API call working from angular 8 micro-front app. The asp.net core web api is hosted at: http://localhost:21021/
The http.get call looks like:
this.http.get<any[]>(http://localhost:21021/api/services/app/Question/GetAll/);
However, this call fails with HttpErrorResponse: HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:9000/lego1/%E2%80%8Bhttp://localhost:21021/api/services/app/Question/GetAll/", ok: false, …}
Note that the API call is getting appended with the url of the root-config app "http://localhost:9000/lego1/%E2%80%8B" which leads to a 404.
Can you please advise what needs to be done for this to work?