SCRIPT438: Object doesn't support property or method 'assign'

[ranouf]

Hi,

I have this Error on IE 11:

SCRIPT438: Object doesn't support property or method 'assign'

I m using Asp.Net Core 1.1 + Angular 4 + Webpack

This is my package.json:

{
  "name": "MyApp.Ng4",
  "version": "0.0.0",
  "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^4.2.0",
    "@angular/common": "^4.2.0",
    "@angular/compiler": "^4.2.0",
    "@angular/core": "^4.2.0",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.0",
    "@angular/http": "^4.2.0",
    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "^4.2.0",
    "@angular/platform-browser-dynamic": "^4.2.0",
    "@angular/platform-server": "^4.2.0",
    "@angular/router": "^4.2.0",
    "@covalent/core": "^1.0.0-beta.5-1",
    "@ngui/map": "^0.18.3",
    "@ngx-translate/core": "7.0.0",
    "@ngx-translate/http-loader": "0.1.0",
    "@swimlane/ngx-charts": "5.3.1",
    "@types/googlemaps": "^3.26.13",
    "@types/node": "7.0.18",
    "angular2-jwt": "^0.2.3",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^2.0.5",
    "aspnet-webpack": "^1.0.29",
    "auth0-js": "^8.7.0",
    "auth0-lock": "^10.16.0",
    "awesome-typescript-loader": "3.1.3",
    "core-js": "^2.4.1",
    "css": "2.2.1",
    "css-loader": "0.28.1",
    "d3": "^4.4.0",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.11.0",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "node-sass": "^4.5.3",
    "preboot": "4.5.2",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.2.0",
    "sass-loader": "^6.0.5",
    "showdown": "1.6.4",
    "style-loader": "0.17.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.3.2",
    "url-loader": "0.5.8",
    "web-animations-js": "2.2.5",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@types/chai": "3.5.2",
    "@types/jasmine": "2.5.47",
    "@types/hammerjs": "^2.0.34",
    "chai": "3.5.0",
    "jasmine-core": "2.6.1",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "node-sass": "4.5.3"
  }
}

So I made some search:
#16286
http://2ality.com/2014/01/object-assign.html
https://www.npmjs.com/package/object-assign
https://www.npmjs.com/package/es6-object-assign

I understand that Object.Assign is not supported by IE, I understand i need a polyfill.
I don t understand what is a polyfill and how to install it to resolve the problem.

I try to npm install --save es6-object-assign then added it in webpack.config.vendor.js then execute webpack --config webpack.config.vendor.js

Same with npm install --save object-assign

So maybe you have a solution?

[gkalpak]

There should be no Object.assign() in the source code since 6bae73c (i.e. in version >=4.3.0-rc.0). It is hard to tell based on the minified code, but it looks possible that your build process isn't producing ES5-compatible code (in which case you could just adjust your build settings).

This guide has some general information about polyfills. The gist of it is that you somehow need to include the script in your application, before the code that relies on the polyfilled feature runs. How you do that is specific to your build process. (In your case, maybe you need to adjust the order in which scripts are included in the vendor bundle, to make sure the polyfill comes before Angular. Again it is hard to tell without seeing the actual code.)

I am going to close this as non-actionable, but feel free to continue the discussion below if you have further questions.

[ranouf]

Hi,

So I updated my package:

{
  "name": "MyApp.Ng4",
  "version": "0.0.0",
  "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^4.2.0",
    "@angular/common": "^4.2.0",
    "@angular/compiler": "^4.2.0",
    "@angular/core": "^4.2.0",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.0",
    "@angular/http": "^4.2.0",
    "@angular/material": "2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.0",
    "@angular/platform-browser-dynamic": "^4.2.0",
    "@angular/platform-server": "^4.2.0",
    "@angular/router": "^4.2.0",
    "@covalent/core": "^1.0.0-beta.5-1",
    "@ngui/map": "^0.18.3",
    "@ngx-translate/core": "7.1.0",
    "@ngx-translate/http-loader": "1.0.2",
    "@swimlane/ngx-charts": "6.0.1",
    "@types/googlemaps": "^3.26.13",
    "@types/node": "8.0.19",
    "angular2-jwt": "^0.2.3",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "auth0-js": "^8.7.0",
    "auth0-lock": "^10.16.0",
    "awesome-typescript-loader": "3.2.2",
    "core-js": "^2.4.1",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "d3": "^4.4.0",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.12.0",
    "html-loader": "0.5.1",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.7",
    "node-sass": "^4.5.3",
    "preboot": "5.0.0",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.2.0",
    "sass-loader": "^6.0.5",
    "showdown": "1.7.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.2",
    "url-loader": "0.5.9",
    "web-animations-js": "2.3.1",
    "webpack": "3.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@types/chai": "4.0.2",
    "@types/jasmine": "2.5.53",
    "@types/hammerjs": "^2.0.34",
    "chai": "4.1.1",
    "jasmine-core": "2.7.0",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.4",
    "node-sass": "4.5.3"
  }
}

This is my webpack.config.vendor.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        entry: {
            vendor: [
                'core-js',
                'event-source-polyfill',
                '@angular/animations',
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/forms',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@angular/material',
                '@covalent/core',
                '@covalent/core/theming/prebuilt/blue-grey-deep-orange.css',
                'angular2-jwt',
                'es6-shim',
                'es6-promise',
                'jquery',
                'zone.js',
                'auth0-js',
            ]
        },
        output: {
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
        },
        entry: { vendor: ['aspnet-prerendering'] },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}

I put this a the top of the vendor generation:
'core-js',
'event-source-polyfill',

I read core-js could help, and i saw polyfill, so maybe it s the polyfill i need for Object.Assign?

I still have the problem.

Do you have some idea to solve the pb?

[gkalpak]

core-js shoulld indeed provide Object.assign(). Not sure why you are still seeing the problem. I would look at an unminified version of the generated file and verify that the polyfill is indeed included before the Angular code.

[luismartinez85]

hi, i hava same problem
any idea?
thanks

[mrwogu]

Same here

[hawkwind2]

Same issue, I've added polyfills.ts manually from https://raw.githubusercontent.com/addyosmani/todomvc-angular-4/master/src/polyfills.ts
and refenced from boot-client.ts (MVC project with Angular 4, no CLI)
Also you can check:
https://stackoverflow.com/questions/44270659/angular-2-non-cli-add-polyfills-ts

[jamesej]

I have the same issue. Inspecting my file in node_modules/@angular/common/@angular/common.es5.js with "@license Angular v4.4.4" in the header, this contains the line 3084:
return options.reduce(function (merged, opt) { return (Object.assign({}, merged, opt)); }, {});
so this seems to have returned since vsn 4.3.

[gkalpak]

Apparently, there was bundling bug that caused Object.assign() to still be included in ES5 code up to (and including) v5.0.0-beta.5 😳
It has been fixed and Object.assign() is properly downleveled since v5.0.0-beta.6.

But as mentioned in the docs, you should be using an ES2015 polyfill on browsers that do not support it natively, which includes Object.assign(). So, this shouldn't affect any apps.

[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.}