No index.html in production build

[Nedvid]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

In my SSR app after Angular upgrade from 7.2 to 8.2.5, index.html is not generated in ./dist/browser. I am running build with ng build -c production command. It's very weird that in dev mode (ng serve) everything is working fine.

🔬 Minimal Reproduction

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "app",
  "projects": {
    "app": {
      "root": "",
      "projectType": "application",
      "sourceRoot": "src",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "udk:udk-builder",
          "options": {
            "browserTarget": "app:browser",
            "serverTarget": "app:server"            
          },
          "configurations": {
            "production": {
              "browserTarget": "app:browser:production",
              "serverTarget": "app:server:production",
              "verbose": true
            }            
          }
        },
        "browser": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [
              "src/styles/critical-styles.scss",
              {
                "input": "src/styles/styles.scss",
                "bundleName": "main-styles",
                "lazy": true
              },
              {
                "input": "src/styles/font-styles.scss",
                "bundleName": "font-styles",
                "lazy": true
              }
            ],
            "scripts": []            
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "index": "src/index.html",
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                }
              ]
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "src/server.ts",
            "tsConfig": "tsconfig.server.json",
            "sourceMap": {
              "scripts": true,
              "styles": false
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            }            
          }
        },
        "serve": {
          "builder": "udk:udk-runner",
          "options": {},
          "configurations": {}
        },        
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [
              {
                "input": "src/styles/styles.scss"
              },
              {
                "input": "src/styles/font-styles.scss"
              }
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }        
      }
    }
  }
}

package.json

{
  "name": "angular-universal",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "prestart": "npm run build:prod",
    "start": "node ./dist/app/server/main.js",
    "build": "ng build",
    "build:prod": "ng build -c production",
    "dev": "ng serve",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.5",
    "@angular/cdk": "^8.2.0",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/forms": "~8.2.5",
    "@angular/material": "^8.2.0",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/platform-server": "~8.2.5",
    "@angular/router": "~8.2.5",
    "@angularclass/hmr": "~2.1.3",
    "@nguniversal/express-engine": "~8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/browser": "^4.5.3",
    "@types/googlemaps": "^3.30.16",
    "@w11k/angular-sticky-things": "^1.1.0",
    "adblock-detect": "^1.0.5",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "connect-redis": "^3.4.0",
    "core-js": "^2.5.7",
    "express": "^4.16.4",
    "express-session": "^1.15.6",
    "express-winston": "^3.0.1",
    "hammerjs": "^2.0.8",
    "i18n-iso-countries": "^3.7.8",
    "influx": "^5.0.7",
    "ionicons": "^4.5.1",
    "material-icons": "^0.2.3",
    "ngx-device-detector": "^1.3.6",
    "ngx-lazy-load-images": "^1.3.1",
    "raven": "^2.6.4",
    "request": "^2.88.0",
    "rxjs": "~6.5.3",
    "web-animations-js": "^2.3.2",
    "winston": "^3.1.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.3",
    "@angular/cli": "~8.3.3",
    "@angular/compiler-cli": "~8.2.5",
    "@angular/language-service": "~8.2.5",
    "@types/jasmine": "~2.8.11",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~10.12.3",
    "@types/webpack-env": "~1.13.6",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.4",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3",
    "udk": "^1.0.0"
  }
}

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.4
Node: 10.16.3
OS: darwin x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.4
@angular-devkit/build-angular              0.803.4
@angular-devkit/build-optimizer            0.803.4
@angular-devkit/build-webpack              0.803.4
@angular-devkit/core                       8.3.4
@angular-devkit/schematics                 8.3.4
@angular/cdk                               8.2.0
@angular/cli                               8.3.4
@angular/material                          8.2.0
@ngtools/webpack                           8.3.4
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.4
@schematics/update                         0.803.4
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2
   

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[Nedvid]

@alan-agius4 https://github.com/Nedvid/rep-app

[alan-agius4]

Hi @Nedvid, I just had a look at your reproduction and it seems that you are using a non official builder for your build udk:udk-builder.

Please contact the author(s) of the udk project or file an issue on their issue tracker.

[Nedvid]

@alan-agius4 thanks for the review. What's the official builder for Angular 8 Universal? Could you please provide some config example for angular app which use Angular 8 and SSR?

[qubiack]

@Nedvid did you solve a problem? We have exactly the same after update to Angular 8.

[Nedvid]

@qubiack Yes, it was udk:udk-builder issue so instead of this I am using official builder for that: @angular-devkit/build-angular:browser

I added in angular.json seperate configs for browser and server:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "app",
  "projects": {
    "app": {      
      "architect": {        
        ...
        "browser": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "src/server.ts",
            "tsConfig": "tsconfig.server.json",
            "sourceMap": {
              "scripts": true,
              "styles": false
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            },
            "spa": {
              "fileReplacements": [
                {
                  "replace": "src/app/app-routes.ts",
                  "with": "src/app/app-routes.spa.ts"
                }
              ]
            }
          }
        }  
        ...    
    }
  }
}

Then to create production build faster you can install npm-run-all and add in package.json:

  "scripts": {
    ...
    "start": "node ./dist/app/server/main.js",
    "build:browser": "ng run app:browser -c production",
    "build:server": "ng run app:server -c production",
    "build:prod": "npm-run-all build:browser build:server",
    ...
  },

npm run build:prod should build browser and server correctly in ./dist

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}