CODEWITHSUNDEEP
angularjsnode.jsaspnetcoretemplatepack
Bailey Miller
Bailey Miller

Reputation: 1523

Angular 2 cannot include Material lib

I am using the Microsoft.AspNetCore.SpaTemplates example of angular 2, I installed the angular/materiel npm module and tried to include that for use of the input material.

EDIT -- New question posted regarding removing the server-side rendering.

Link -- Click Here

I tried to import it in app.module.ts and after doing so cannot seem to get my application to load anymore.

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent
],
imports: [
    UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
    RouterModule.forRoot([
        { path: '', redirectTo: 'account', pathMatch: 'full' },
        { path: 'login', component: LoginComponent },
        { path: '**', redirectTo: 'account' }
    ]), MaterialModule
]

})

Now I am trying to create a simple login view with an email and password input box. I wanted to use angular material to make it look better.

Here is my exception on page load.

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: This method is not implemented in Parse5DomAdapter: getCookie
at _notImplemented (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:91062:12) [angular]
at Parse5DomAdapter.module.exports.Parse5DomAdapter.getCookie (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:91657:69) [angular]
at CookieXSRFStrategy.configureRequest (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:63677:109) [angular]
at XHRBackend.createConnection (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:63726:32) [angular]
at httpRequest (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64076:24) [angular]
at Http.request (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64185:38) [angular]
at Http.get (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:64199:25) [angular]
at AccountService.ping (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\main-server.js:22373:30) [angular]
at new AccountService (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\main-server.js:22370:14) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:15:30) [angular]
at CompiledTemplate.proxyViewClass.AppView.create (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:11951:25) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:19) [angular]
at CompiledTemplate.proxyViewClass.AppView.createHostView (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:11964:25) [angular]
at ComponentFactory.create (C:\Users\baile\Source\Repos\Programming2017\BankSoftware\ClientApp\dist\vendor.js:7361:29) [angular]

I now understand that the Universal Module is what is creating pre-rendering. This is really great and all except to be completely honest I don't need it.

To revise my question now. How can someone take the Microsoft.AspNetCore.SpaTemplate for angular 2 and remove the Universal Module and still have a working angular website. Simply removing the Universal Module from the imports causing other errors to start showing up. What changes need to be made throughout other sections of the template, and am I losing anything aside from server-side pre-rendering?

Upvotes: -1

Views: 103

Answers (1)

Matt Knight
Matt Knight

Reputation: 499

I had the same issue and fixed it by putting the MaterialModule before the UniversalModule. I know the SPA template says it should go first, but that order seemed to break it.

imports: [
        MaterialModule.forRoot(),
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.

        RouterModule.forRoot([
            { path: '', redirectTo: 'account', pathMatch: 'full' },
            { path: 'account', component: AccountListComponent },
            { path: 'detail/:id', component: AccountDetailComponent },
            { path: '**', redirectTo: 'account' }
        ])
    ],

Edit - Actually, it looks to be more complicated than this. Here is a GitHub issue on it: https://github.com/angular/material2/issues/308

I ended up pulling out the UniversalModule because Angular Material was more important to me than server side rendering at this point. There are a few changes you would need to make to get the SPA template to work with Angular Material. Let me know if you would like more help.

Edit

I have down voted this question since the OP marked my answer, then un-marked despite considerable effort to assist. The answer I provided is the correct answer.

Upvotes: 0

Related Questions