Angular 9 Project is not working in production environment

Question

I have migrated our Angular hybrid project from 8 to 9. The migration went smooth and ng build / ng serve works well like it did before.

The real problem, where I don't know how to start working on it, is after I build the app for production (ng build --prod). The landing page of the project is completely blank, no JS errors, no console warnings. It looks like the AppModule is not loaded? The only change we had to do was related to main.aot.ts file, we removed that file as it's no longer applicable to IVY compiler.

Any relevant experience you might have in the past will help me, thanks a lot!

main.ts looks like this

import {enableProdMode, StaticProvider} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import {downgradeModule} from "@angular/upgrade/static";

if (environment.production) {
  enableProdMode();
}
declare var angular: any;

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AppModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.bootstrap(document.getElementById('app-root'), ['angularJSModule', downgradedModule], { strictDi: true });

main.aot.ts (Removed at Angular9)

import {enableProdMode, StaticProvider} from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import {AppModuleNgFactory} from './app/app.module.ngfactory';
import { environment } from './environments/environment';
import {downgradeModule} from "@angular/upgrade/static";

if (environment.production) {
  enableProdMode();
}
declare var angular: any;

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowser(extraProviders);
  return platformRef.bootstrapModuleFactory(AppModuleNgFactory);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.bootstrap(document.getElementById('app-root'), ['angularJSModule', downgradedModule], { strictDi: true });

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "types": ["angular"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["angular"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

package.json

{
  "name": "myproj",
  "version": "4.5.0",
  "start": "ng serve -aot",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.5",
    "@angular/cdk": "~9.1.1",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~9.0.5",
    "@angular/material": "^9.1.1",
    "@angular/platform-browser": "~9.0.5",
    "@angular/platform-browser-dynamic": "~9.0.5",
    "@angular/router": "~9.0.5",
    "@angular/upgrade": "^9.0.5",
    "@ng-idle/core": "^8.0.0-beta.4",
    "@ng-idle/keepalive": "^8.0.0-beta.4",
    "@uirouter/angular": "^6.0.1",
    "@uirouter/angular-hybrid": "^10.0.1",
    "@uirouter/angularjs": "^1.0.25",
    "@uirouter/core": "^6.0.4",
    "@uirouter/rx": "^0.6.5",
    "angular": "^1.7.9",
    "foundation-sites": "^6.6.1",
    "install": "^0.13.0",
    "ng-block-ui": "^2.1.8",
    "ngx-cookie-service": "^2.4.0",
    "ngx-foundation": "^1.0.8",
    "ngx-pendo": "^1.2.3",
    "ngx-perfect-scrollbar": "^8.0.0",
    "npm": "^6.14.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "upgrade": "^1.1.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.5",
    "@angular/cli": "~9.0.5",
    "@angular/compiler-cli": "~9.0.5",
    "@angular/language-service": "~9.0.5",
    "@types/angular": "^1.6.57",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5"
  }
}

Answer 1

I also had the same issue.

First I tried disabling Ivy in tsconfig.app.json, and its works fine. Which concludes that problem is with Ivy. Thanks to @user2846469

"angularCompilerOptions": {
   "enableIvy": false
}

Github Issue Clearly describes the problem and solutions in later comments

Ivy doesn't include downgraded components into production build If downgraded component is used only in AngularJS templates - it will be shaken off the tree with production build - this manifests itself in component just not being rendered. Silently. No errors, warnings, or whatsoever.

import './downgrade.component';

Either import your component like above or consider registering the downgraded components in the same file as the NgModule.