window not defined

[k11k2]

Willing to pass my Token from asp.net to angular

Index.cshtml

<script type="text/javascript">  
    window.appConfig = {
        Token: '@ViewData["token"]'
    }
</script>

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

Coming to app.module.shared.ts

import { APP_CONFIG } from './components/appConfig'

@NgModule({
declarations: [],
imports: [],
providers: [
        { provide: APP_CONFIG, useValue: window['appConfig'] }             
    ]
})

later in the components I'm going to use it as appConfig.Token is this scenario I face window not defined.

Error

An unhandled exception occurred while processing the request.
NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined
at C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19463:114
at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19469:2)
at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30)
at Object.hasOwn (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:17482:77)
at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19763:81)
at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30)
at C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:66:18
at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:69:10)
at Module._compile (module.js:571:32)
Current directory is: C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()
Stack Query Cookies Headers 
NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined at C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19463:114 at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19469:2) at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30) at Object.hasOwn (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:17482:77) at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30) at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:19763:81) at __webpack_require__ (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:20:30) at C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:66:18 at Object.<anonymous> (C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore\ClientApp\dist\main-server.js:69:10) at Module._compile (module.js:571:32) Current directory is: C:\Users\abhishikt.kandavalli\Documents\Visual Studio 2017\Projects\angularTemplateCore\angularTemplateCore 
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
System.Runtime.CompilerServices.TaskAwaiter.GetResult()
Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance+<InvokeExportAsync>d__13.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
System.Runtime.CompilerServices.TaskAwaiter.GetResult()
Microsoft.AspNetCore.NodeServices.NodeServicesImpl+<InvokeExportWithPossibleRetryAsync>d__10.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
Microsoft.AspNetCore.NodeServices.NodeServicesImpl+<InvokeExportWithPossibleRetryAsync>d__10.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
System.Runtime.CompilerServices.TaskAwaiter.GetResult()
Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper+<ProcessAsync>d__29.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner+<RunAsync>d__0.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
AspNetCore._Views_Callback_callback_cshtml+<ExecuteAsync>d__12.MoveNext() in callback.cshtml
+
        Token: '@ViewData["token"]'
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.Razor.RazorView+<RenderPageCoreAsync>d__16.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.Razor.RazorView+<RenderPageAsync>d__15.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
System.Runtime.CompilerServices.TaskAwaiter.GetResult()
Microsoft.AspNetCore.Mvc.Razor.RazorView+<RenderAsync>d__14.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor+<ExecuteAsync>d__22.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor+<ExecuteAsync>d__21.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.ViewResult+<ExecuteResultAsync>d__26.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker+<InvokeResultAsync>d__19.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker+<InvokeNextResultFilterAsync>d__24.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResultExecutedContext context)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker+<InvokeNextResourceFilter>d__22.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker+<InvokeFilterPipelineAsync>d__17.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker+<InvokeAsync>d__15.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Builder.RouterMiddleware+<Invoke>d__4.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware+<Invoke>d__6.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware+<Invoke>d__6.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware+<Invoke>d__7.MoveNext()

VS 2017 asp.net core 2.0

[k11k2]

And also suggest best practice for passing parameters from asp.net to angular.

[GregoryKhakov]

In Angular Universal the browser's object 'window' doesn't exist:
https://github.com/angular/universal#universal-gotchas

Here is some info about your question:
https://stackoverflow.com/questions/45042166/net-core-spa-templates-passing-data-from-mvc-to-angular2

Hope this helps.

[k11k2]

@GregoryKhakov He also using window(as any) to get the attributes but if I mention same in providers it throws error. what would be specific reason for it.

[SteveSandersonMS]

Since window only exists when running in the browser, you should put useValue: window['appConfig'] only in app.module.browser.ts, not app.module.shared.ts, plus configure some other value in app.module.server.ts.

[k11k2]

plus configure some other value in app.module.server.ts.

@SteveSanderson What do you mean I didn't get it.

[SteveSandersonMS]

If your code relies on the existence of a DI entry called APP_CONFIG, and it's declared only in the app.module.browser.ts file, then you'll get an error when your code tries to run on the server.

So you need to also declare a value for APP_CONFIG in app.module.server.ts. What value you use is up to you, but of course you can't refer to window there because there is no window (that code runs in Node on the server, not in a browser).

[k11k2]

@SteveSandersonMS with out sending any data and globals: { serverData: params.data } how could I make use of window in .ts file like window['somethind']

If I want make use of window in .ts use to send fake data globals: { serverData: params.data } . without doing this stuff I want to achieve. Is this possible?

[SteveSandersonMS]

Sorry, I don't think I follow your question!

But if you don't want to use the DI technique to have different services for server and client rendering, then you either need to disable server-side rendering altogether, or avoid using window altogether.

[k11k2]

@SteveSandersonMS I disable server-side rendering for angular 5 for some issues. Now what is best practice of sending data from mvc to angular?

[SteveSandersonMS]

Generally since the client and server are decoupled, you'd exclusively have your client fetch data from the server using API endpoints called over HTTP.

If you're keen to perform some server-side rendering inside the initial HTML page, then you can either write some ASP.NET middleware to intercept those requests and run arbitrary logic to generate the response, or re-enable SSR and put your logic in TypeScript code. Note that your SSR logic does not have to call Angular - you could have a createServerRenderer function that simply returns a promise that resolves with { html: params.data.originalHtml }, thereby being equivalent to serving the default HTML content.