导入NG2自举改变了我TSC输出的目录结构 [英] Importing ng2-bootstrap changes my tsc output directory structure

问题描述

我有以下文件夹结构

  DIST
SRC
  模块1
    m1.ts
  模块2
    m2.ts
.tsconfig.json
...
 

我 TSC 配置为输出到 DIST / JS 因此运行后 NPM运行TSC 我有以下内容：

  DIST
    JS
      模块1
          m1.js
      模块2
          m2.js
SRC
...
 

很多斗争后，我已成功地整合 NG-引导到我的项目。

如果我导入从 NG2-引导在某处我的应用程序，例如：

进口{} ACCORDION_DIRECTIVES从'NG2自举/组件/手风琴';

和运行 NPM运行TSC 我的文件夹结构的变化为：

  DIST
    JS
      node_modules
          NG2自举
             组件
                手风琴
                ...
      SRC
          模块1
             m1.js
          模块2
             m2.js
SRC
....
 

为什么会出现这种情况？

我包括：＆LT;脚本的src =/供应商/ NG2-引导/包/ NG2-bootstrap.js＆GT;＆LT; / SCRIPT＆GT; 在我 index.html的

我能够与angular2做到这一点
＆LT;脚本的src =/供应商/ angular2 /包/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
和
进口从'angular2 /核心 {组件}，这不创建一个 DIST / JS / node_modules / angular2 文件夹

更新

下面是我tsconfig.json的内容

  {
  compilerOptions：{
    目标：ES5
    OUTDIR：./dist/js，
    模块：系统
    moduleResolution：节点，
    sourceMap：真实，
    emitDecoratorMetadata：真实，
    experimentalDecorators：真实，
    removeComments：假的，
    noImplicitAny：假的
  }，
  排除：[
    node_modules
    DIST
    分型/主
    分型/ main.d.ts
  ]
}
 

解决方案

我已经找到了一个解决方案。显然，源 .TS 文件在同一目录 .d.ts 。因此，它编译这些文件。 （我读一路上这地方，我不知道的理由/为什么发生这种情况），但是，解决的办法是做删除所有 .TS igoring *。d.ts 在 node_modules / NG2-引导文件

我创建了一个节点脚本来做到这一点：

  // ./scripts/hack-remove-files.js变种FS =要求（'FS-额外）
VAR水珠=要求（水珠）;VAR的选择= {忽略：** / * d.ts。'};水珠（node_modules / NG2-引导/ ** / *。TS，选项功能（呃，文件）{
    为（i的文件）{
        removeFile（文件[I]）;
    }
}）;水珠（node_modules / NG2文件上传/ ** / *。TS，选项功能（呃，文件）{
    为（i的文件）{
        removeFile（文件[I]）;
    }
}）;removeFile =函数（文件）{
    fs.remove（文件，函数（ERR）{
        如果（ERR）返回console.error（ERR）
    }）
}
 

我运行此作为一个NPM 安装后脚本：

 脚本：{
   ...
   安装后：分型安装和放大器;＆安培;节点./scripts/hack-remove-files.js
}
 

这仅需要做1次，下载包后。

另一个命令行的做法是：

找到node_modules / NG2-引导-name'* .TS| grep的-v'\\ .D \\ $ .TS| xargs的RM

修改

我发现原来的问题，即这是所有提到： https：//开头github.com/valor-software/ng2-bootstrap/issues/128

I have the following folder structure

dist
src
  module1
    m1.ts
  module2
    m2.ts
.tsconfig.json
...

I have tsc configured to output to dist/js so after running npm run tsc I have the following:

dist
    js
      module1
          m1.js
      module2
          m2.js
src
...

After much struggle I have managed to integrate ng-bootstrap into my project.

If I import from ng2-bootstrap somewhere in my app, for example:

import { ACCORDION_DIRECTIVES } from 'ng2-bootstrap/components/accordion';

and run npm run tsc my folder structure changes to:

dist
    js
      node_modules
          ng2-bootstrap
             components
                accordian
                ...
      src
          module1
             m1.js
          module2
             m2.js
src
....

Why is this happening?

I am including: <script src="/vendor/ng2-bootstrap/bundles/ng2-bootstrap.js"></script> in my index.html

I am able to do this with angular2 <script src="/vendor/angular2/bundles/angular2.dev.js"></script> and import {Component} from 'angular2/core' and this does not create a dist/js/node_modules/angular2 folder

Update

Here is the contents of my tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "outDir": "./dist/js",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/main",
    "typings/main.d.ts"
  ]
}

解决方案

I have figured out a solution. Apparently the source .ts files are in the same directory as the .d.ts. and therefore it compiles these files. ( I read this somewhere along the way and I'm not sure the reasoning / why this happens ) however, the solution is to do remove all .ts igoring *.d.ts files in node_modules/ng2-bootstrap

I have created a node script to do this:

// ./scripts/hack-remove-files.js

var fs = require('fs-extra')
var glob = require("glob");

var options = { ignore: '**/*.d.ts'};

glob("node_modules/ng2-bootstrap/**/*.ts", options, function (er, files) {
    for(i in files){
        removeFile(files[i]);
    }
});

glob("node_modules/ng2-file-upload/**/*.ts", options, function (er, files) {
    for(i in files){
        removeFile(files[i]);
    }
});

removeFile = function(file){
    fs.remove(file, function (err) {
        if (err) return console.error(err)
    })
}

I run this as a postinstall script in npm:

"scripts": {
   ...
   "postinstall": "typings install && node ./scripts/hack-remove-files.js",
}

This only needs to be done 1 time, after downloading the package.

another command line approach would be:

find node_modules/ng2-bootstrap -name '*.ts' | grep -v '\.d\.ts$' | xargs rm

EDIT

I have found the original issue where this is all mentioned: https://github.com/valor-software/ng2-bootstrap/issues/128

这篇关于导入NG2自举改变了我TSC输出的目录结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！