Containerizing Angular 6 SPA Template ASP .NET Core 2.1 Applications

UPDATE from 11/01/2018 {
Thanks to the help in the comments, below is a more ideologically correct version of the docker file.

The standard Angular SPA Template project template contains an error. Developers in the version of net .core 2.1. removed from the microsoft / dotnet: 2.1-sdk image used to build the nodejs, but the code in the project file uses it. Learn more here github.com/aspnet/Announcements/issues/298
You must manually edit the project file * .csproj, removing the following code


}

Unfortunately I did not find a ready solution anywhere. I had to compile information from several sources. To run the Angular 6/7 application in the docker as a project on an ASP .NET Core.
')
If we include standard support for the docker for a project with the Angular application, then the docker file will create an image of the application based on the microsoft / dotnet: 2.1-aspnetcore-runtime image. This base image does not include the node.js server. And the ASP .NET Core error will be output in the execution results.

 An unhandled exception occurred while processing the request. The NPM script 'start' exited without indicating that the Angular CLI was listening for requests 

To resolve this error, you need to update the Docker file by adding the node.js and angular installation.
In addition, since the development goes under Windows, and it all runs in the Ubunty-based Docker container, if scss or sass style files are used, they are compiled by Angular CLI using node-sass, and at startup produced an error “Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime ”. You must run the command:

 npm rebuild node-sass 

npm will download the necessary scripts for the current platform and rebuild the css files.

The resulting Docker file for the Angular application based on the ASP .NET Core 2.1 project is as follows

 FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base # Setup NodeJs RUN apt-get update && \ apt-get install -y wget && \ apt-get install -y gnupg2 && \ wget -qO- https://deb.nodesource.com/setup_8.x | bash - && \ apt-get install -y build-essential nodejs RUN npm install @angular/cli -g # End setup WORKDIR /app EXPOSE 80 FROM microsoft/dotnet:2.1-sdk AS build WORKDIR /src COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"] RUN dotnet restore "AngularWebApp/AngularWebApp.csproj" COPY . . WORKDIR "/src/AngularWebApp" RUN dotnet build "AngularWebApp.csproj" -c Release -o /app FROM build AS publish RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app FROM base AS final WORKDIR /app COPY --from=publish /app . WORKDIR /app/ClientApp RUN npm install RUN npm rebuild node-sass WORKDIR /app ENTRYPOINT ["dotnet", "AngularWebApp.dll"] 

I used the stable LTS release of Node.js, at the moment 8.x, but can be changed to any more relevant.

In addition, I also note that Windows forgives errors associated with various case of characters, but Linux does not forgive this. And the project that worked during development will refuse to compile in the container, giving an error

 docker ERROR in error TS1149: File name 'filename.ts' differs from already included file name 'FileNames.ts' only in casing 

In order to avoid such errors at the compilation stage, I recommend adding the appropriate option “forceConsistentCasingInFileNames”: true to the tsconfig.json file in the compilerOptions section

 { "compilerOptions": { "forceConsistentCasingInFileNames": true } } } 

angular, angular6 / 7, asp .net core 2.1, docker