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. Read more here You
    need to manually edit the project file * .csproj, removing the following code
    Code to remove from * .csproj
      <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
        <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
        <!-- Include the newly-built files in the publish output -->
          <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
          <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
          <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">

    Correct dockerfile
    ARG NODE_IMAGE=node:8.12FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
    WORKDIR /app
    EXPOSE 80FROM microsoft/dotnet:2.1-sdk AS build
    WORKDIR /src
    COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
    RUN dotnet restore "AngularWebApp/AngularWebApp.csproj"
    COPY . .
    WORKDIR "/src/AngularWebApp"
    FROM ${NODE_IMAGE} as node-build
    WORKDIR /src
    COPY AngularWebApp/ClientApp .
    RUN npm install
    RUN npm run build -- --prodFROM build AS publish
    RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app
    FROM base AS final
    WORKDIR /app
    COPY--from=publish /app .COPY--from=node-build /src/dist ./ClientApp/dist
    ENTRYPOINT ["dotnet", "AngularWebApp.dll"]


    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 ASP .NET Core.

    If we include standard support for the docker for the project with the Angular application, then the docker file will create an image of the microsoft / dotnet based application: 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 a 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-getinstall -y wget && \
        apt-getinstall -y gnupg2 && \
        wget -qO- | bash - && \
        apt-getinstall -y build-essential nodejs
    RUN npm install @angular/cli -g
    # End setup
    WORKDIR /app
    EXPOSE 80FROM microsoft/dotnet:2.1-sdk ASbuild
    WORKDIR /src
    COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
    RUN dotnetrestore"AngularWebApp/AngularWebApp.csproj"
    COPY . .
    WORKDIR "/src/AngularWebApp"
    RUN dotnetbuild"AngularWebApp.csproj" -c Release -o /app
    FROMbuildAS publish
    RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app
    FROM base ASfinal
    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 different case of characters, but Linux does not forgive this. And the project that worked during development will refuse to compile in the container, yielding an error

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

    In order to avoid such errors at compile time, 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

    Also popular now: