search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

8.0.4 prod build output fails at runtime #14909

Closed chadbr closed 5 years ago

chadbr commented 5 years ago

transferred from https://github.com/angular/angular/issues/31286

Affected Package

?? not sure?

Is this a regression?

yes, worked fine in 8.0.0

Description

Upgraded application from 8.0.0 to 8.0.4 -- and now the production build output fails to load.

To be clear - the build completes successfully - the output fails to load.

🔬 Minimal Reproduction

Sorry - I can't do a repo on this one?

🔥 Exception or Error


index.js.pre-build-optimizer.js:1 Uncaught TypeError: Cannot assign to read only property 'MAX_SAFE_INTEGER' of function 'function Number() { [native code] }'
    at index.js.pre-build-optimizer.js:1
    at index.js.pre-build-optimizer.js:1
    at Object. (index.js.pre-build-optimizer.js:1)
    at Object. (index.js.pre-build-optimizer.js:1)
    at i (index.js.pre-build-optimizer.js:1)
    at Module. (index.js.pre-build-optimizer.js:1)
    at i (index.js.pre-build-optimizer.js:1)
    at index.js.pre-build-optimizer.js:1
    at Object.oHoW (index.js.pre-build-optimizer.js:1)
    at f (bootstrap:78)
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
i @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
i @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
oHoW @ index.js.pre-build-optimizer.js:1
f @ bootstrap:78
zUnb @ environment.ts:7
f @ bootstrap:78
0 @ survey-template.validator.js.pre-build-optimizer.js:27
f @ bootstrap:78
t @ bootstrap:45
r @ bootstrap:32
(anonymous) @ main-es2015.05bd84a00932f2e2f0a5.js:1

after clicking on preserve log ...


Navigated to https://....appspot.com/
VM77 main-es2015.05bd84a00932f2e2f0a5.js:1 Uncaught TypeError: Cannot assign to read only property 'MAX_SAFE_INTEGER' of function 'function Number() { [native code] }'
    at VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
    at VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
    at Object. (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at Object. (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at i (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at Module. (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at i (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
    at Object.oHoW (VM77 main-es2015.05bd84a00932f2e2f0a5.js:1)
    at f (VM72 runtime-es2015.858f8dd898b75fe86926.js:1)
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
i @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
i @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
oHoW @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
f @ VM72 runtime-es2015.858f8dd898b75fe86926.js:1
zUnb @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
f @ VM72 runtime-es2015.858f8dd898b75fe86926.js:1
0 @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
f @ VM72 runtime-es2015.858f8dd898b75fe86926.js:1
t @ VM72 runtime-es2015.858f8dd898b75fe86926.js:1
r @ VM72 runtime-es2015.858f8dd898b75fe86926.js:1
(anonymous) @ VM77 main-es2015.05bd84a00932f2e2f0a5.js:1
Navigated to https://....appspot.com/
index.js.pre-build-optimizer.js:1 Uncaught TypeError: Cannot assign to read only property 'MAX_SAFE_INTEGER' of function 'function Number() { [native code] }'
    at index.js.pre-build-optimizer.js:1
    at index.js.pre-build-optimizer.js:1
    at Object. (index.js.pre-build-optimizer.js:1)
    at Object. (index.js.pre-build-optimizer.js:1)
    at i (index.js.pre-build-optimizer.js:1)
    at Module. (index.js.pre-build-optimizer.js:1)
    at i (index.js.pre-build-optimizer.js:1)
    at index.js.pre-build-optimizer.js:1
    at Object.oHoW (index.js.pre-build-optimizer.js:1)
    at f (bootstrap:78)
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
i @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
i @ index.js.pre-build-optimizer.js:1
(anonymous) @ index.js.pre-build-optimizer.js:1
oHoW @ index.js.pre-build-optimizer.js:1
f @ bootstrap:78
zUnb @ environment.ts:7
f @ bootstrap:78
0 @ survey-template.validator.js.pre-build-optimizer.js:27
f @ bootstrap:78
t @ bootstrap:45
r @ bootstrap:32
(anonymous) @ main-es2015.05bd84a00932f2e2f0a5.js:1

🌍 Your Environment

Angular Version:


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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.4
@angular-devkit/build-angular     0.800.4
@angular-devkit/build-optimizer   0.800.4
@angular-devkit/build-webpack     0.800.4
@angular-devkit/core              8.0.4
@angular-devkit/schematics        8.0.4
@angular/cdk                      8.0.1
@angular/cli                      8.0.4
@angular/flex-layout              7.0.0-beta.19
@angular/material                 8.0.1
@ngtools/webpack                  8.0.4
@schematics/angular               8.0.4
@schematics/update                0.800.4
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0
chadbr commented 5 years ago

also... for some reason it switched from a single output:

$ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production

Date: 2019-06-25T23:17:16.254Z
Hash: 5355a3791e1de2a1487a
Time: 599816ms
chunk {0} runtime.858f8dd898b75fe86926.js, runtime.858f8dd898b75fe86926.js.map (runtime) 1.46 kB [entry] [rendered]
chunk {1} main.146127183af69f8c2413.js, main.146127183af69f8c2413.js.map (main) 8.67 MB [initial] [rendered]
chunk {2} polyfills.a3f585d393ecee6ff04d.js, polyfills.a3f585d393ecee6ff04d.js.map (polyfills) 36.5 kB [initial] [rendered]
chunk {3} styles.cdfd522e0ae14066e741.css, styles.cdfd522e0ae14066e741.css.map (styles) 1.43 MB [initial] [rendered]
chunk {scripts} scripts.200fca3f34e4f3d6a8ec.js, scripts.200fca3f34e4f3d6a8ec.js.map (scripts) 399 bytes [entry] [rendered]

to multiple outputs...

yarn run v1.16.0
$ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production

Date: 2019-06-26T13:22:22.260Z
Hash: 17f9e8b36385d62fc83f
Time: 577929ms
chunk {0} runtime-es5.741402d1d47331ce975c.js, runtime-es5.741402d1d47331ce975c.js.map (runtime) 1.47 kB [entry] [rendered]
chunk {1} main-es5.872a37498392419fab97.js, main-es5.872a37498392419fab97.js.map (main) 9.12 MB [initial] [rendered]
chunk {2} polyfills-es5.0bc13f67d0c1b58f40aa.js, polyfills-es5.0bc13f67d0c1b58f40aa.js.map (polyfills) 111 kB [initial] [rendered]
chunk {scripts} scripts.200fca3f34e4f3d6a8ec.js, scripts.200fca3f34e4f3d6a8ec.js.map (scripts) 399 bytes [entry] [rendered]

Date: 2019-06-26T13:31:52.916Z
Hash: 734afe8a628a9170b33d
Time: 570116ms
chunk {0} runtime-es2015.858f8dd898b75fe86926.js, runtime-es2015.858f8dd898b75fe86926.js.map (runtime) 1.47 kB [entry] [rendered]
chunk {1} main-es2015.05bd84a00932f2e2f0a5.js, main-es2015.05bd84a00932f2e2f0a5.js.map (main) 8.67 MB [initial] [rendered]
chunk {2} polyfills-es2015.a3f585d393ecee6ff04d.js, polyfills-es2015.a3f585d393ecee6ff04d.js.map (polyfills) 36.5 kB [initial] [rendered]
chunk {3} styles.3b0146a33aaa8321c6f4.css, styles.3b0146a33aaa8321c6f4.css.map (styles) 1.44 MB [initial] [rendered]
chunk {scripts} scripts.200fca3f34e4f3d6a8ec.js, scripts.200fca3f34e4f3d6a8ec.js.map (scripts) 399 bytes [entry] [rendered]
chadbr commented 5 years ago

also configs if it helps?

browserlist (forces single build output)

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
not samsung 4
not android 4.4.3-4.4.4
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions
not chrome 49

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": false,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom",
      "dom.iterable"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "pretty": true,
    "strictNullChecks": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "downlevelIteration": true,
    "lib": [
      "es2018",
      "dom",
      "dom.iterable"
    ],
    "outDir": "../out-tsc/app",
    "target": "es6",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp-ui": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/ag-grid-community/dist/styles/ag-grid.css",
              "src/dls_mat_theme.scss",
              "src/styles.scss",
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/google-analytics.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            },
            "offline": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.offline.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp-ui:build:production"
            },
            "local": {
              "browserTarget": "myapp-ui:build:local"
            },
            "offline": {
              "browserTarget": "myapp-ui:build:offline"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "preserveSymlinks": true,
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/ag-grid-community/dist/styles/ag-grid.css",
              "src/dls_mat_theme.scss",
              "src/styles.scss",
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/google-analytics.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "myapp-ui-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "myapp-ui:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "myapp-ui",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": ""
    }
  }
}
mgechev commented 5 years ago

Looks like this is caused by differential loading. By default your ES2015 bundles will produce strict scripts (i.e. use strict) which will forbid reassignment of MAX_SAFE_INTEGER.

To fix the problem, I'd recommend to make your code work in strict mode. To workaround the problem, disable differential loading by setting tsconfig.json to target es5 instead of es2015.

Please, open a new issue if this doesn't solve your problem.

chadbr commented 5 years ago

same as https://github.com/angular/angular-cli/issues/14952

It is pretty impractical to force this on all 3rd party packages... we have several who use 'non-strict' mode.

mgechev commented 5 years ago

@chadbr check https://github.com/angular/angular-cli/pull/14985. If you inject them in the next release, everything should work just like before.

Third-party scripts which you inject directly in the index.html file would not be loaded with type module.

chadbr commented 5 years ago

@mgechev looking forward to it. Thanks for being so responsive -- appreciated.

angular-automatic-lock-bot[bot] commented 5 years ago

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.