Importing ng2-bootstrap changes my tsc output directory structure

问题

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"
  ]
}

回答1:

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

来源：https://stackoverflow.com/questions/35648347/importing-ng2-bootstrap-changes-my-tsc-output-directory-structure

标签

typescript

angular

tsc

ng2-bootstrap