使用Angular 4和Angular CLI运行Visual Studio 2017

Question

是否可以在Visual Studio 2017中运行Angular CLI生成的项目？

我尝试生成Hello World应用程序,Visual Studio 2017无法运行它.

ng new HelloWorld

我打开文件夹作为网站,然后点击开始.有没有人解决过这个问题？

"正在加载..."只是永远运行.

Answer 1

答案是否定的,VS无法运行Angular CLI项目..*projAngular CLI应用程序中没有文件可以告诉VS如何处理项目.没有它,VS只是一个代码编辑器.

如果您想开发/调试Angular 4应用程序,那么您可能需要考虑除VS之外的其他IDE.我使用VS Code.有了它,您可以按F5键轻松开始调试Angular CLI应用程序.您仍然需要ng serve从CLI在开发期间运行应用程序.

现在,如果您真的想使用VS 2017进行Angular开发,那么您可以查看可用于VS 的SPA模板.

这些是ASP.Net Core MVC和Angular 4的混合.它们也不错.但是,他们确实有一些微软混合的方式.我的意思是,模板不一定遵循已知的Angular惯例; 他们一直是微软的.如果你能够超越它,那么这些都是一件好事.

我和他们一起玩过,我可以诚实地说他们能很好地完成任务并快速运行.如果VS是您选择的IDE,那可能会很好.当然,Angular CLI不能与这些一起使用.至少,我没有尝试过,我可能不会.

希望这可以帮助你.

更新时间(2017-08-17)

Visual Studio 2017 15.3现在将Angular模板作为常规Web应用程序.NET Core项目模板内置.还包括React和React/Redux模板.您必须在"新建ASP.NET核心应用程序"对话框中选择" ASP.NET Core 2.0"才能将模板视为一种选择.如果选择1.1或更低,模板将不会显示在选项列表中.

更新(2018-02-23)

Microsoft提供了一些用于ASP.NET Core 2.0应用程序的新模板.你可以在这里找到更多关于它们的细节.新的Angular模板包括对Angular CLI的支持.所以,如果你熟悉CLI,那么这应该感觉像家一样.这意味着您可以ng g使用此新模板生成代码.SSR仍然是模板的一部分,虽然你必须做一些编码才能使它工作,这不是什么大问题.

更新(2018-08-28)

正如在这个答案的评论中指出的那样,截至本次更新时,ASP.NET Core Angular模板仍然使用Angular 5生成一个项目(确切地说是5.2.0).我已成功使用ng updateAngular CLI版本6+中提供的命令来更新ASP模板从版本5到6构建的ClientApp(解决方案的Angular部分).为此,您需要具有Angular CLI版本6全局安装在您的机器上(npm i -g @angular/cli).

我知道基础上提交该MS增加了对角6.支持时将提供广泛的是未知的,我的模板库.当它出来时寻找未来的更新!

Answer 2

是的,您可以在Visual Studio 2017中运行Angular CLI生成的项目.但它需要包含在Asp.Net Web应用程序中,该应用程序将为Angular应用程序提供服务.您可以使用以下步骤:

1. 创建一个VS项目(例如"AngularApp").选择"Asp.Net Core Web Application"和"Empty"模板.

2. 将以下内容添加到.csproj文件中的<PropertyGroup>.这使VS不会转换你的Typescript.(我们将使用angular-cli).

   < TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >
   

3. 在父文件夹中打开命令提示符到AngularApp,并使用angular-cli创建您的应用程序.

   ng new AngularApp
   

4. 编辑.angular-cli.json并将"outDir"从"dist"更改为"wwwroot".这是Web应用程序所期望的.

5. 编辑startup.cs并替换"app.Run ...".方法:

   app.UseDefaultFiles();
   app.UseStaticFiles();
   

6. 在Task Runner Explorer中,将Custom构建任务(ng build)绑定到"After Build"事件.

7. 构建并运行您的应用程序.

Answer 3

看起来Steve Sanderson正致力于将CLI集成到DotNet Angular模板中.添加新的基于角色CLI的模板

看看这个回购Angular-CSharp

来自回购的这个中间件让我兴奋不已.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.DefaultPage = "/dist/index.html";
                spa.Options.SourcePath = "ClientApp";

                /*
                // If you want to enable server-side rendering (SSR),
                // [1] In AngularSpa.csproj, change the <BuildServerSideRenderer> property
                //     value to 'true', so that the SSR bundle is built during publish
                // [2] Uncomment this code block
                spa.UseSpaPrerendering(options =>
                {
                    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
                    options.BootModuleBuilder = env.IsDevelopment() ? new AngularCliBuilder(npmScript: "build:ssr") : null;
                    options.ExcludeUrls = new[] { "/sockjs-node" };
                });
                */

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }

干得好Steve!希望它很快就会准备好.

更新:看起来有可用的预览: Microsoft.DotNet.Web.Spa.ProjectTemplates :: 2.0.0-preview1-final