Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error in ng build --prod that doesn't happen with ng serve --prod #14747

Closed
hugodes opened this issue Jun 12, 2019 · 6 comments · Fixed by #14796
Closed

Error in ng build --prod that doesn't happen with ng serve --prod #14747

hugodes opened this issue Jun 12, 2019 · 6 comments · Fixed by #14796
Assignees
@alan-agius4
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Milestone
8.0.x

Comments

@hugodes
Copy link

hugodes commented Jun 12, 2019 •
edited

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

This problem didn't happen with angular/cli 7.x

Description

When I serve the app via ng serve --prod the app runs fine.

When I serve the files outputted by with a server (apache, nginx) ng build --prod the app fails to load with js error.

🔬 Minimal Reproduction

Here is a bear-bones repo that exposes the bug: https://github.com/hugodes/cli-2015

🔥 Exception or Error

The problem here is that this errors appears with ng build --prod but not with ng serve --prod


main-es2015.4cf9183c1dd8f352bda7.js:1 Uncaught ReferenceError: process is not defined
    at Object.md97 (main-es2015.4cf9183c1dd8f352bda7.js:1)
    at f (runtime-es2015.858f8dd898b75fe86926.js:1)
    at Object.Sp1i (main-es2015.4cf9183c1dd8f352bda7.js:1)
    at f (runtime-es2015.858f8dd898b75fe86926.js:1)
    at Module.zUnb (main-es2015.4cf9183c1dd8f352bda7.js:1)
    at f (runtime-es2015.858f8dd898b75fe86926.js:1)
    at Object.1 (main-es2015.4cf9183c1dd8f352bda7.js:1)
    at f (runtime-es2015.858f8dd898b75fe86926.js:1)
    at t (runtime-es2015.858f8dd898b75fe86926.js:1)
    at Array.r [as push] (runtime-es2015.858f8dd898b75fe86926.js:1)

🌍 Your Environment




Angular CLI: 8.0.2
Node: 10.16.0
OS: darwin x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.2
@angular-devkit/build-angular     0.800.2
@angular-devkit/build-optimizer   0.800.2
@angular-devkit/build-webpack     0.800.2
@angular-devkit/core              8.0.2
@angular-devkit/schematics        8.0.2
@angular/cli                      8.0.2
@ngtools/webpack                  8.0.2
@schematics/angular               8.0.2
@schematics/update                0.800.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?
The error comes from the fact that the aws-sdk is dependent on node specific variables that are not present in a browser context.

But the problem is that the error should both happen with ng serve and ng build.
Why ? Multiple reasons:

  1. Developers use ng serve for development and they should be made aware errors that will end up on production.
  2. Also it will be easier for reporting the "process shim" bug to the aws team, if they just have to run ng serve instead of having to setup a third party web server.
@hugodes hugodes mentioned this issue Jun 12, 2019
Closed
@alan-agius4
Copy link
Collaborator

Hi, the problem here is that aws-sdk is not compatible with JS modules as is setting process as a global object.
See: https://github.com/aws/aws-sdk-js/blob/c175cb2b89576f01c08ebf39b232584e4fa2c0e0/lib/browser_loader.js#L36-L38

This works well when not using module type script tags however, it will always fail when using type=module since there is not a global scope. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#Other_differences_between_modules_and_standard_scripts

I suggest you file an issue with AWS, that their SDK doesn't work with JS modules.

I am going to leave this open for the time being, to discuss this a bit further with the rest of team and see if we should always add type=module on serve when differential loading will be enabled during build.

@alan-agius4 alan-agius4 added the needs: discussion On the agenda for team meeting to determine next steps label Jun 12, 2019
@hugodes
Copy link
Author

hugodes commented Jun 12, 2019 •
edited

@alan-agius4 thanks for your great insight, it's perfectly clear.

I would advocate for adding type=module on serve because for us we didn't see the problem until the code was merged on our live dev server.
I think devs would be better off knowing broken code is broken before deploying.

@hugodes
Copy link
Author

hugodes commented Jun 12, 2019

For readers who encounter this problem in Angular 8 with aws-sdk, a workaround for now it to add these two lines of code in you polyfills.ts file:

// Add global to window, assigning the value of window itself.
(window as any).global = window;
// Defining process shim
(window as any).process = undefined;

@alan-agius4 alan-agius4 self-assigned this Jun 13, 2019
@alan-agius4
Copy link
Collaborator

We discussed this and we decided that it's best that we add type=module on script tags in serve mode, if differential loading will be needed and the script target is es2015.

@alan-agius4 alan-agius4 added area: devkit/build-angular and removed needs: discussion On the agenda for team meeting to determine next steps labels Jun 13, 2019
@ngbot ngbot bot modified the milestone: needsTriage Jun 13, 2019
@alan-agius4 alan-agius4 added type: bug/fix freq1: low Only reported by a handful of users who observe it rarely severity3: broken labels Jun 13, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Jun 13, 2019
@hugodes
Copy link
Author

hugodes commented Jun 14, 2019

Thanks @alan-agius4 !!!

@alan-agius4 alan-agius4 mentioned this issue Jun 17, 2019
Merged
@alan-agius4 alan-agius4 mentioned this issue Jun 25, 2019
Closed
@alan-agius4 alan-agius4 modified the milestones: Backlog, 8.0.x Jun 26, 2019
vikerman pushed a commit that referenced this issue Jun 26, 2019
@alan-agius4 @vikerman
fix(@angular-devkit/build-angular): add type="module" on script tag…
44a0d0f 
…s when differential loading will be enabled

Fixes #14747
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Milestone
8.0.x
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): add type="module" on script tag…
2 participants
@hugodes @alan-agius4