Skip to content

Setting Input Decorators fails in production build, but not in development build #198

Closed

Description

@qdouble

There seems to be some sort of configuration bug as I set the input like this

    @Input() set defaultColor(colorName: string) {
        this._defaultColor = colorName || this._defaultColor;
    }

It works perfectly fine when I do a development build. However when I build it in production mode, no errors are thrown during compiling. However, when I load it in the browser, browser.js throws an Uncaught TypeError... when I look at the trace it shows

function decorate(decorators, target, targetKey, targetDescriptor) {
        if (!is_undefined_1.isUndefined(targetDescriptor)) {
            if (!is_array_1.isArray(decorators)) {
                throw new TypeError();
            }
            else if (!is_object_1.isObject(target)) {
                throw new TypeError();
            }
            else if (is_undefined_1.isUndefined(targetKey)) {
                throw new TypeError();
            }
            else if (!is_object_1.isObject(targetDescriptor)) {
                throw new TypeError(); // <---------- This where where the error is thrown from the browser.js file webpack creates
            }

        }

The same bug occurs on every other directive that has a input setter as well. What could be the issue?

Activity

  1. PatrickJS commented on Jan 4, 2016

    @PatrickJS
    Owner

    can use use @Input('defaultColor') and see if you have the same error?

  2. manavsehgal commented on Jan 5, 2016

    @manavsehgal

    Same as #190

  3. qdouble commented on Jan 5, 2016

    @qdouble
    Author

    @gdi2290 It still gives the error (only in production, not dev).

    @manavsehgal when I comment out CommonsChunkPlugin for common, it just moves up to vendor to being the file that calls the same error. If I comment out the plugin for vendor it just moves up to main.

    It works without a problem in plunker, but not in production build: https://plnkr.co/edit/XBqIYu4aHyNi7TJtc5wH?p=preview

    Every directive I have with an input setter breaks in production build.

  4. PatrickJS commented on Jan 5, 2016

    @PatrickJS
    Owner

    oh yeah there was a problem with CommonsChunkPlugin for common that needs to be removed

  5. qdouble commented on Jan 5, 2016

    @qdouble
    Author

    Do I need to install a new version of that plugin or redownload this repo? This is the part I commented out on production config, let me know if I'm commenting out the wrong areas.

    plugins: [
        //new CommonsChunkPlugin({
        //  name: 'vendor',
        //  filename: 'vendor.[hash].bundle.js',
        //  minChunks: Infinity
        //}),
        //new CommonsChunkPlugin({
        //  name: 'common',
        //  filename: 'common.[hash].bundle.js',
        //  minChunks: 2,
        //  chunks: [
        //    'main', // keep sync with entry
        //    'vendor'  // keep sync with entry
        //  ]
        //}),
        // static assets
    

    Still not working after commenting out either of the two or both of the above.

  6. PatrickJS commented on Jan 5, 2016

    @PatrickJS
    Owner

    leave the vendor CommonChunk

  7. PatrickJS commented on Jan 5, 2016

    @PatrickJS
    Owner

    you also want to move DedupePlugin and OccurenceOrderPlugin to be first
    https://github.com/AngularClass/angular2-webpack-starter/blob/master/webpack.prod.config.js#L106

  8. qdouble commented on Jan 5, 2016

    @qdouble
    Author

    @gdi2290 The issue persists. I just did a clean install of the latest repo and the error is still there. There is still something wrong with the current build.

    To reproduce error, all you have to do is...

    1. Have latest repo installed.
    2. Copy the template from app.ts into project app: https://plnkr.co/edit/XBqIYu4aHyNi7TJtc5wH?p=preview
    3. Copy the attributeSample.ts from above plunker and copy and import it into app.
    4. Do a production build and it will compile successfully, but soon as you open up browser you will see the error
    browser.js:130 Uncaught TypeError
    
    r   @   browser.js:130
    (anonymous function)    @   attributeSample.ts:12
    webpackJsonp.499    @   main.7e53375de59da6dff570.bundle.js:79
    e   @   bootstrap 97a8b9bfeb46a22d04b6:50
    webpackJsonp.498    @   app.ts:9
    e   @   bootstrap 97a8b9bfeb46a22d04b6:50
    webpackJsonp.0  @   main.ts:13
    e   @   bootstrap 97a8b9bfeb46a22d04b6:50
    window.webpackJsonp @   bootstrap 97a8b9bfeb46a22d04b6:21
    (anonymous function)    @   main.7e53375de59da6dff570.bundle.js:1
    
    
  9. PatrickJS commented on Jan 7, 2016

    @PatrickJS
    Owner

    can you update the prod config. see #203

  10. qdouble commented on Jan 7, 2016

    @qdouble
    Author

    @gdi2290 thanks, it works great now 👍

  11. PatrickJS commented on Jan 7, 2016

    @PatrickJS
    Owner

    Thanks for opening an issue. If you have any more questions or problems feel free to open another one

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions