使用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項目。