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

答

答案是否定，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仍然是模板的一部分，虽然你必须做一些编码才能使它工作，而不是一个大问题。

+0

任何博客可用于内置角模板 - Visual Studio 2017 15.3？ – k11k2

+2

有一点关于[Core 2.0]（https://blogs.msdn.microsoft.com/webdev/2017/08/14/announcing-asp-net-core-2-0/）公告中的模板，但没有详细说明。如果我遇到任何问题，我会在这里发布。 –

+0

是的，刚刚实施了poc :)。我也将继续发帖。 – k11k2

答

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

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

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

答

在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运行该项目一样简单。

答

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

创建VS项目（例如“AngularApp”）。选择“Asp.Net核心Web应用程序”和“空白”模板。
将以下内容添加到.csproj文件中的< PropertyGroup>中。这样可以防止VS转录你的Typescript。（我们将使用angular-cli）。
```
<TypeScriptCompileBlocked> true </TypeScriptCompileBlocked> 
```
开启在父文件夹到AngularApp一个命令提示，并使用角-CLI应用程式。
```
ng new AngularApp 
```
编辑.angular-cli.json变 “OUTDIR”，从 “DIST” 到 “wwwroot的”。这是网络应用期望的地方。
编辑startup.cs并替换“app.Run ...”。方法有：
```
app.UseDefaultFiles(); 
app.UseStaticFiles(); 
```
在任务运行资源管理器，自定义生成任务（NG版本）绑定到“构建后”事件。
构建并运行您的应用程序。

+0

我无法通过任务运行程序获取ng build来运行（使用Gulp），但是如果你把它作为一个Post Build事件放在项目属性中，它就可以工作。唯一的问题是让它在更改的文件上运行，而不是需要构建。 –

+0

我在Task Runner中运行“ng build”时没有问题。但是我在VS中调试项目的Typescript代码时遇到了问题。因此我将代码迁移到使用DotNet Angular模板。你可以看到我在这里使用的步骤：https://stackoverflow.com/questions/46665314/migrating-an-existing-angular4-cli-to-net-core-2-angular-template-project/47256341#47256341 –

答

看起来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

+1

新模板非常好。它工作得很好，只要你只需要一个SPA。为多个SPA配置（或者在Angular的情况下，具有多个本地化编译的单个SPA）被认为是可能的，但目前还没有文档。我正在研究它，但目前为止没有运气...... – asgallant

答

如果你想安装，你可以在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项目。

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

相关推荐