What could cause a "TypeError: (0 , d.__decorate) is not a function" of an angular function inside a docker container?

Question

I'm building a web application. The frontend is in angular and the backend in .Net Core.

Currently, I'm doing the following, to build my final docker image:

1. Build angular app
2. Copy the built angular files in the wwwroot of asp.net core
3. Building the asp.net core app
4. Publishing the asp.net core app
5. Copying the publish result inside a docker image.

Here is my current dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM node:latest as node
WORKDIR /app

COPY Frontend .
RUN npm install
RUN npm run build



FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["Backend/my-project.csproj", "Backend/"]
RUN dotnet restore "Backend/my-project.csproj"
COPY Backend Backend
WORKDIR "/src/Backend"
COPY  --from=node /app/dist/app/ /wwwroot/
RUN dotnet build "my-project.csproj" -c Release -o /app/build


FROM build AS publish
RUN dotnet publish "my-project.csproj" -c Release -o /app/publish 

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "my-project.dll"]

The whole process finish without errors, but when I'm trying to access to http://localhost/, I get the html, but there is a javascript error:

Uncaught TypeError: (0 , d.__decorate) is not a function
    at Object.619 (main.3ba20fe70ead0a4b.js:1:45137)
    at r (runtime.834ae414fca175dc.js:1:127)
    at Object.1983 (main.3ba20fe70ead0a4b.js:1:45670)
    at r (runtime.834ae414fca175dc.js:1:127)
    at main.3ba20fe70ead0a4b.js:1:512504
    at n (runtime.834ae414fca175dc.js:1:2649)
    at main.3ba20fe70ead0a4b.js:1:57

But:

1. the result of ng serve work
2. serving with a test server the result of npm build works
3. Copying the result of npm build to wwwroot of my asp.net core works in debug
4. Publishing the asp.net core app(with the wwwroot populated) also works
5. When I try to access to each individual file present in my npm build folder, it seems to be accessible(not sure, because names have this number that is not exactly the same)
6. If I deleted nodes_modules, packages-lock.json and run npm install and npm run build, it also works
7. I deleted the angular app, created another one, run the whole docker build, it works.
8. I tried to change node to the version I'm using on my computer(node 16.14)

Edit I started to remove everything from my app to see when it starts working again. It appears that once I remove my State(s) of NgxsModule.forFeature([]), it works.

So basically, if I've a module with: NgxsModule.forFeature([]) It works, but NgxsModule.forFeature([UiState]) doesn't, even if UiState is almost empty:

@State<UiStateModel>({
  name: 'ui',
  defaults: {
    isMenuOpen: true,
  },
})
@Injectable()
export class UiState {}

I'm kind of desperate, any idea what could cause this error?

Answer 1

I'm not exactly sure what did the trick, but I finally solved it. What I did:

• I had some ngxs packages that were refered as dev dependencies AND dependencies(with different version), I kept only the one in the dependencies
• In my tsconfig.json, I was having a paths specified for "tslib"(to the nodes_modules one). I remember I added it, but I don't remember why, I think at some point I was having a compilation error and I found on SO this solution. I did remove this path for tslib, which is what probably solve the issue.