systemjs.config.js在Visual Studio 2017中不起作用？ （ag-grid）

Question

我想在我的ASP.net MVC項目中安裝Ag-grid，現在在VS2017中。

一切似乎就像在例如：https://www.ag-grid.com/ag-grid-angular-systemjs/?framework=angular#gsc.tab=0

除了編譯器告訴我的東西像/ AG-網/主無法找到（在一些我的TS文件都涉及到格）。谷歌搜索告訴我，它必須與systemjs.config.js

這個問題似乎與systemjs.config.js。告訴我一些關於無效文本標記的信息，它是一個無效的xml文檔？ 它在項目瀏覽器中也標記爲紅色。說「簽入」。

我完全不知道現在發生了什麼，請幫忙。

（抱歉，如果錯誤代碼是一個有點含糊，我只好把它們翻譯）

Answer 1

這是一個相當寬泛的問題，因爲它取決於如果您正在使用ASP DOTNET的框架或DOTNET的ASP核心。這也取決於你是否在做一個真正的SPA（單頁面應用程序），或者你是否也在混合一些RAZR頁面​​。

我正在爲ASP.NET，Angular和Ag-Grid系列教程工作。我有一個解決方案，用於Visual Studio 2017 ASP DotNet Core基礎網站，用於提供數據的REST控制器，以及用於Windows 7上的Angular 4 SPA的單個index.html。這些步驟對我來說都很合適。這是答案，但這是因爲有很多步驟可以讓ASP DotNet Core，MVC，Angular 4和ag-grid一起合作。

摘要

• 做一個空的ASP.NET核心的Web應用程序（.NET核心）

• 修復Startup.cs只投放的wwwroot/index.html的

• 將簡單的ag網格角度樣本下載到web文件夾中，告訴它 將轉發的輸出複製到wwwroot文件夾中

• 運行Visual Studio中，它就會打開從C＃代碼的瀏覽器提供

詳細步驟

1. 此例子的 角4 SPA頁面，顯示在動作AG-格假設我將製作一個解決方案c：\ code \ Elephant \ ElephantSolution和一個子目錄... \ ElephantSolution \ ElephantWeb和一個web項目。 「Elephant」這個名字是隨機的，實際的目錄位置並不重要，但我保持一致，所以這些步驟更有意義。

2. 的Visual Studio 2017年，項目文件/新建/項目

3. 挑選模板/的Visual C＃/。NET內核/ ASP.NET核心Web應用程序（。NET核心）

   • 名稱：ElephantWeb
   • 位置：C：\代碼\大象
   • 解決方案名稱：ElephantSolution
   • ASP.NET 1.1的核心模板：空

4. 我可以在Visual Studio中運行它並獲取「Hello World！」如預期。

5. 接下來，我必須插入Angular 4.爲了準備，告訴Visual Studio不要嘗試編譯打字稿（否則它會嘗試編譯所有的角）。編輯ElephantWeb.csproj，在<ProjectGroup>之內;添加：

    
       <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> 
   

6. 另外補充下<Project>

    
       <ItemGroup> 
        <Compile Remove="angular\node_modules\**" /> 
        <Content Remove="angular\node_modules\**" /> 
        <EmbeddedResource Remove="angular\node_modules\**" /> 
        <None Remove="angular\node_modules\**" /> 
       </ItemGroup> 
   

7. 這一部分如果如果您還沒有您尚未安裝的NodeJS

8. ，安裝角

   npm install @angular/cli --global

9. 從DOS，進入web項目目錄

    
   mkdir c:\code\Elephant\ElephantSolution\ElephantWeb\angular 
   cd c:\code\Elephant\ElephantSolution\ElephantWeb\angular 
   

10. 複製AG-電網從https://github.com/ag-grid/ag-grid-angular-seed/tree/master/angular-cli角樣品到... \ ElephantWeb \角

11. 告訴角度編譯到Visual Studio 「wwwroot文件」 文件夾而不是「dist」。這使Visual Studio服務器角網頁。編輯... \ ElephantWeb \ angular.angular-cli.json，改變

    "outDir": "dist",

    到

    "outDir": "..\wwwroot",

12. 從DOS，執行初始編譯強制的角度理清所有依賴和下載。

    npm install

13. 做一些Visual Studio中的NuGet更新做好準備在Visual Studio

    • 服務的角度，從包管理器控制檯安裝，包裝Microsoft.AspNetCore.StaticFiles -version 1.1.2
    • Install-Package Microsoft.AspNetCore.Mvc -version 1.1.3
    • Install-Package Microsoft.AspNetCore.Session -version 1.1.2

14. 告訴Visual Studio Web項目將所有非API調用提供給「index.html」。更改啓動。CS啓動類這樣的：

     
        public class Startup 
        { 
         public void ConfigureServices(IServiceCollection services) 
         { 
          services.AddMvc(); 
         } 
         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
         { 
          app.Use(async (context, next) => 
          { 
           await next(); 
           if (context.Response.StatusCode == 404 && 
            !Path.HasExtension(context.Request.Path.Value) && 
            !context.Request.Path.Value.StartsWith("/api/")) 
           { 
            context.Request.Path = "/index.html"; 
            await next(); 
           } 
          }); 
          app.UseMvcWithDefaultRoute(); 
          app.UseStaticFiles(); 
          loggerFactory 
           .AddConsole(); 
         } 
        } 
    

15. 編譯的角度，從DOS，並保留作爲編譯發生變化

     
    cd \code\Elephant\ElephantSolution\ElephantWeb\angular 
    ng build --watch 
    

16. 確保它轉儲角的腳手架的index.html和transpiled * .js文件之中。 .. \ ElephantWeb \ wwwroot

17. 運行Visual Studio，它應該編譯C＃代碼，啓動瀏覽器，並顯示ag-grid示例。

讓我知道是否有任何這種格式變得混亂。因爲有太多的文件和步驟，所以這實際上不適用於Plunkr。我試圖在步驟中明確表達，但不會陷入太多細節。讓我知道是否有助於獲得更多信息。