VS2017搭建ASP.Net Core和Angular5项目

- 日理万妓 2022-06-02 06:57 166阅读 0赞

本文是使用Angular5TemplateCore开发一个适用于ASP.NET Core的Angular 5应用程序。我们来详细看看

先决条件

确保您已经在计算机上安装了所有先决条件。如果没有，那么先下载并安装所有。

1.  首先，从这个链接下载并安装Visual Studio 2017 
2.  下载并安装.NET Core 2.0
3.  下载并安装Node.js v9.0或更高版本。我已经安装了v9.1.0（下载链接）

注意

在启动项目之前，请确保您的计算机上安装了Visual Studio 2.0和.NET Core 2.0或更高版本。如果没有，请从上面的链接下载并安装。

Node.js的安装：Node.js的官网：https://nodejs.org/en/，在您的计算机上安装Node.js 9.0或更高版本。（安装步骤按照安装向导安装就行）

![SouthEast][]

安装Angular5TemplateCore：

打开Visual Studio 2017在主界面的菜单栏，步骤：工具—》扩展和更新—》联机—》搜索框中输入angular。从列表中，搜索Angular5TemplateCore并单击下载，重启VS，待安装完成打开VS即可。

![SouthEast 1][]

安装完成后，就可以使用ASP.NET Core Template构建第一个Angular 5应用程序了。

创建项目：创建我们的第一个Angular 5和ASP.NET Core应用程序

步骤1创建Angular5TemplateCore

安装完上面列出的所有先决条件和Angular5TemplateCore后，单击开始->程序-> Visual Studio 2017 -> Visual Studio 2017，在桌面上

菜单栏点击文件->新建->项目->选择Visual C＃->选择Angular5TF->输入您的项目名称，然后单击确定。

![SouthEast 2][]

至此，项目搭建完成，点击菜单栏的运行按钮就可以运行项目了，运行界面如图：

![SouthEast 3][]

搭建项目中遇到两个问题，其中一个是

