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

Calendar cannot be used in compination with ASP.NET core prerendering #158

Closed
StefanKern opened this Issue Mar 9, 2017 · 6 comments

Comments

3 participants
@StefanKern

StefanKern commented Mar 9, 2017

Bug description:

When using the plugin in combination with the ASP.NET core prerendering freature, it fails with the following error:

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: HTMLElement is not defined
at C:\Projects\Angular2withASPNETCore\Angular2withASPNETCore\node_modules\angular-calendar\dist\umd\angular-calendar.js:1065:48
at Object.<anonymous> (C:\Projects\Angular2withASPNETCore\Angular2withASPNETCore\node_modules\angular-calendar\dist\umd\angular-calendar.js:1083:2)
at __webpack_require__ (C:\Projects\Angular2withASPNETCore\Angular2withASPNETCore\node_modules\angular-calendar\dist\umd\angular-calendar.js:30:30)

If it runs in the browser it works fine.

Versions

Angular: 2.0.0

Calendar library: 0.7.3

Browser name and version: -

Sample project:
angular-calendar-prerendering error.zip
angualr prerendering can be enabled / disabled in
\Views\Home\index.html

Sample project is based on the Visual Studio template: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack

@mattlewis92

This comment has been minimized.

Show comment
Hide comment
@mattlewis92

mattlewis92 Mar 9, 2017

Owner

You should be able to workaround this by including this line in your apps node entry point:

(global as any).HTMLElement = () => {};

Hope that helps!

Owner

mattlewis92 commented Mar 9, 2017

You should be able to workaround this by including this line in your apps node entry point:

(global as any).HTMLElement = () => {};

Hope that helps!

@mattlewis92 mattlewis92 closed this Mar 9, 2017

@StefanKern

This comment has been minimized.

Show comment
Hide comment
@StefanKern

StefanKern Mar 9, 2017

Thanks for the really fast replay. But it took me 2 hours to implement it, so I want to share that too.

I had to define this 'polyfills' for server code in an own ts file.
Code:
export default (global as any).HTMLElement = () => { };

This is then added as my first import in the boot-server.ts, so the server could render the html again 👍

Update: Sample code:
angular-calendar-prerendering-polyfill.zip

StefanKern commented Mar 9, 2017

Thanks for the really fast replay. But it took me 2 hours to implement it, so I want to share that too.

I had to define this 'polyfills' for server code in an own ts file.
Code:
export default (global as any).HTMLElement = () => { };

This is then added as my first import in the boot-server.ts, so the server could render the html again 👍

Update: Sample code:
angular-calendar-prerendering-polyfill.zip

mattlewis92 added a commit that referenced this issue Mar 9, 2017

@mattlewis92

This comment has been minimized.

Show comment
Hide comment
@mattlewis92

mattlewis92 Mar 9, 2017

Owner

Thanks for sharing that, I've added a link to your comment in the readme so that it can help others in the future 😄

Owner

mattlewis92 commented Mar 9, 2017

Thanks for sharing that, I've added a link to your comment in the readme so that it can help others in the future 😄

@btrox88

This comment has been minimized.

Show comment
Hide comment
@btrox88

btrox88 Apr 4, 2017

I have looked at Stefan's example code, and it helps a lot to learn for a Visual Studio project. Problem is when I run it, the style sheets are not applied. The view is simply one column of the month, then days then days, so no columns and rows. Looking in more detail at the code, in packages.config, intellisense tells me that angular/core is unavailable, and in app.module.ts the "import {ngModule} from '@angular/core' has an error that "can't find module 'angular-core'. Same goes for "angule/router", angular2-universal", "angular-calendar". What am I missing? Am I supposed to have something installed in my registry?

btrox88 commented Apr 4, 2017

I have looked at Stefan's example code, and it helps a lot to learn for a Visual Studio project. Problem is when I run it, the style sheets are not applied. The view is simply one column of the month, then days then days, so no columns and rows. Looking in more detail at the code, in packages.config, intellisense tells me that angular/core is unavailable, and in app.module.ts the "import {ngModule} from '@angular/core' has an error that "can't find module 'angular-core'. Same goes for "angule/router", angular2-universal", "angular-calendar". What am I missing? Am I supposed to have something installed in my registry?

@mattlewis92

This comment has been minimized.

Show comment
Hide comment
@mattlewis92

mattlewis92 Apr 4, 2017

Owner
Owner

mattlewis92 commented Apr 4, 2017

@StefanKern

This comment has been minimized.

Show comment
Hide comment
@StefanKern

StefanKern Apr 4, 2017

@btrox88 the example uses bower to minify the stylesheets and js files. Please run the grunt dev task, to create the stylesheets.

In case of the missing moduls, try running npm install to install them. Then the errors should disappear. Hope this helps!

StefanKern commented Apr 4, 2017

@btrox88 the example uses bower to minify the stylesheets and js files. Please run the grunt dev task, to create the stylesheets.

In case of the missing moduls, try running npm install to install them. Then the errors should disappear. Hope this helps!

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