在带有 Typescript 的 AngularJs 项目中使用随 Bower 安装的 ag-grid 时，ag-grid 源 ts 文件中的构建错误

Question

我发现 ag-grid 依赖项的结构方式及其文档存在 2 个问题。希望有人可以向我推荐一个好的打字稿 Angular1.x 使用 ag-grid 的示例。

我有一个基本的 AngularJs SPA 项目我安装了 "ag-grid": "3.1.0" bower install ag-grid 通过在 Visual Studio 2015 中向我的 bower.json 添加依赖项，结果它在 bower_components 下添加了以下结构： ag-grid | |-- dist |--src | |--ts | ...

我遇到的问题是 除非我物理删除 /bower_components/ag-grid/src 文件夹 ，否则 Visual Studio 将在该源文件夹下的 ts 文件中显示 926 错误。错误如：

TS2345  Argument of type 'this' is not assignable to parameter of type      'Grid'.
Type 'ag.grid.Grid' is not assignable to type 'ag.grid.Grid'.   TypeScript Virtual Projects C:\MyProject\bower_components\ag-grid\src\ts\grid.ts

以及 bower_components/ag-grid/dist/ag-grid.ts 和 bower_components/ag-grid/src/ts/widgets/agDropdownList.ts 之间的许多重复问题，例如：

TS2300 Build: Duplicate identifier 'AgDropdownList'
TS2300 Build: Duplicate identifier 'AgDropdownList'

我知道有 TS 类和其他名称重复，Visual Studio 2016 不喜欢这样。但这是预期的结果吗？为什么要将源代码包含在凉亭依赖项中。是不是万一我想生成（例如 Gulp）我自己的 dist/ag-grid.js？如果是这样，为什么要包括 dist/ag-grid.ts 文件夹，如果它会发生冲突？

我不太熟悉前端开发和任务运行器策略，所以这可能是一种常见做法，开发人员应该删除 /bower_components/ag-grid/src 文件夹。

如果我删除 /bower_components/ag-grid/src 文件夹而不是删除 bower_components/ag-grid/dist/ag-grid.ts 我仍然会收到 13 个错误，例如

TS2304 Build: Cannot find name 'exports'
TS2304 Build: Cannot find name 'module'

它甚至有一个对 /// <reference path="../../typings/tsd" /> 的引用，但由于根本没有 typings 文件夹而被破坏。

感觉这个依赖有点乱是不是？

让我对 ag-grid 感到困惑的另一件事是，在示例中它说 AngularJs controller would need the ngGrid dependency。然而这个依赖关系没有被使用。这是我没有注入依赖项的示例：

观点：

<div ng-controller="app.shipments.ShipmentsController as shipments">
    <h1>Shipments</h1>
    <div ag-grid="shipments.gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

打字稿控制器：

module app.shipments {
    'use strict';

    interface IShipmentsScope {
        gridOptions: ag.grid.GridOptions;
    }

    class ShipmentsController implements IShipmentsScope {
        static $inject = [
        ]; 
        constructor() {

        }

        gridOptions: ag.grid.GridOptions = {
            columnDefs: [
                { headerName: "Make", field: "make" },
                { headerName: "Model", field: "model" },
                { headerName: "Price", field: "price" }
            ],
            rowData : [
                { make: "Toyota", model: "Celica", price: 35000 },
                { make: "Ford", model: "Mondeo", price: 32000 },
                { make: "Porsche", model: "Boxter", price: 72000 }
            ]
        };
    }

    angular
        .module('app.shipments')
        .controller('app.shipments.ShipmentsController', ShipmentsController);
}

只要我的服务器服务于 JS 依赖项和 2 css:

，它就可以正常工作

<link href="../bower_components/ag-grid/dist/ag-grid.css" rel="stylesheet" />
<link href="../bower_components/ag-grid/dist/theme-fresh.css" rel="stylesheet" />
<script src="../bower_components/ag-grid/dist/ag-grid.js"></script>

我想我要的是澄清为什么 Bower 依赖以这种方式构建，在 VS 中使用这种依赖进行开发时的常见做法是什么？抱怨 TS 错误，并澄清是否有必要将 agGrid 依赖项注入 AngularJs 控制器 。 :-) 谢谢！

Answer 1

我指示 VS2015 不要在构建时编译任何 TypeScript，而不必删除 src 文件夹（我通过 gulp 监视任务这样做），这并不理想，但可以避免我看到重复的错误.

我是通过右键单击项目 > 构建 > 取消勾选 在构建时编译 TypeScript 选项

我仍然不知道为什么根据文档（不是），Angular 1.x 需要在控制器中注入 agGrid。不过这个问题可以关闭了

在带有 Typescript 的 AngularJs 项目中使用随 Bower 安装的 ag-grid 时，ag-grid 源 ts 文件中的构建错误

Build errors in ag-grid source ts files when using ag-grid installed with bower in an AngularJs with Typescript project

angularjs

typescript

bower

visual-studio-2015

ag-grid