Angular linker cannot compile umd.min.js

[vasicvuk]

🐞 bug report

Affected Package

@angular/compiler 11.2.10 and 12.0.0-next9

Description

When I try to compile umd.min.js file (from partial build of Library) with Angular linker (Babel plugin) I get following error:

Unsupported syntax, expected a boolean literal.

umd.js file compiles without any problem

🔬 Minimal Reproduction

For compilation I used following script:

const { transformSync } = require('@babel/core');
const fs = require("fs");
const path = require("path");

const args = process.argv.splice(2);
const fileName = args[0];

const { createEs2015LinkerPlugin } = require('@angular/compiler-cli/linker/babel');
function createNgtscLogger(reporter) {
  return {
    level: 1,
    debug(...args) { },
    info(...args) {
      console.log('info', args.join());
    },
    warn(...args) {
      console.log('warning', args.join());
    },
    error(...args) {
      console.log('error', args.join());
    },
  };
}
var plugin = createEs2015LinkerPlugin({
  logger: createNgtscLogger(undefined),
  sourceMapping: false,
  fileSystem: {
    resolve: path.resolve,
    exists: fs.existsSync,
    dirname: path.dirname,
    relative: path.relative,
    readFile: fs.readFileSync,
  },
});


function applyLinker(file, linkerPlugin) {
  if (!file.fileName.endsWith('.js')) {
    return file.source;
  }

  const result = transformSync(file.source, {
    filename: file.fileName,
    plugins: [linkerPlugin],
    compact: false,
    parserOpts: { sourceType: 'unambiguous' },
  });
  if (result === null) {
    console.warn('Babel transform did not have output');
  }
  if (result.code == null) {
    console.warn('Babel transform result does not have any code');
  }
  return result.code;
}

let originalFile = fs.readFileSync(fileName, 'utf-8');
fs.writeFileSync(fileName + '.original', originalFile);

let result = applyLinker({
  fileName: fileName,
  source: originalFile
}, plugin);

fs.writeFileSync(fileName, result);

🔥 Exception or Error

 e.message = `${(_opts$filename = opts.filename) != null ? _opts$filename : "unknown"}: ${e.message}`;
              ^
TypeError: Cannot create property 'message' on string 'sample.umd.min.js: Unsupported syntax, expected a boolean literal.

🌍 Your Environment

Angular Version:

Angular CLI: 11.2.9
Node: 12.16.3
OS: win32 x64

Angular: 11.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.9
@angular-devkit/build-angular   0.1102.9
@angular-devkit/core            11.2.9
@angular-devkit/schematics      11.2.9
@angular/cli                    11.2.9
@angular/material               11.2.9
@schematics/angular             11.2.9
@schematics/update              0.1102.9
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.5

[JoostK]

Can you please share the relevant partial declaration code?

By the way, minfied UMD bundles are being removed in APF v12 and will no longer be generated by ng-packagr.

[vasicvuk]

Since I can't share the code of the library that failed, I will try to create some reproduction library.

I also have some custom webpack minified UMD build that passes Linker but no View instructions are created as output for some reason. Since this UMD also contains other libraries bundled maybe it is because of that.

Regarding APF v12 this is fine, but still it is good to have option to obfuscate code with webpack or something else for non public sources

[vasicvuk]

I cannot create a reproduction library since just adding:

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

@Component({
  selector: 'lib-sample-component',
  template: `
    <p>
      authentication-module works!
    </p>
  `,
  styles: []
})
export class SampleUiComponent {

  constructor() { }
}

this component make UMD.min.js file to fail. On the other hand I don't think that it has something to do with the component itself since when I add same component to some other library project it passes. I also have another component for test which is more complex and when I remove some inheritance from component it starts working but I don't see a clear reason why it fails sometimes.

UPDATE:

It works regulary if I do unminify with Babel before aplying plugin

UPDATE 2

Reason why webpack compiled UMD is not working is because it uses Index notation instead of dot notation and this is somehow ignored by linker:
For example

o["ɵɵngDeclareComponent"]

is not processed but o.ɵɵngDeclareComponent is processed

[vasicvuk]

I managed to get a simular error with reference to code:

TypeError: Cannot create property 'message' on string 'sample.js: Unsupported syntax, expected a boolean literal.
  35279 |       viewQueries: [{
  35280 |         propertyName: "fileInput",
> 35281 |         first: **!0**,

!0 is the part that makes an issue

[JoostK]

Ah, that's what I was expecting! We should be able to support that, but I'm wondering if there's more things that can happen.

[vasicvuk]

This is what I get from regular Angular lib. It optimizes false to !1 and true to !0. And because of that link fails.

I can confirm that changing this with regex before makes linker working.

WORKAROUND:

  const regex = /o\["ɵɵ(.*?)"]/gm;
  file.source = file.source.replace(regex, function (a, b) {
    return 'o.ɵɵ' + b;
  })
  file.source = file.source.replace(/\!0/gm, 'true');
  file.source = file.source.replace(/\!1/gm, 'false');

In general I tested few libraries with build such as angular-l10n and ng-bootstrap but didn't have the issue with boolean properties. I am not sure if there is some tsconfig or other parameter to dismiss such optimization