Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

window not defined #1238

Description

@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

Activity

  1. k11k2 commented on Aug 30, 2017

    @k11k2
    Author

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

  2. GregoryKhakov commented on Aug 30, 2017

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

  3. k11k2 commented on Aug 31, 2017

    @k11k2
    Author

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

  4. SteveSandersonMS commented on Sep 6, 2017

    @SteveSandersonMS
    Member

    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.

  5. k11k2 commented on Sep 6, 2017

    @k11k2
    Author

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

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

  6. SteveSandersonMS commented on Sep 7, 2017

    @SteveSandersonMS
    Member

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

  7. k11k2 commented on Sep 27, 2017

    @k11k2
    Author

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

  8. SteveSandersonMS commented on Sep 27, 2017

    @SteveSandersonMS
    Member

    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.

  9. k11k2 commented on Dec 11, 2017

    @k11k2
    Author

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

  10. SteveSandersonMS commented on Dec 12, 2017

    @SteveSandersonMS
    Member

    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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions