錯誤：http：//localhost/node_modules/@types/node/index.d.ts：嚴格模式下接口是保留字

Question

我正在將AngularJS應用程序集成到Umbraco項目中。 我有一個cs-html文件，該文件調用我的應用程序的main.js文件，並且應用程序顯示在指定的URL中（在項目運行tsc和build之后，所有這些都顯示）。

文件夾結構如下：

UmbracoProject/
              |
              | angularCode/
              |              src/
              |              systemjs-angular-loader.js
              |              systemjs.config.js
              |              tsconfig.js
              |
              |node_modules/
                           @types/node/index.d.ts

我必須配置systemjs.config.js文件，以便從angular應用程序導入的內容能夠找到node_modules。 （之所以這樣設置，是因為在同一項目中還會有其他角度應用程序，因此所有應用程序都共享相同的node_modules）。

我正在使用一些依賴於fabric.js的依賴項，它們需要@ types / node / index.d.ts文件才能運行。

我的systemjs.config.js必須找到以下內容

當我轉到設計的URL時，出現以下錯誤：

Error: http://localhost/node_modules/@types/node/index.d.ts: interface is a reserved word in strict mode (18:0)
  16 | 
  17 | // This needs to be global to avoid TS2403 in case lib.dom.d.ts is present in the same build
  18 | interface Console {
     | ^
  19 |     Console: typeof NodeJS.Console;
  20 |     assert(value: any, message?: string, ...optionalParams: any[]): void;
  21 |     dir(obj: any, options?: NodeJS.InspectOptions): void;
  Instantiating http://localhost/node_modules/@types/node/index.d.ts

在這種問題上有什么線索嗎？

謝謝

Answer 1

這是我的systemjs.config.js文件：

(function (global) {
  System.config({

    useBundles:'true',

    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {


      // our app is within the app folder
        'app': '/LayoutEditor/Client/',

        'plugin-babel': 'npm:/systemjs-plugin-babel/plugin-babel.js',
        'systemjs-babel-build': 'npm:/systemjs-plugin-babel/systemjs-babel-browser.js',
        'systemjs': 'npm:/systemjs/dist/system.js',
        'system-polyfills': 'npm:/systemjs/dist/system-polyfills.js',
        'es6-module-loader': 'npm:/es6-module-loader/dist/es6-module-loader.js',

      // 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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

      //angular material and angular./cdk
      '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
      '@angular/material/core': 'npm:@angular/material/bundles/material-core.umd.js',
      '@angular/material/icon':'npm:@angular/material/bundles/material-icon.umd.js',
      '@angular/material/button':'npm:@angular/material/bundles/material-button.umd.js',
      '@angular/material/menu':'npm:@angular/material/bundles/material-menu.umd.js',
      '@angular/material/list': 'npm:@angular/material/bundles/material-list.umd.js',
      '@angular/material/toolbar':'npm:@angular/material/bundles/material-toolbar.umd.js',
      '@angular/material/expansion':'npm:@angular/material/bundles/material-expansion.umd.js',
      '@angular/material/form-field':'npm:@angular/material/bundles/material-form-field.umd.js',
      '@angular/material/input':'npm:@angular/material/bundles/material-input.umd.js',
      '@angular/material/tooltip':'npm:@angular/material/bundles/material-tooltip.umd.js',
      '@angular/material/chips':'npm:@angular/material/bundles/material-chips.umd.js',
      '@angular/material/sidenav':'npm:@angular/material/bundles/material-sidenav.umd.js',
      '@angular/material/dialog':'npm:@angular/material/bundles/material-dialog.umd.js',
      '@angular/material/grid-list':'npm:@angular/material/bundles/material-grid-list.umd.js',
      '@angular/material/progress-spinner':'npm:@angular/material/bundles/material-progress-spinner.umd.js',
      '@angular/material/checkbox':'npm:@angular/material/bundles/material-checkbox.umd.js',
      '@angular/material/slide-toggle':'npm:@angular/material/bundles/material-slide-toggle.umd.js',
      '@angular/material/card':'npm:@angular/material/bundles/material-card.umd.js',
      '@angular/material/divider' :'npm:@angular/material/bundles/material-divider.umd.js',
        // angular/cdk
        '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
        '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
        '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
        '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
        '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
        '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
        '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
        '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
        '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
        '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
        '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
        '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
        '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
        '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
        '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',


      //angular animations
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',


      //authentication provider
        'angular-oauth2-oidc': 'npm:angular-oauth2-oidc/angular-oauth2-oidc.umd.js',


        //fabricjs and canvas
        'fabric': 'npm:fabric/dist/fabric.js',
        'canvas': 'npm:canvas/index.js',
        'xmldom': 'npm:xmldom/dom.js',
        'url': 'npm:url/url.js',
        'jsdom': 'npm:jsdom/lib/jsdom.js',
        'https': 'npm:@types/node/index.d.ts',
        'http': 'npm:@types/node/index.d.ts',
        'fs': 'npm:@types/node/index.d.ts',



      // other libraries
      'tslib': 'npm:tslib/tslib.js',
      'angular-persistence': 'angular-persistence',
      'rxjs':'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ngx-color-picker': 'npm:ngx-color-picker/bundles/ngx-color-picker.umd.js',
      'ng2-scroll-to-el': 'npm:ng2-scroll-to-el/bundles/ngScrollTo.umd.js',
      'angular2-draggable': 'npm:angular2-draggable/bundles/angular2-draggable.umd.js',
      'sweetalert2': 'npm:sweetalert2/dist/sweetalert2.js',
      'file-saver': 'npm:file-saver/dist/FileSaver.js',
      'ngresizable': 'npm:ngresizable/ngresizable.bundle.js'



      },

     transpiler: 'plugin-babel',

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './LayoutEditor/Client/*.js': {
              loader: '/LayoutEditor/systemjs-angular-loader.js'
            }
        }
      },
      rxjs: {
        defaultExtension: 'js'
        }

    }
  });
})(this);

我認為問題似乎出在轉譯器設置上。