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。我试图在步骤中明确表达，但不会陷入太多细节。让我知道是否有助于获得更多信息。