Adding angular material 2 to a project #1213

New Issue

fergalmoran · 2025-08-09T17:19:17Z

fergalmoran commented

2025-08-09 17:19:17 +00:00

Originally created by @ranbuch on 12/1/2016

Hi,

I've followed the instructions here:
https://github.com/angular/material2/blob/master/GETTING_STARTED.md
minus the angular-cli parts:

npm install --save @angular/material
npm install --save hammerjs 
npm install --save-dev @types/hammerjs

and added this code to my app.module.ts file:

import { UniversalModule } from 'angular2-universal';
import 'hammerjs';
.
.
.
@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        MaterialModule
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

But now I'm getting this error:

An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined

A lot more is written in the error but the window is not defined part is making me somewhat uncomfortable.

I'm new to Angular Universal but I'm guessing the code is trying to run on the server and there's no window there.

I'm developing a new platform for our existing startup and time is of the essence 😅 should I use Angular Universal? Is it ready for production?

Thank you!

*Originally created by @ranbuch on 12/1/2016* Hi, I've followed the instructions here: https://github.com/angular/material2/blob/master/GETTING_STARTED.md minus the ```angular-cli``` parts: ``` npm install --save @angular/material npm install --save hammerjs npm install --save-dev @types/hammerjs ``` and added this code to my ```app.module.ts``` file: ``` import { UniversalModule } from 'angular2-universal'; import 'hammerjs'; . . . @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent, CounterComponent, FetchDataComponent, HomeComponent, MaterialModule ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: '**', redirectTo: 'home' } ]) ] }) export class AppModule { } ``` But now I'm getting this error: ``` An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined ``` A lot more is written in the error but the ```window is not defined``` part is making me somewhat uncomfortable. I'm new to Angular Universal but I'm guessing the code is trying to run on the server and there's no window there. I'm developing a new platform for our existing startup and time is of the essence 😅 should I use Angular Universal? Is it ready for production? Thank you!

fergalmoran closed this issue

2025-08-09 17:19:17 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1213