当依赖项超出 node_modules 文件夹时，角度中的 tsc 编译错误

Question

我正在尝试将我的 angular 1 代码迁移到 angular 2。现在我以混合方式引导我的应用程序。我在 node_modules 文件夹中有我的 angular 2 配置文件。我想将这些文件移到 public/assets/plugins 文件夹中。当我将 reflect-metadata 和 zone.js 文件移到 node_modules 文件夹之外并使用 tsc 命令编译代码时，它会出现以下错误。

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' 

虽然我遇到了上述错误，但我的其他 .ts 文件正在正确编译并且我的应用程序也运行良好。 是编译器尝试编译与依赖文件相关的 .ts 文件吗？如果是这样，如何避免该错误或其他错误？谁能帮帮我。。

tsconfig.json 文件

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

systemjs.config.js 文件

   (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>'

文件结构：

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

Answer 1

在这里我找到了解决方案。在我的 tsconfig 文件中，我排除了相应的文件夹，如下所示。

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

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

}

似乎 typescript 编译器试图编译 zone.js 和 reflect-metadata 中的 .ts 文件。因此，通过排除该文件夹可以解决问题。 :) 但是当我将@angular 文件夹移动到插件文件夹时，它会给出错误“找不到模块”。我无法排除该文件夹，因为我需要在 .ts 文件中使用它。

有什么解决办法吗？

Answer 2

在您的 tsconfig.json 中，您缺少一个 moduleResolution 属性来告诉 tsc 如何解析模块：

moduleResolution: 'node'