错误提示：System.AggregateException   HResult=0x80131500   Message=One or more errors occurred. (Failed to start Node process. To resolve this:.  \[1\] Ensure that Node.js is installed and can be found in one of the PATH directories.     Current PATH enviroment variable is: C:\\Program Files\\Docker\\Docker\\Resources\\bin;E:\\Program Files (x86)\\Python36-32\\Scripts\\;E:\\Program Files (x86)\\Python36-32\\;C:\\ProgramData\\Oracle\\Java\\javapath;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files\\Microsoft SQL Server\\130\\Tools\\Binn\\;C:\\Program Files\\dotnet\\;C:\\Program Files (x86)\\NVIDIA Corporation\\PhysX\\Common;";E:\\Maven\\apache-maven-3.5.2\\bin;";"E:\\Program Files\\Java\\jdk1.8.0\_144\\bin;E:\\Program Files\\Java\\jdk1.8.0\_144\\jre\\bin";C:\\Program Files (x86)\\Microsoft SQL Server\\Client SDK\\ODBC\\130\\Tools\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\Tools\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\DTS\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\Tools\\Binn\\ManagementStudio\\;E:\\Program Files\\Git\\cmd;C:\\Users\\xiaoyue\\AppData\\Local\\Microsoft\\WindowsApps;E:\\Program Files\\Microsoft VS Code\\bin;E:\\Program Files\\Java\\jdk1.8.0\_144\\jre\\bin     Make sure the Node executable is in one of those directories, or update your PATH.  \[2\] See the InnerException for further details of the cause.)   Source=System.Private.CoreLib   StackTrace:    at System.Threading.Tasks.Task\`1.GetResultCore(Boolean waitCompletionNotification)    at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options)    at OnlineShoppingSystemWithAngular5.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env) in D:\\Visual Studio\\C\#程序\\C\#web网页\\ASP.NET Core\\OnlineShoppingSystemWithAngular5\\OnlineShoppingSystemWithAngular5\\Startup.cs:line 30  内部异常 1: InvalidOperationException: Failed to start Node process. To resolve this:.  \[1\] Ensure that Node.js is installed and can be found in one of the PATH directories.

解决方法：当时重启vs就行了，原因是：任何程序在启动时不能动态加载环境变量中的Path值，而我在安装好Node.js之后就直接运行项目了，发生了异常提示错误，只好在网上找了解决方法，附上解决方法的URL:[https://stackoverflow.com/questions/43761278/nodejs-installed-but-getting-error-ensure-that-node-js-is-installed-and-can-be][https_stackoverflow.com_questions_43761278_nodejs-installed-but-getting-error-ensure-that-node-js-is-installed-and-can-be]

![SouthEast 4][]

第二个问题是异常提示：

System.AggregateException   HResult=0x80131500   Message=One or more errors occurred. (Cannot find module './ClientApp/dist/vendor-manifest.json' Error: Cannot find module './ClientApp/dist/vendor-manifest.json'     at Function.Module.\_resolveFilename (module.js:555:15)     at Function.Module.\_load (module.js:482:25)     at Module.require (module.js:604:17)     at require (internal/module.js:11:18)     at module.exports (D:\\Visual Studio\\C\#程序\\C\#web网页\\ASP.NET Core\\OnlineShoppingSystemWithAngular5\\OnlineShoppingSystemWithAngular5\\webpack.config.js:63:27)     at createWebpackDevServer (D:\\Visual Studio\\C\#程序\\C\#web网页\\ASP.NET Core\\OnlineShoppingSystemWithAngular5\\OnlineShoppingSystemWithAngular5\\node\_modules\\aspnet-webpack\\WebpackDevMiddleware.js:194:31)     at createWebpackDevServer (C:\\Users\\xiaoyue\\AppData\\Local\\Temp\\f5hjtwlp.td1:74:50)     at C:\\Users\\xiaoyue\\AppData\\Local\\Temp\\q2ukbyen.h0o:114:19     at IncomingMessage.<anonymous> (C:\\Users\\xiaoyue\\AppData\\Local\\Temp\\q2ukbyen.h0o:133:38)     at IncomingMessage.emit (events.js:159:13))   Source=System.Private.CoreLib   StackTrace:    at System.Threading.Tasks.Task\`1.GetResultCore(Boolean waitCompletionNotification)    at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options)    at OnlineShoppingSystemWithAngular5.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env) in D:\\Visual Studio\\C\#程序\\C\#web网页\\ASP.NET Core\\OnlineShoppingSystemWithAngular5\\OnlineShoppingSystemWithAngular5\\Startup.cs:line 31  内部异常 1: NodeInvocationException: Cannot find module './ClientApp/dist/vendor-manifest.json' Error: Cannot find module './ClientApp/dist/vendor-manifest.json'     at Function.Module.\_resolveFilename (module.js:555:15)     at Function.Module.\_load (module.js:482:25)     at Module.require (module.js:604:17)     at require (internal/module.js:11:18)     at module.exports (D:\\Visual Studio\\C\#程序\\C\#web网页\\ASP.NET Core\\OnlineShoppingSystemWithAngular5\\OnlineShoppingSystemWithAngular

解决方法：解决方法在[GitHub][]中

![SouthEast 5][]

在“scripts”部分下的package.json中添加："postinstall": "webpack --config webpack.config.vendor.js"

[SouthEast]: /images/20220602/882f9787f3d04bf38755bf23240f89e7.png
[SouthEast 1]: /images/20220602/99b48f1f0b9540a3b5f80482e4038e40.png
[SouthEast 2]: /images/20220602/ad6cfdd2617a4ddf81775ba1b80da999.png
[SouthEast 3]: /images/20220602/501272f5a96e4e9c9e1022cf97b05ca5.png
[https_stackoverflow.com_questions_43761278_nodejs-installed-but-getting-error-ensure-that-node-js-is-installed-and-can-be]: https://stackoverflow.com/questions/43761278/nodejs-installed-but-getting-error-ensure-that-node-js-is-installed-and-can-be
[SouthEast 4]: /images/20220602/7f46a9b33ee742bd8357f2f84613e7f4.png
[GitHub]: https://github.com/aspnet/JavaScriptServices/issues/780
[SouthEast 5]: /images/20220602/607d6f698c364e6d852827ad0c80c982.png