aspnetcore-angular-universal
aspnetcore-angular-universal copied to clipboard
TrilonIO
window is not defind
Hi,
I'm using last template version. node: 8.9.4
I have add npm package "ng-lottie" for animation. And after that i see in html "window is not defind"
I know that ng-lottie not supported angualr ssr but i have to use it for animations.
I have tried to use domino in boot.server.ts but it dosen't work i still see the error message.
Can someone please help me?
I have loaded ng-lottie in app.module shared module for server and browser if i only loaded it to the browser module i see an error on the html that lottie tag not know.
First:
window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. as stated in the readme.
So only load the ng-lottie in the app.module.browser.ts.
The tag not know, maybe you haven't imported/declared it correctly?
I know that limitations. i have in my AppComponent selector <Spinner>. the SpinnerComponent used ng2-lottie for create the anumation for loader in our app.
If i dont add the ng-lottie on the server module i get an error on html that it dont know the
Then I'm out of ideas. Looks like the component it self isn't suitable for use in a serverside rendered project...
Can you show some of the code you used to try to populate globals['window'] with domino? @fadelguy
I have tried this code:
const domino = require('domino'); const fs = require('fs'); const path = require('path'); const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString(); const win = domino.createWindow(template); global['window'] = win; global['document'] = win.document;
But it doesn't work
We don't have an index.html since we're using dotnet core, the code you posted would work for a regular Node/Universal setup. So just just create your own blank html string real quick, and add your app-root (or whatever you may have renamed it to) in there.
Something like this, should do the trick (if I'm not mistaken).
const template = `
<html><head></head>
<body>
<app-root></app-root>
</body>
</html>
`;
I tried your template but still now working. I see the error message in html "window is not defined"
I put domino at the top of boot.server.ts I do something wrong?
Is it possible to load ng-lottie only inside the component in condition I'm in browser without loaded it on the module?
that is what the module is for... there are 3 different module files. 1 for server specifics, 1 for client specifics, and 1 for shared things. If you place it only in the client one, that should work, but since we don't have any info on how your project is setup, we can't do much more than we already have.
I am using Asp .net core 2.1 with angular 6.1.2 server side rendering. But my issue is that When ever i add Routing to my angular app it gives me error "window not defined" while rendering the page on server side. I have tried adding an empty component with routing and gives me the same error. while using the app without routing works perfectly with SSR. I am not able to figure out why this is happening? Error stack is :
Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: 'window is not defined ReferenceError: window is not defined at factory (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\common\bundles\common.umd.js:5610:169) at _callFactory (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8457:24) at _createProviderInstance (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8415:30) at resolveNgModuleDep (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8390:21) at _callFactory (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8463:71) at _createProviderInstance (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8415:30) at resolveNgModuleDep (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:8375:25) at NgModuleRef_.get (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:9083:20) at RouterInitializer.bootstrapListener (C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\router\bundles\router.umd.js:5354:48) at C:\Users\asd\Desktop\YJewellery\src\Presentation\Nop.Web\ClientApp\node_modules\@angular\core\bundles\core.umd.js:4677:60'
@fadelguy try to use dynamic component loader + importing the lib only in browser module, here is the link https://angular.io/guide/dynamic-component-loader
const renderPromise = AppServerModuleNgFactory ? /* AoT / renderModuleFactory(AppServerModuleNgFactory, options) : / dev */ renderModule(AppServerModule, options); return renderPromise.then((response: any) => { console.log(response); const win = domino.createWindow(response.html); response.globals.window = win; return ({ html: response.html, globals: response.globals }); I tried this but does'nt work. Please help
any resolution for the issue related to including domino in asp.net core project ?
We don't have an index.html since we're using dotnet core, the code you posted would work for a regular Node/Universal setup. So just just create your own blank html string real quick, and add your app-root (or whatever you may have renamed it to) in there.
Something like this, should do the trick (if I'm not mistaken).
const template = ` <html><head></head> <body> <app-root></app-root> </body> </html> `;
Please help