Angular production release does not create my-app folder in dist – Azure DevOps

Issue

When running ng build --prod --aot locally, it creates a my-app folder perfectly fine within the dist/ folder. Inside I have the expected mian,polyfills and runtime js files (with a hash value).

When running it in Azure DevOps (VSTS) it does not, only a out-tsc folder is created.

My angular.json

  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "./ClientApp",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "./ClientApp/index.html",
            "main": "./ClientApp/main.ts",
            "polyfills": "./ClientApp/polyfills.ts",
            "tsConfig": "./ClientApp/tsconfig.app.json",
            "assets": [
              "./ClientApp/favicon.ico",
              "./ClientApp/assets"
            ],
            "styles": [
              "./ClientApp/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "./ClientApp/environments/environment.ts",
                  "with": "./ClientApp/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },

Running it locally:

PS C:\Users\USER\Source\Repos\MyProject\MyProject.MVC> npm run buildconfigprod --verbose
npm info it worked if it ends with ok
npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Users\\USER\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'run',
npm verb cli   'buildconfigprod',
npm verb cli   '--verbose' ]
npm info using npm@6.4.0
npm info using node@v8.9.4
npm verb run-script [ 'prebuildconfigprod',
npm verb run-script   'buildconfigprod',
npm verb run-script   'postbuildconfigprod' ]
npm info lifecycle my-app@0.0.0~prebuildconfigprod: my-app@0.0.0
npm info lifecycle my-app@0.0.0~buildconfigprod: my-app@0.0.0

> my-app@0.0.0 buildconfigprod C:\Users\USER\Source\Repos\MyProject\MyProject.MVC
> ng build my-app --configuration production

Your global Angular CLI version (6.2.1) is greater than your local
version (6.1.5). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Date: 2018-10-16T12:45:26.931Z
Hash: fdf36103c4e08ff1c324
Time: 21386ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a474c4b2064489e33e1b.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.001789666250e4564d51.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.aecca14d2a03e91e82ca.js (main) 660 kB [initial] [rendered]
npm verb lifecycle my-app@0.0.0~buildconfigprod: unsafe-perm in lifecycle true
npm verb lifecycle my-app@0.0.0~buildconfigprod: PATH: C:\Users\USER\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\USER\Source\Repos\MyProject\MyProject.MVC\node_modules\.bin;C:\Windows\System32;C:\Windows;C:\Windows\System32\wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\GnuPG\bin;C:\Program Files\SafeNet\Authentication\SAC\x64;C:\Program Files\SafeNet\Authentication\SAC\x32;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files\Git\cmd;C:\Users\USER\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Users\USER\AppData\Roaming\npm;C:\Users\USER\.dotnet\tools
npm verb lifecycle my-app@0.0.0~buildconfigprod: CWD: C:\Users\USER\Source\Repos\MyProject\MyProject.MVC
npm info lifecycle my-app@0.0.0~postbuildconfigprod: my-app@0.0.0
npm verb exit [ 0, true ]
npm timing npm Completed in 26723ms
npm info ok

Build config:

step 1 npm install:

step1

step 2 npm run release:

enter image description here

where release has the following script command within package.json:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "release": "ng build --prod --aot",
    "buildconfigprod": "ng build my-app --configuration production",
    "runprod": "ng run my-app:build:production",
    "e2e": "ng e2e"
  },

So I have also tried different ways of running it, but no result so far.

Log file of Azure DevOps:

