Angular-cli: Build fails after upgrading from 8.3.8 to 8.3.9

[mark-akturatech]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes. Was working in 8.3.8.

Description

G'day awesome people.

AOT compilation no longer works after upgrading from @angular/cli 8.3.8 to 8.3.9 and @angular-devkit/build-angular from 0.803.8 to 0.803.9.

Compilation begins working again after downgrading CLI and build versions.

🔥 Exception or Error

I receive the following error at the end of compilation:

Generating ES5 bundles for differential loading...
An unhandled exception occurred: Unexpected token punc «,», expected punc «{»
See "/tmp/ng-W1OkyD/angular-errors.log" for further details.

The error log is as follows:

[error] SyntaxError: Unexpected token punc «,», expected punc «{»
    at j (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:18809)
    at c (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:27526)
    at l (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:27616)
    at p (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:27756)
    at _ (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:27868)
    at Y (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:43237)
    at U (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:41674)
    at Ae (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:47228)
    at /home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:48107
    at Ue (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:48122)
    at mt (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:49376)
    at Mt (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:49608)
    at De (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:46719)
    at me (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:46464)
    at U (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:41772)
    at Ae (/home/mark/Development/contentsnare/contentsnare-client/node_modules/terser/dist/bundle.min.js:1:47228)

🌍 Your Environment

My build configuration is as follows:

"prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "extractCss": true,
              "aot": true,
              "extractLicenses": true,
              "buildOptimizer": true,
              "namedChunks": false,
              "vendorChunk": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]

The CLI version output is as follows:

Angular CLI: 8.3.9
Node: 12.10.0
OS: linux x64
Angular: 8.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.9
@angular-devkit/build-angular     0.803.9
@angular-devkit/build-optimizer   0.803.9
@angular-devkit/build-webpack     0.803.9
@angular-devkit/core              8.3.9
@angular-devkit/schematics        8.3.9
@angular/cli                      8.3.9
@ngtools/webpack                  8.3.9
@schematics/angular               8.3.9
@schematics/update                0.803.9
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Thank you :)

[alan-agius4]

HI @markbb33, you be able to produce a reproduction? Thanks.

[mark-akturatech]

Hi @alan-agius4. Thanks for your response.

I tried creating a new project and using the same angular.json, tsconfig and package files and it compiles OK.

I'll spend more time today removing 3rd party packages and scripts and see if this helps remove the error, but to be honest my project is large (like 1000's of files and dozens of modules) and without any error information I will be stepping around in the dark.

Do you have any advice on how I would be able to track down the issue to attempt to create a reproduction?

Update: If I set "optimization": false in the angular.json file then it builds without error. So issue seems to be within the optimizer.

[mark-akturatech]

TLDR; having a field named "class" in a class within a module causes the latest version of the compiler to not allow route "data" in any of the routes within that module (which seems completely unrelated) and produces an error during the optimization phase of the build that does not provide any error information to help track down the issue.

OK I spent most of the day on this, but did manage to track down the issue. I included all the steps here in case this helps rectify it.

I started removing branches of my module tree and eventually tracked it down to one module causing the issue.

So removing one child module at a time form the problematic module, I noticed that it wasn't actually one module causing the issue, but instead the issue seemed to be on multiple modules.

I noticed all the modules that were failing all had a data property on the route. Removing this made the compilation work.

This causes the compilation error...

export const REQUESTS_ROUTES: Routes = [
  {
    path: '',
    component: RequestsComponent,
    children: [
        {
            path: 'name',
            component: EditRequestInfoComponent,
            canDeactivate: [CanDeactivateGuard],
            data: { wizardStep: RequestWizardStep.name } // <=== remove this and it works
        }
    ]
  }
];

// and in module....

imports: [
    RouterModule.forChild(EDIT_REQUEST_ROUTES),
    ...
],

Strangely I have lots of other paths with data and these work. It is just in this situation that it fails.

