ASP.Net Core Angular2 模板加上 Auth0 不起作用答案

【问题标题】：ASP.Net Core Angular2 template plus Auth0 not workingASP.Net Core Angular2 模板加上 Auth0 不起作用
【发布时间】：2017-03-14 02:27:00
【问题描述】：

我正在尝试在 VS2015 中构建一个支持 Auth0 的 Angular2 网络前端。我使用了本文http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ 中提到的模板，并尝试在https://auth0.com/docs/quickstart/spa/angular2 遵循Angular2 的Auth0 指南，但我最终得到了一些无法启动的东西。它在我添加 Auth0 之前有效，我认为这与我添加 Auth0 的方式有关，但我无法解决。我将在下面粘贴我当前的错误消息，但我真的试图找到将 Auth0 添加到这个常见的 dotnet VS2015 模板所需的步骤。我正在使用这个特定的模板，因为它是似乎让所有主要功能（如在 Visual Studio 中工作的热代码更改）的主要模板。

Exception: Call to Node module failed with error: ReferenceError: Auth0Lock is not defined
at new Auth (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\ClientApp\dist\main-server.js:230:26)
at AppView._View_AppComponent_Host0.createInternal (AppComponent_Host.ngfactory.js:15:20)
at AppView.create (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:9419:25)
at ComponentFactory.create (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:6029:40)
at ApplicationRef_.bootstrap (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:7051:44)
at C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:6960:93
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:6960:46)
at C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\@angular\core\bundles\core.umd.js:6928:31
at ZoneDelegate.invoke (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\zone.js\dist\zone-node.js:232:26)

【问题讨论】：

找到了更改“declare var Auth0Lock: any;”的建议“让 Auth0Lock: any = require('auth0-lock').default;”导致错误更改为异常：调用节点模块失败并出现错误：TypeError：无法读取 C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\auth0-lock\lib\ui\box 未定义的属性“createElement” \header.js:138:27 在 Object. (C:\Code\videofilenameinfo\VideoFileInfo\NameParserWebsite\node_modules\auth0-lock\lib\ui\box\header.js:141:2) 在 Module._compile (module.js:570:32)

标签： angular asp.net-core auth0

【解决方案1】：

原来问题出在预渲染模块上。 Auth0 不支持预渲染。 Auth0 工作人员向我指出了这一点。(https://auth0.com/forum/t/asp-net-core-angular2-and-auth0-not-working/4170)

关键部分是通过从 Views/Home/Index.cshtml 中的 <app> 元素中删除 asp-prerender-module 属性来禁用服务器端预渲染。

【讨论】：

我遇到了同样的问题。你是怎么让它工作的？是否必须将 CDN url 放在头部？
@minerva 是的，把它放在你的 _layout.cshtml 页面的 head 标签内。
我将 cdn url 放在 head 标记中，但是，我仍然收到相同的错误“未定义 Auth0Lock”。您能否发布集成了 Auth0 锁的示例项目？
@minerva 抱歉错过了评论。看看auth0.com/forum/t/asp-net-core-angular2-and-auth0-not-working/… 基本上我认为你还没有从 Views/Home/Index.cshtml 中的元素中删除 asp-prerender-module 属性“