2018-10-16T12:43:06.5605572Z ##[section]Starting: npm build angular app MVC
2018-10-16T12:43:06.5611048Z ==============================================================================
2018-10-16T12:43:06.5611217Z Task         : npm
2018-10-16T12:43:06.5611638Z Description  : Install and publish npm packages, or run an npm command. Supports npmjs.com and authenticated registries like Package Management.
2018-10-16T12:43:06.5611811Z Version      : 1.0.24
2018-10-16T12:43:06.5611948Z Author       : Microsoft Corporation
2018-10-16T12:43:06.5612115Z Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613746)
2018-10-16T12:43:06.5612281Z ==============================================================================
2018-10-16T12:43:07.1829249Z SYSTEMVSSCONNECTION exists true
2018-10-16T12:43:07.4015731Z SYSTEMVSSCONNECTION exists true
2018-10-16T12:43:07.4892005Z [command]C:\Windows\system32\cmd.exe /D /S /C "C:\npm\prefix\npm.cmd --version"
2018-10-16T12:43:07.8349637Z 6.4.0
2018-10-16T12:43:08.6554123Z [command]C:\Windows\system32\cmd.exe /D /S /C "C:\npm\prefix\npm.cmd config list"
2018-10-16T12:43:09.0251326Z ; cli configs
2018-10-16T12:43:09.0251779Z metrics-registry = "https://registry.npmjs.org/"
2018-10-16T12:43:09.0251984Z scope = ""
2018-10-16T12:43:09.0252178Z user-agent = "npm/6.4.0 node/v8.12.0 win32 x64"
2018-10-16T12:43:09.0252301Z 
2018-10-16T12:43:09.0252479Z ; environment configs
2018-10-16T12:43:09.0252659Z cache = "C:\\npm\\cache"
2018-10-16T12:43:09.0252830Z loglevel = "verbose"
2018-10-16T12:43:09.0253434Z prefix = "C:\\npm\\prefix"
2018-10-16T12:43:09.0254273Z userconfig = "D:\\a\\1\\npm\\619.npmrc"
2018-10-16T12:43:09.0254488Z 
2018-10-16T12:43:09.0254712Z ; builtin config undefined
2018-10-16T12:43:09.0254864Z 
2018-10-16T12:43:09.0255099Z ; node bin location = C:\Program Files\nodejs\node.exe
2018-10-16T12:43:09.0255339Z ; cwd = D:\a\1\s\MyProject.MVC
2018-10-16T12:43:09.0255574Z ; HOME = C:\Users\VssAdministrator
2018-10-16T12:43:09.0255809Z ; "npm config ls -l" to show all defaults.
2018-10-16T12:43:09.0256006Z 
2018-10-16T12:43:09.0257369Z [command]C:\Windows\system32\cmd.exe /D /S /C "C:\npm\prefix\npm.cmd run release"
2018-10-16T12:43:09.0258780Z npm info it worked if it ends with ok
2018-10-16T12:43:09.0259425Z npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
2018-10-16T12:43:09.0259656Z npm verb cli   'C:\\npm\\prefix\\node_modules\\npm\\bin\\npm-cli.js',
2018-10-16T12:43:09.0259847Z npm verb cli   'config',
2018-10-16T12:43:09.0260037Z npm verb cli   'list' ]
2018-10-16T12:43:09.0260233Z npm info using npm@6.4.0
2018-10-16T12:43:09.0260415Z npm info using node@v8.12.0
2018-10-16T12:43:09.0260598Z npm verb exit [ 0, true ]
2018-10-16T12:43:09.0260766Z npm timing npm Completed in 58ms
2018-10-16T12:43:09.0260944Z npm info ok 
2018-10-16T12:44:12.2488227Z npm info it worked if it ends with ok
2018-10-16T12:44:12.2488475Z 
2018-10-16T12:44:12.2489256Z > my-app@0.0.0 release D:\a\1\s\MyProject.MVC
2018-10-16T12:44:12.2489977Z npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
2018-10-16T12:44:12.2490873Z npm verb cli   'C:\\npm\\prefix\\node_modules\\npm\\bin\\npm-cli.js',
2018-10-16T12:44:12.2491258Z npm verb cli   'run',
2018-10-16T12:44:12.2491522Z npm verb cli   'release' ]
2018-10-16T12:44:12.2491785Z npm info using npm@6.4.0
2018-10-16T12:44:12.2492045Z npm info using node@v8.12.0
2018-10-16T12:44:12.2492318Z npm verb run-script [ 'prerelease', 'release', 'postrelease' ]
2018-10-16T12:44:12.2492601Z npm info lifecycle my-app@0.0.0~prerelease: my-app@0.0.0
2018-10-16T12:44:12.2492905Z npm info lifecycle my-app@0.0.0~release: my-app@0.0.0
2018-10-16T12:44:12.2493192Z npm verb lifecycle my-app@0.0.0~release: unsafe-perm in lifecycle true
2018-10-16T12:44:12.2494714Z npm verb lifecycle my-app@0.0.0~release: PATH: C:\npm\prefix\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\a\1\s\MyProject.MVC\node_modules\.bin;C:\hostedtoolcache\windows\NuGet\4.5.0\x64;C:\agents\2.140.2\externals\git\cmd;C:\tools\mingw64\bin;C:\Program Files\dotnet;C:\mysql-5.7.21-winx64\bin;C:\Program Files\Java\jdk1.8.0_181\bin;C:\npm\prefix;C:\hostedtoolcache\windows\Ruby\2.5.0\x64\bin;C:\Go1.11\bin;C:\Program Files\Git\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files (x86)\Microsoft SDKs\Azure\CLI2\wbin;C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\Scripts;C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64;C:\Program Files\Microsoft MPI\Bin\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\ProgramData\Chocolatey\bin;C:\Program Files\Docker;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files\Microsoft Service Fabric\bin\Fabric\Fabric.Code;C:\Program Files\Microsoft SDKs\Service Fabric\Tools\ServiceFabricLocalClusterManager;C:\Program Files\Git\cmd;C:\Program Files (x86)\Subversion\bin;C:\Program Files\nodejs\;C:\Program Files\CMake\bin;C:\Users\VssAdministrator\AppData\Local\Microsoft\WindowsApps
2018-10-16T12:44:12.2497292Z npm verb lifecycle my-app@0.0.0~release: CWD: D:\a\1\s\MyProject.MVC
2018-10-16T12:44:12.2497608Z npm info lifecycle my-app@0.0.0~postrelease: my-app@0.0.0
2018-10-16T12:44:12.2497897Z npm verb exit [ 0, true ]
2018-10-16T12:44:12.2498803Z npm timing npm Completed in 62897ms
2018-10-16T12:44:12.2499072Z npm info ok 
2018-10-16T12:44:12.2499965Z > ng build --prod --aot
2018-10-16T12:44:12.2500240Z 
2018-10-16T12:44:12.2500383Z 
2018-10-16T12:44:12.2500635Z Date: 2018-10-16T12:44:12.131Z
2018-10-16T12:44:12.2500900Z Hash: fdf36103c4e08ff1c324
2018-10-16T12:44:12.2501151Z Time: 58602ms
2018-10-16T12:44:12.2501432Z chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
2018-10-16T12:44:12.2501739Z chunk {1} styles.a474c4b2064489e33e1b.css (styles) 0 bytes [initial] [rendered]
2018-10-16T12:44:12.2502068Z chunk {2} polyfills.001789666250e4564d51.js (polyfills) 59.6 kB [initial] [rendered]
2018-10-16T12:44:12.2502378Z chunk {3} main.aecca14d2a03e91e82ca.js (main) 660 kB [initial] [rendered]
2018-10-16T12:44:12.2630774Z ##[section]Finishing: npm build angular app MVC

Output artifacts as said only contains a dist/out-tsc folder and no dist/my-app folder.

The angular project is within an ASP.NET MVC 4.5 application, which is build after this is executed.

Also tried to install version 6.4.0 of NPM within the build definitions.

What am I doing wrong and wasting my day on?

EDIT:

I have this sequence:

enter image description here

I have diagnosed so far that the zip file does contain the valid files I am looking for! Hooray… So when the solution is build, it clears the dist/ file and then generates the out-tsc folder. That is not convenient. How can I keep these files in there? What is causing the .net build to clear the dist folder and generate the out-tsc files?

So I now need to find a way to keep the files in the dist folder during build. Doing it the other way around won’t work because during the MVC Build I also turn it into a deploy package.

Solution

I eventually solved this by changing the setting below, the default setting is “Only files needed to run this application”. So it will remove node_modules and dist/my-app.

Package settings

This will make sure that all files in the project folder will be pushed to the publish folder. It does has some drawbacks so I rather see another solution that will make sure that the node_modules folder and the dist/my-app folder are part of the application and needed to run the application.

Answered By – CularBytes

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.