Everything I tried still failed like replacing the data field name or remving the enum and replacing with a string (eg data: { doesThisWork: 'abc' }), removing the canDeactivate line, changing the path name to 'namex', changing the parent path name, adding additional fields in the data line and removing the parent route.

However as soon as I remove the data line, it all works.

I then noticed that if I replace the component with a blank mock component then it works and allows me to have data in the route again. So i remarked out all the code in the component and the build still failed.

So this lead me to think it was something to do with the way I import the component. So my component path is:

...
+ components
| + edit-request
|   + components
|     + edit-request-info
|     + edit-form-builder
|     + ...

With each directory containing an index file. So in the in routes file I load the EditRequestInfoComponent from './compontents' as it has and index file that includes a link to the index file in the sub directories.

If I change from import { EditRequestInfoComponent } from './components'; to import { EditRequestInfoComponent } from './components/edit-request/components/edit-request-info'; the compilation works! This is strange as I use the same method for every other module and they don't cause an issue.

So lots of compiles later I tracked it down to a handful of components within the module that cause the error.

Removing all but the last failing component and commenting all code in the remaining component allows the compilation to work - getting somewhere.

So removing a method at a time and compiling, I got down to the following line of code causing the error:

const extendedSection = new ExtendedRequestSectionModel(this.tab, section);

Now this is a simple class that has a map function in the constructor. The map function calls a helper method and remarking out this line makes the compilation work. So this finally lead me to a very simple class called FieldClass:

import { FieldSubType } from '../../../enums/field-sub-type.enum';
import { RequestFieldModel } from '../../../models/request-field.model';

import { FIELD_CLASSES } from '../constants/field-classes.constant';
import { BaseField } from '../classes/base-field';

export class FieldClass {
  subType: FieldSubType;
  class: typeof BaseField;

  constructor(field?: RequestFieldModel) {
    if (!field || !field.sub_type) {
      return;
    }
    const val = FIELD_CLASSES.find(f => f.subType === field.sub_type);
    if (val) {
      this.subType = val.subType;
      this.class = val.class;
    }
  }
}

and finally, this is the line causing the compiler to fail...

const val = FIELD_CLASSES.find(f => f.subType === field.sub_type);

Now FIELD_CLASS looks like this...

export const FIELD_CLASSES: Array<FieldClass> = [
  { subType: FieldSubType.singleLineText, class: SingleLineTextField },
  { subType: FieldSubType.multiLineText, class: MultiLineTextField },
  { subType: FieldSubType.formattedText, class: FormattedTextField },
  ...

I'm suspecting the word class is not liked in the new compiler. So i changed class to fieldClass and BAM it works!!

So in summary, a field named class now causes the compiler to break in strange places during the optimizing code phase of the compilation.

(TBH, it was not very smart of me to call the field "class" in the first place, but it did work until now)

[alan-agius4]

Thanks @markbb33 for all the information you provided.

[mark-akturatech]

Any time. Thanks for such a great framework.

[rochapablo]

I'm getting

An unhandled exception occurred: Unexpected token: punc ())

If I run ng lint

Linting "my-app"...
All files pass linting.

[cah-dgreif]

I'm getting the same error as @rochapablo. I narrowed it down to upgrading @angular-devkit/build-angular with the error showing up in 0.803.9 but not in 0.803.8. It looks like some people are able to find the syntax error by changing build parameters (See this Stack Overflow post), but my error doesn't change with source maps on and build optimization off. Our project is large, so going file by file to find the issue isn't a great option. For now I'm just locking in version 0.803.8

[lppedd]

After having spent hours (which is never nice) trying to understand, I'm much like @cah-dgreif. I really can't get past 0.803.8.
And to be really honest, I was already locked to that version for other issues I don't even remember, and I wanted to try to upgrade again, but nevermind.

Update: upgrading to 9-rc seems to solve the issue. But anyway, not everyone can do this.

[dgp1130]

This should be solved in 8.3.22, can you try upgrading to that version and reproduce? That way users don't need to update to 9.

[angular-automatic-lock-bot[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._}