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.

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

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

Closed
qdouble opened this issue Jan 4, 2016 · 11 comments

Comments

@qdouble
Copy link

qdouble commented Jan 4, 2016

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?

@PatrickJS
Copy link
Owner

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

@manavsehgal
Copy link

Same as #190

@qdouble
Copy link
Author

qdouble commented Jan 5, 2016

@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.

@PatrickJS
Copy link
Owner

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

@qdouble
Copy link
Author

qdouble commented Jan 5, 2016

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.

@PatrickJS
Copy link
Owner

leave the vendor CommonChunk

@PatrickJS
Copy link
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

@qdouble
Copy link
Author

qdouble commented Jan 5, 2016

@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

@PatrickJS
Copy link
Owner

can you update the prod config. see #203

@qdouble
Copy link
Author

qdouble commented Jan 7, 2016

@gdi2290 thanks, it works great now 👍

@PatrickJS
Copy link
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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants