ngx-cookie-service | Angular (4 | Authentication library

I just convert my angular web app to ssr for SEO purposes. I succeeded to correct main issues, but this last one i don't know how to deal with.

I have a service sqs.service.ts with the body

I recently did ng update and went then in problems. So basically I have a route (/book) and a query param with:

localhost:4200/book?success=true&successId=1

or

localhost:4200/book?success=false&errorId=1

Angular is converting that to a single route, which is of course not registered in the routing module:

localhost:4200/book%3Fsuccess%3Dtrue&successId%3D1

My package.json:

So I'm trying to deploy my website which works well when in a local environment, but when it is deployed to Cloudfront, it can't seem to access cookies.

My frontend tech stack is as follows: Angular site hosted on S3, cloudfront distribution in front of it, custom domain name with a valid ssl certificate.

When the user navigates to the login page, they can successfully submit the forum, and the server responds with a JWT token in the Set-Cookie header.

After this though, in the angular site it says that the access-token cookie does not exist. The strange part here is that on subsequent requests, the access-token cookie is in fact forwarded back to the backend. (In the image below, the login button was pressed again, so the response cookie is the same as the request cookie.)

I've ensured that HttpOnly is not set, and that the frontend and backend are both hosted under the same root domain frontend.root.com and api.root.com.

Cloudfront has been configured to forward the access-token cookie:

cache policy:

origin request policy (note that it still did not work when I had this set to forward all cookies and not just the access token):

Response headers settings:

So in my angular site, after the /login api call resolves, I use the ngx-cookie-service to check and try to retrieve the cookie.

I am getting issues dynamically loading components using the following syntax:

Iam using Angular 12, I installed cookie by using: npm install --save ngx-cookie-service
in app.module.ts when I import 'CookieService' import { CookieService } from 'ngx-cookie-service'; I got this error message: Cannot find module 'ngx-cookie-service' or its corresponding type declarations.ts(2307)

I have a pipeline that does an npm install followed by angular build and recently I added a caching task to relieve installation which was working splendidly until the developer added a new private dependency of "runtime-config-loader": "^3.0.0".

This may require npm re-install again, however, for some reason the caching task doesn't think it requires a re-install, and so it skips over the npm install and then fails at the angular build, most likely because npm did not re-install on the agent.

I disabled the caching task and removed the custom condition eq(variables['CACHE_RESTORED'],False) from the npm install task, and the build is succeeding just fine.

Why is the cache not recognizing the need to re-install dependencies again? and how do I delete the cache so that npm installs again? As a reminder, when I disable the cache task and npm re-installs again on the agent, the build succeeds - so this is certainly a caching problem.

Here is the build YAML:

I'm trying to build a webapp using Angular 12. However, when attempting to build, I get the following error:

Error: Module not found: Error: Can't resolve '@angular/animations/browser' in 'directorypath\@angular\platform-browser\fesm2020' Did you mean 'browser.js'? BREAKING CHANGE: The request '@angular/animations/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is a '.mjs' file or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

I have tried multiple solutions including clearing the node_modules folder and reinstalling but nothing has helped. I have also confirmed that the directory [@angular\animations] does exist.

app.module.ts

I created a new project in Angular 13. I executed the following command to config typescript-eslint in the project:

I want to use a library in Angular. (The npm package is cubing for reference). This library can run both in the browser or in node and has some specific code to both. I want it to run in the browser, but Angular compilation doesn't work because it can't find worker_threads. I asked the library owner and he said the intended solution is to tell your build system that this import should be ignored because it's only relevant for the node variant of the code.

But I can't figure out how to tell Angular this. How do I tell it: Please ignore this import in this node module, we're never going to reach the code that uses it?

Error: Can't resolve 'worker_threads' in REDACTED/node_modules/cubing/dist/esm

If that's not possible, I guess I could consider doing a node_modules patch, but I dislike that idea, for obvious reasons. And I heard it's hard to get it to work in production environments.

For reference, this is the github project (switch to branch scrambles for the problem at hand): https://github.com/Lykos/cube_trainer.git

And here the most relevant files:

Package.json: