Angular 9 Project is not working in production environment

user_8202340 0
Viewed 8965

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"
  }
}
angular9 angular
4 Answers

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.

user_86416300

I had the same issue, in my case it occurred after enabling strict mode. I fixed it by removing "sideEffects": false from package.json

user_120728980

I had a similar issue but with a non-hybrid application - a completely new from scratch Angular 10 built application, so I'm documenting it here in case other devs wound up with a similar issue.

As pointed to by @viral-rathod, disabling Ivy also worked around my problem:

In tsconfig.base.json add to angularCompilerOptions the setting "enableIvy": false

So the problem appears to be similar: with Ivy enabled, some components get shaken out of the tree in production builds (but not in dev runs) and as a result, a component completely fails to render, silently and with no errors or generated view.

In my case, the problem was that component A's file had some tiny helper components (not more than 20 lines of code each, including template and style) that were used to render component A's template, and that worked fine. When component B tries to use the same helper components in its template (by just having them used in the template and not mentioned anywhere else) - while it works well in development, it fails in production: component B completely fails to render anything.

Importing the helper components directly into B's file - as a workaround suggested by Viral's answer - didn't do anything.

The solution for me was to move the helper components to their own files and register them in the NgModule after importing them from their own file. No changes are needed in either component A or B (except removing the duplicate lines from A's file).

user_535380

With me, the issue was:

I mistakenly used a slash with path as: /teams

const routes: Routes = [
  {path: "", component: HomeComponent},
  {path: "/teams", component: TeamsComponent}
];

Instead, it simply should have been as: teams

const routes: Routes = [
  {path: "", component: HomeComponent},
  {path: "teams", component: TeamsComponent}
];

Thanks to the browser console.

user_134013070
Related