-1

我正在使用 angular 2 的 Microsoft.AspNetCore.SpaTemplates 示例，我安装了 angular/materiel npm 模块并尝试包含该模块以使用输入材料。

编辑——关于删除服务器端渲染的新问题。

链接——点这里

我试图在 app.module.ts 中导入它，这样做之后似乎无法再加载我的应用程序。

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

})

现在我正在尝试使用电子邮件和密码输入框创建一个简单的登录视图。我想使用有棱角的材料让它看起来更好。

这是我的页面加载异常。

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]

我现在明白通用模块是创建预渲染的东西。这真的很棒，除了说实话我不需要它。

现在修改我的问题。有人如何将 Microsoft.AspNetCore.SpaTemplate 用于 Angular 2 并删除通用模块并仍然有一个工作的 Angular 网站。只需从导入中删除通用模块，就会导致其他错误开始出现。在模板的其他部分需要进行哪些更改，除了服务器端预渲染之外，我是否丢失了任何内容？

4

1 回答 1

0

我遇到了同样的问题，并通过将 MaterialModule 放在 UniversalModule 之前来解决它。我知道 SPA 模板说它应该先行，但这个顺序似乎破坏了它。

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' }
        ])
    ],

编辑 - 实际上，它看起来比这更复杂。这是一个关于它的 GitHub 问题： https ://github.com/angular/material2/issues/308

我最终退出了 UniversalModule，因为此时 Angular Material 对我来说比服务器端渲染更重要。您需要进行一些更改才能使 SPA 模板与 Angular Material 一起使用。如果您需要更多帮助，请告诉我。

编辑

自从 OP 标记了我的答案后，我对这个问题投了反对票，然后尽管付出了相当大的努力来提供帮助，但没有标记。我提供的答案是正确答案。

于 2017-03-29T19:00:33.920 回答