Backendless SDK + Angular results in compile error!

[Steven_Salmon]

Hi Backendless team. I have uncovered a major compile issue when trying to build an angular 6 application with the --prod attribute? When this switch is added to the following command line:

ng build --prod

It results in the following fatal error:

ERROR in ./node_modules/backendless/dist/backendless.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
Error: Debug Failure. False expression.
at getJSDocTags (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:13197:22)
at getFirstJSDocTag (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:13205:24)
at Object.getJSDocType (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:13173:19)
at getContextualSignature (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:41002:32)
at checkFunctionExpressionOrObjectLiteralMethod (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:44621:43)
at checkExpressionWorker (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45681:28)
at checkExpression (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45609:42)
at checkBinaryLikeExpression (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45155:29)
at checkBinaryExpression (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45147:20)
at checkExpressionWorker (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45702:28)
at checkExpression (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45609:42)
at checkExpressionCached (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45457:38)
at getTypeOfExpression (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45577:28)
at checkDeclarationInitializer (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:45469:24)
at getTypeForVariableLikeDeclaration (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:30738:28)
at getWidenedTypeForVariableLikeDeclaration (C:\Users\ssalmon\Work\testing\backendless-test\node_modules\typescript\lib\typescript.js:30961:24)

Now this is a real problem trying to compile your application for production. It can easily be recreated by performing the following once you have installed the angular compiler:

ng new backendless-test
cd backendless-test
npm install backendless
modify src/app/app.component.ts to the following:

– app.component.ts start –

import { Component } from '@angular/core';
import Backendless from 'backendless';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'backendless-test';

  constructor() {
    Backendless.initApp('', '');
  }
}

– app.component.ts end –

ng build --prod

Please could the backendless team advise how this can be solved? This is using the latest version of the SDK.

Many thanks

Steven

[vladimir-upirov]

Hi Steven
Thanks for shared it with us, we will investigate the problem

[Steven_Salmon]

Thank you @vladimir-upirov. Appreciate you taking the time. Look forward to your investigation.

[vladimir-upirov]

Hi Steven

All our JS modules have “dist” and “lib” folders

• “dist” contains an assembled file for running in the Browser env
• “lib” contains all the library files for running in NodeJS env (loads dependencies in runtime)

So, for building your app you should use “lib” as entry point to avoid any duplicates in the app bundle.

I’m not an expert with Angular and their build system/flow,
but looks like Angular uses files from “dist” directory and then tries to optimize it (only for prod) and as result we have the error.

I think the issue must be fixed somewhere in AngluarDevKit module, but as workaround I can propose you this way:

modify your tsconfig.json file

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "backendless": [
        "./node_modules/backendless/lib/index.js"
      ],
      "backendless-rt-client": [
        "./node_modules/backendless-rt-client/lib/index.js"
      ],
      "backendless-request": [
        "./node_modules/backendless-request/dist/backendless-request.js"
      ]
    }
  }
}

[vladimir-upirov]

or set “false” to “buildOptimizer” in angular.json file

[Steven_Salmon]

Hi @vladimir-upirov

This is fantastic and your research has resolved this issue. By adding the paths and keeping buildOptimizer to true resolves the issue. Thank you for your expertise.

Just one further gotcha that others may experience is that I had to make sure that references to my interfaces classes were referenced in single quotes otherwise the Angular compiler uglify’s the names resulting in exceptions during run time. For example in my particular case:

Instead of:

contentStore = Backendless.Data.of(Content);

Use

contentStore = Backendless.Data.of('Content');

This is something you will need to change when following the Backendless Angular example at https://backendless.com/how-to-create-a-web-app-using-angular-and-backendless/

Thanks once again.

Steven