tsc compile error in angular when dependencies are out of node_modules folder

Question

I'm trying to migrate my angular 1 code to angular 2. and now I bootstrap my app in hybrid way.I have my angular 2 config files inside node_modules folder. I want to move those file inside public/assets/plugins folder.when i move reflect-metadata and zone.js files outside of the node_modules folder and compile the code using tsc command it gives following errors.

public/assets/plugins/reflect-metadata/test/reflect-definemetadata.ts(5,24):error TS2307: Cannot find module 'chai'.
public/assets/plugins/reflect-metadata/test/reflect-definemetadata.ts(7,1): error TS2304: Cannot find name 'describe'.
public/assets/plugins/reflect-metadata/test/reflect-definemetadata.ts(8,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-definemetadata.ts(12,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-definemetadata.ts(16,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(5,24): error TS2307: Cannot find module 'chai'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(7,1): error TS2304: Cannot find name 'describe'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(8,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(12,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(18,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(25,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-deletemetadata.ts(33,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(5,24): error TS2307: Cannot find module 'chai'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(7,1): error TS2304: Cannot find name 'describe'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(8,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(12,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(18,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(25,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(33,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(39,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/reflect-metadata/test/reflect-getmetadata.ts(46,5): error TS2304: Cannot find name 'it'.
public/assets/plugins/zone.js/dist/zone.js.d.ts(129,11): error TS2451: Cannot redeclare block-scoped variable 'Zone'.
public/assets/plugins/zone.js/dist/zone.js.d.ts(374,14): error TS2300: Duplicate identifier 'HasTaskState'.
public/assets/plugins/zone.js/dist/zone.js.d.ts(383,14): error TS2300: Duplicate identifier 'TaskType'.
public/assets/plugins/zone.js/dist/zone.js.d.ts(482,15): error TS2451: Cannot redeclare block-scoped variable 'Zone'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(22,14): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(23,7): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(25,3): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(50,22): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(112,24): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/jasmine/jasmine.ts(113,4): error TS2304: Cannot find name 'jasmine'.
public/assets/plugins/zone.js/lib/zone.ts(130,11): error TS2451: Cannot redeclare block-scoped variable 'Zone'.
public/assets/plugins/zone.js/lib/zone.ts(409,6): error TS2300: Duplicate identifier 'HasTaskState'.
public/assets/plugins/zone.js/lib/zone.ts(416,6): error TS2300: Duplicate identifier 'TaskType'.
public/assets/plugins/zone.js/lib/zone.ts(542,7): error TS2451: Cannot redeclare block-scoped variable 'Zone' 

although I got above error my other .ts files are correctly compiling and my app also running well. is it compiler tries to compile .ts files relevant to the dependency files? if so how to avoid that or some other error? can someone help me..

tsconfig.json file

 {
"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "experimentalDecorators": true
} }

systemjs.config.js file

   (function (global) {
    System.config({
       transpiler:'typescript',

        typescriptOptions: {
           emitDecoratorMetadata: true },

paths: {
  // paths serve as alias
  'npm:': '/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app_2',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
   '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

  // other libraries
  'rxjs':                      'rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {

    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
},
      'angular2-in-memory-web-api': {
       defaultExtension: 'js'
    },
 });
})(this);`

index.html

  <script src="assets/plugins/zone.js/dist/zone.js"></script>
  <script src="assets/plugins/reflect-metadata/Reflect.js"></script>
  <script src="assets/plugins/systemjs/dist/system.src.js"></script>
  <script src="assets/plugins/systemjs/systemjs.config.js"></script>
  <script>
     System.import('app_2/main').then(null, console.error.bind(console));
  </script>'

file structure:

app -- node_modules
    -- public
        -- app_2
        -- assets
           -- plugins
              --reflect-metadata 
              --zone.js 

Answer 1

Here I found the solution. in my tsconfig file, I exclude the corresponding folder as below.

{
"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "moduleResolution": "node",
    "experimentalDecorators": true

},
 "exclude": [
"public/assets/plugins/angular_2"
]

}

It seems that typescript compiler tries to compile .ts files in zone.js and reflect-metadata. So by excluding that folder can solve the problem. :) But when I move @angular folder into plugins folder, it gives error "cannot find module". I cannot exclude that folder since I need it inside .ts files.

Any solution for that?

Answer 2

In your tsconfig.json you're missing a moduleResolution property to tell tsc how to resolve modules:

moduleResolution: 'node'