Production build breaks in rc.11 & 12

[tonivj5]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: rc.10

Description

Production build breaks in rc11 and 12, if I disable optimization in angular-cli.json it goes away. It builds in rc10.

🔬 Minimal Reproduction

I have tried to reproduce it using ng new but the build doesn't emit the same metadata (design:type)

🔥 Exception or Error

main-es2015.429909d094036241356a.js:6 Uncaught ReferenceError: Observable is not defined
    at main-es2015.429909d094036241356a.js:6
    at Object.6djU (main-es2015.429909d094036241356a.js:6)
    at i (runtime-es2015.4f2dc2db4ea44dd7357a.js:1)
    at Module.zUnb (main-es2015.429909d094036241356a.js:10)
    at i (runtime-es2015.4f2dc2db4ea44dd7357a.js:1)
    at Object.0 (main-es2015.429909d094036241356a.js:6)
    at i (runtime-es2015.4f2dc2db4ea44dd7357a.js:1)
    at t (runtime-es2015.4f2dc2db4ea44dd7357a.js:1)
    at Array.r [as push] (runtime-es2015.4f2dc2db4ea44dd7357a.js:1)
    at main-es2015.429909d094036241356a.js:1

If I disable optimization it works, and Observable is imported from webpack imports instead of as a global variable.

🌍 Your Environment

Angular CLI: 9.0.0-rc.12
Node: 13.7.0
OS: linux x64

Angular: 9.0.0-rc.11
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.12
@angular-devkit/build-angular     0.900.0-rc.12
@angular-devkit/build-optimizer   0.900.0-rc.12
@angular-devkit/build-webpack     0.900.0-rc.12
@angular-devkit/core              8.3.24
@angular-devkit/schematics        8.3.24
@angular/cdk                      8.2.3
@angular/cli                      9.0.0-rc.12
@angular/language-service         9.0.0-rc.12
@ngtools/webpack                  9.0.0-rc.12
@schematics/angular               9.0.0-rc.12
@schematics/update                0.900.0-rc.12
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2
    
Done in 0.44s.

Anything else relevant?

[mallen]

Same issue here - works with optimization disabled

[alan-agius4]

Hi, we’d need some more details to determine from where the regression came;

1. Can you update Angular FW and CLI/Build-Angular individually and confirm which update causes the issue?

2. Can you kindly share the one of the classes that is causing the error?

[mallen]

Hi,

Updating individually gives the following results

• Angular FW rc.10 and CLI/Build-Angular rc.10 works
• Angular FW rc.11 and CLI/Build-Angular rc.10 works
• Angular FW rc.11 and CLI/Build-Angular rc.11 fails

or with --source-map

Possibly @Select from ngxs is causing the issue

Class is

import { Component, Input, OnInit } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { AppState } from '../app.state';
import { Observable, throwError } from 'rxjs';
import { MenuItem, ParentMenuItem, PlanMenuItem, StandardMenuItem } from '../menu/menu-item';
import { RemovePlanMenuItem } from '../menu/menu.actions';
import { catchError, debounceTime, first, take } from 'rxjs/operators';
import { ContextState } from '../shared/services/context.state';
import { User } from '../shared/user';
import { ContextService } from '../shared/services/context.service';
import { BackgroundType, SettingsService } from '../settings/settings.service';
import { environment } from '../../environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Meta } from '@angular/platform-browser';

@Component({
               selector: 'app-navigation',
               templateUrl: './navigation.component.html',
               styleUrls: ['./navigation.component.scss']
           })
export class NavigationComponent implements OnInit {
    @Select(AppState.standardMenuItems) standardMenuItems$: Observable<StandardMenuItem[]>;
    @Select(AppState.parentMenuItems) parentMenuItems$: Observable<ParentMenuItem[]>;
    @Select(AppState.planMenuItems) planMenuItems$: Observable<PlanMenuItem[]>;
    user: User;
    logoSource = 'assets/images/logo_dark.svg';
    @Input() title: string;
    logoutDisabled = false;
    showThemeMenu = false;
    private logoutUrl: string;

    constructor(private store: Store,
                public context: ContextService,
                private settingsService: SettingsService,
                private http: HttpClient,
                private meta: Meta) {
    }

    ngOnInit() {
        this.settingsService.backgroundType$
            .subscribe((bt: BackgroundType) => {
                this.logoSource = bt === 'dark' ? 'assets/images/logo_dark.svg' : 'assets/images/logo_light.svg';
            });

        this.store.select(ContextState.user)
            .pipe(first(user => !!user))
            .subscribe((user => {
                    this.user = user;
                    this.settingsService.setTheme(user, this.settingsService.getThemeFromLocalStorage(user));
            }));

        this.logoutUrl = this.meta.getTag('name=_casLogoutUrl').content;

        if (Storage) {
            this.showThemeMenu = true;
        }
    }

    close(item: MenuItem) {
        if (item instanceof PlanMenuItem) {
            return this.store.dispatch(new RemovePlanMenuItem(item.id));
        }
    }

    logOutClick() {
    }
}

[lVlyke]

Hi,

I'm seeing the same issue on my end with @angular-devkit/build-angular rc.11 and rc.12. I maintain the @lithiumjs/angular library, which is decorator-based like NGXS. I maintain an example app for the library that also makes use of NGXS. I'm seeing the same behavior when running ng serve --prod with @angular-devkit/build-angular rc.12:

The issue appears to happen with @Select from NGXS, and decorators like @StateEmitter and @EventSource from Lithium. As mentioned, setting optimization: false fixes the problem, but is not ideal of course. After enabling sourcemaps, I can see the error happens in my SessionUtils service on the following line:

Branch 4.0.0 of my example app project, which uses @angular-devkit/build-angular rc.10, works fine with ng serve --prod. I created another branch which simply updates the devkit version to rc.12, and that causes the above build issue with ng serve --prod.

Hopefully this helps. Thanks.

[clydin]

It appears that the common element is that all the projects have the emitDecoratorMetadata TypeScript option enabled. This option has not been required by Angular since version 8.0.4 and newly created projects no longer contain the option. Unless a third-party library or the application code specifically require the presence of the option, it can be safely removed. The need for this option is generally uncommon. Also of note is that the option generates code (more details) that has the potential to cause runtime errors with certain source code constructs.
However, for the cases where the option is required, a fix is currently being investigated.

[lVlyke]

@clydin Interesting, thanks for the info. Removing the use of ES7 reflection and emitDecoratorMetadata from the project does indeed resolve the issue with rc.12.

[Timebutt]

Wow thanks guys, removing emitDecoratorMetadata = true from my tsconfig.json fixed the issue for me too! I was looking everywhere to try and fix the broken build until finding this issue 🙌. I can only imagine plenty of other people will also face this cryptic issue, so the v9-blockers milestone is definitely warranted 💪

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