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

Question

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

我尝试生成Hello World应用程序，并且Visual Studio 2017无法运行它。

ng new HelloWorld 

我打开文件夹作为网站，并单击开始。有没有人解决了这个问题？

“Loading ...”只是永远运行。

Answer 1

答案是否定，VS无法运行Angular CLI项目。 Angular CLI应用程序中没有.*proj文件，它会告诉VS如何处理该项目。没有这个，VS只是一个代码编辑器。

如果你想开发/调试一个Angular 4应用程序，那么你可能想要考虑除了VS之外的另一个IDE。我使用VS Code。有了它，您可以按F5键轻松开始调试Angular CLI应用程序。您仍然需要CLI中的ng serve才能在开发过程中运行该应用程序。

现在，如果你真的想用VS 2017做Angular开发，那么你可以看看VS的SPA Templates。

这些是ASP.Net Core MVC和Angular 4的混合体。它们并不算太坏。但是，他们确实有一点微软的混合方式。我的意思是，模板不一定遵循已知的Angular约定;他们已经微软了。如果你能过去，那么这些可以是一件好事。

我已经和他们玩过了，我可以诚实地说他们工作得很好，可以快速启动和运行。如果VS是您选择的IDE，那可以很好。当然，Angular CLI不能与这些一起使用。至少，我没有尝试过，我可能不会。

希望这可以帮助你。

UPDATE（2017年8月17日）

的Visual Studio 2017年15.3现在有内置的作为常规的Web应用程序的.NET的核心项目模板的角模板。 React和React/Redux模板也包含在内。您必须在“新建ASP.NET核心应用程序”对话框中选择ASP.NET Core 2.0才能将模板视为选项。如果您选择1.1或更低，模板将不会显示在选项列表中。

UPDATE（2018年2月23日）

微软已经提供了一些新的模板，为使用ASP.NET 2.0的核心应用。你可以找到更多关于他们的细节here。新的Angular template包括对Angular CLI的支持。所以，如果你熟悉CLI，那么这应该会更像家庭感受。这意味着您可以通过ng g命令来使用此新模板生成代码。 SSR仍然是模板的一部分，虽然你必须做一些编码才能使它工作，而不是一个大问题。

Answer 2

您应该使用Typescript项目类型，如果您使用webpack，请禁用嵌入式visual studio类型的脚本编译。

然后，您必须通过“ng new”命令将整个角度cli生成的目录复制到打字稿项目的根目录。

现在你有智能感知和你需要发展的一切。 我个人更喜欢在powershell standalone windows应用程序中使用cli，但包管理器控制台与Powerhell完全相同，因此它取决于您。

Answer 3

在vs 2017中运行角度cli脚本绝对有可能。因此运行该项目非常简单。 但是，visual studio仍然没有运行该项目。你只是从视觉工作室开始。我知道这样做的

一种方法是添加脚本命令你package.json

例如：其实这些脚本将默认添加时，由角生成的项目

"scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
} 

CLI。

然后调用该脚本就像从Node.js Interactive窗口输入.npm [ProjectName] run-script build或.npm [ProjectName] run-script start运行该项目一样简单。

Answer 4

是的，您可以在Visual Studio 2017中运行Angular CLI生成的项目。但它需要包含在Asp.Net Web应用程序中，该应用程序将用于Angular应用程序。您可以使用以下步骤：

1. 创建VS项目（例如“AngularApp”）。选择“Asp.Net核心Web应用程序”和“空白”模板。

2. 将以下内容添加到.csproj文件中的< PropertyGroup>中。这样可以防止VS转录你的Typescript。 （我们将使用angular-cli）。

   <TypeScriptCompileBlocked> true </TypeScriptCompileBlocked> 
   

3. 开启在父文件夹到AngularApp一个命令提示，并使用角-CLI应用程式。

   ng new AngularApp 
   

4. 编辑.angular-cli.json变 “OUTDIR”，从 “DIST” 到 “wwwroot的”。这是网络应用期望的地方。

5. 编辑startup.cs并替换“app.Run ...”。方法有：

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

6. 在任务运行资源管理器，自定义生成任务（NG版本）绑定到“构建后”事件。

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

Answer 5

看起来Steve Sanderson正在将CLI集成到DotNet Angular模板中。 Add new Angular CLI-based template

看看这个回购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"); 
       } 
      }); 
     } 

伟大的工作史蒂夫！希望它很快就会准备好。

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

Answer 6

如果你想安装，你可以在NuGet包管理器使用Install-Package Angular4 -Version 1.1.0，并按照下列步骤操作：

Angular 4 
********* 

Prerequisites 
````````````` 
1. Download and Install Node js 
2. Install Visual studio 2015 update 3 or above 
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links) 

Follow the steps to install package. 
```````````````````````````````````` 
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project 
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0' 

Follow the steps after package installation 
``````````````````````````````````````````` 
1. Open Node.js Command Prompt 
2. Navigate to project location(use commands such as pushd,cd etc) 
3. Run the command 'npm install' 

它可以帮助你在Visual Studio 2017/2015上创建一个Angular4项目。