window is not defined

[kamalkech]

I follow documention but i get this error :

window is not defined

[sconix]

Are you trying to use the library in some headless (server) environment? Not sure that dropzone library supports such usage.

[kamalkech]

@sconix : i use angular universal cli

[sconix]

Ok, doesn't the universal use server side rendering. So my guess is that you can't use dropzone in a component that you want to have rendered by the universal. If you really need to have the server side rendered version of component where is the dropzone I suspect that you should be able to fake the global window variable so that dropzone is happy.

Can't help you more since I haven't sued universal yet, waiting for it to be integrated with angular core (should be in or after version 4).

[kamalkech]

@sconix : you can check Universal Cli, they merge angular-cli with universal, that' s very important if you try to develop an application front/backend and to improve SEO

[sconix]

Yes I know about Universal and definitely will be using it, but isn't it that currently the Universal does not even work with latest Angular 2 version. So thats why I am waiting until Universal is part of the Angular core utils since they are in the process of integrating it into Angular 4 core and I guess also to angular-cli.

[kamalkech]

Ok understood, but until Angular 4 what is the best quickstart or a solution to develop an application with Angular 2 with sides frontend / backend, and improve the SEO ?!! any idea ?

If there is any solution so i guess must to switch to React !! :(

[sconix]

I don't know if there is any atm. Since it seemed that they abandoned the Universal for 2.x after they decided that its gonna be build into the core of Angular 4. But I haven't looked into the situation lately since we have the good situation that our launch is way after Angular 4 is released so we will add the Universal stuff only after couple months and hopefully by then its build in angular-cli and angular-core so that its easier to take into use etc.

[TcQPAD]

Any update on this? I'm trying to build my application with server side rendering, and I get the same window is not defined error.

If you're not planning to fix this issue, is there any work-around I could use so I can run my application using server side rendering please? :)

[sconix]

I guess you could have some placeholder component shown instead dropzone when using server side rendering.

I haven't yet had time to look if this could be done in a way that if window is not defined then dropzone would not be initialized and we would just apply the dropzone classes manually to get the correct look.

[TcQPAD]

Okay thanks, I'll try to go for the placeholder then! Thanks for your reply :)

[mixalistzikas]

new webpack.DefinePlugin({
      ...
      'window': JSON.stringify(true),
      ...
}),

I'm faking "window" that way... But I'm getting now this error

TypeError: Cannot read property 'documentElement' of undefined
at /home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:227817
at Object.<anonymous> (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228412)
at Object.n.(anonymous function) (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228443)
at l (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:172)
at Object.<anonymous> (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:997:2489)
at l (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:172)
at Object.ngx-dropzone-wrapper (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:985:55)
at l (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228631)
at Object../node_modules/ngx-dropzone-wrapper/dist/ngx-dropzone-wrapper.ngfactory.js (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:237:156)
at l (/home/michalis/Documents/Boxes/18-24/admin/dist/server.js:1:228631)

Any advice?

[sconix]

Not sure what are you trying to do. This wrapper has a SSR support so in SSR environment the dropzone is not initialized.

[mixalistzikas]

I'm not trying to make it work with SSR.... I'm just trying to avoid it on SSR.... And I don't know how

[sconix]

Not sure that I understand, there is no need for window in SSR since the dropzone is not initialized at all in a SSR environment. This wrapper only initializes if run on browser environment.

[mixalistzikas]

I'm loosing something...

I have a app.module.ts that imports DropzoneModule and a app.server.module.ts that imports appModule...

So it initialize the DropzoneModule..

Is that right?

[sconix]

Yes, but on the dropzone component / directive there is a check in ngOnInit that if the platform is server then nothing is done. I.e. the dropzone instance is only created on browser platform.

[mixalistzikas]

Could you please check this repo? https://github.com/mixalistzikas/angular-ssr-i18n/tree/dropzone

Branch: dropzone

Now I'm getting "ReferenceError: window is not defined" again. I don't even use the directive. I'm just install the plugin at app.module.ts

Install and run npm run build:all

[sconix]

Sorry I am not familiar with SSR so can not be sure what is you problem, but afaik your main.ts is loading browser not server setup.

[mbrookson]

Was this issue ever resolved and can this library work when using Angular Universal and deploying SSR applications?

[sconix]

This library won't try to initialize Dropzone in SSR environment, other than that I have not tested this in SSR so do not know that can just importing dropzone cause troubles in SSR.