意外的標記< - 評估/lib/angular2-modal/plugins/bootstrap.js - 在lib文件夾中缺少文件bootstrap.js

Question

我在加載angular2-mode彈出窗口時遇到了一些問題。獲取此異常「意外令牌< - 丟失的文件的lib/angular2模態/插件/ bootstrap.js」 編譯之後，當我試圖啓動應用程序，它試圖在文件評估路徑

「Evaluating http://localhost:49928/lib/angular2-modal/plugins/bootstrap.js」

但是在指定位置不存在這樣的文件，因此應用程序崩潰。在lib/angular2-modal/plugins /文件夾下，bootstrap.js文件不存在。但爲什麼它在這裏尋找這個文件？

Error: SyntaxError: Unexpected token < 
     at eval (<anonymous>) 
     at Object.eval (http://localhost:49928/app/AppModule.js:13:19) 
     at eval (http://localhost:49928/app/AppModule.js:110:4) 
     at eval (http://localhost:49928/app/AppModule.js:111:3) 
    Evaluating http://localhost:49928/lib/angular2-modal/plugins/bootstrap.js 
    Evaluating http://localhost:49928/app/AppModule.js 
    Evaluating http://localhost:49928/app/main.js 
    Error loading http://localhost:49928/app/main.js 

SystemJS.Config.js文件如下

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      //'npm:': 'node_modules/' 
      'npm:': 'lib/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // 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/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', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 

      'angular2-modal': 'npm:angular2-modal' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'angular2-modal': { 
       main: 'bundles/angular2-modal.umd', 
       defaultExtension: 'js', 
      } 
     } 
    }); 
})(this); 

我的package.json

"dependencies": { 
    "@angular/common": "~4.1.1", 
    "@angular/compiler": "~4.1.1", 
    "@angular/core": "~4.1.1", 
    "@angular/forms": "~4.1.1", 
    "@angular/http": "~4.1.1", 
    "@angular/platform-browser": "~4.1.1", 
    "@angular/platform-browser-dynamic": "~4.1.1", 
    "@angular/router": "~4.1.1", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.6", 
    "angular-in-memory-web-api": "~0.3.0", 
    "systemjs": "0.19.40", 
    "bootstrap": "3.3.7", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.8.4", 
    "angular2-modal": "2.0.3" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "~2.1.0", 

    "canonical-path": "0.0.2", 
    "tslint": "^3.15.1", 
    "lodash": "^4.16.4", 
    "jasmine-core": "~2.4.1", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~4.0.14", 
    "rimraf": "^2.5.4", 

    "@types/node": "^6.0.46", 
    "@types/jasmine": "2.5.36", 

    "gulp": "^3.9.1", 
    "gulp-conventional-changelog": "^1.1.0", 
    "gulp-git": "^1.12.0", 
    "gulp-header": "^1.8.8", 
    "gulp-shell": "^0.5.2", 
    "gulp-sourcemaps": "^2.2.0" 
    } 

AppModule.ts

import { NgModule, ErrorHandler }   from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }  from '@angular/forms'; 
import { HttpModule }  from '@angular/http'; 
import { NgbModule }  from '@ng-bootstrap/ng-bootstrap'; 

import { ModalModule } from 'angular2-modal'; 
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap'; 
import { Overlay, overlayConfigFactory } from 'angular2-modal'; 
import { Modal } from 'angular2-modal/plugins/bootstrap'; 
import { DialogRef, ModalComponent, CloseGuard } from 'angular2-modal'; 
import { BSModalContext } from 'angular2-modal/plugins/bootstrap'; 
... 

@NgModule({ 
    imports: 
    [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     ModalModule.forRoot(), 
     BootstrapModalModule, 
     LOGIN_ROUTER_PROVIDERS 
    ], 
    declarations: 
    [ 
     AppLoader, 
     Login, 
     Home, 
     .. 
    ], 
    providers: 
    [ 
     .... 
     { 
      provide: ErrorHandler, useClass: CustomErrorHandler 
     } 
    ], 
    entryComponents: 
    [ 
     .... 
     StoryBook, AddStoryBook 
    ], 
    bootstrap: [AppLoader] 
}) 

export class AppModule { } 

任何想法，爲什麼我收到這個錯誤？爲什麼它在angular2-modal文件夾下查找plugins/bootstrap.js文件？

Answer 1

我已解決此問題。

我改變了我的systemjs.config.js文件，如下所示，現在它工作。

(function (global) { 
var ngVer = '@4.1.1'; // lock in the angular package version; do not let it float to current! 
    var routerVer = '@4.1.1'; // lock router version 
    var formsVer = '@4.1.1'; // lock forms version 


    var angular2ModalVer = '@2.0.2'; 
    var plugin = 'bootstrap'; // js-native/vex 

    global.angular2ModalVer = angular2ModalVer; 


    //map tells the System loader where to look for things 
    var map = { 
     'app': 'app', 

     '@angular': 'https://unpkg.com/@angular', // sufficient if we didn't pin the version 
     '@angular/router': 'https://unpkg.com/@angular/router' + routerVer, 
     '@angular/forms': 'https://unpkg.com/@angular/forms' + formsVer, 

     'angular2-in-memory-web-api': 'https://unpkg.com/angular2-in-memory-web-api', // get latest 
     'rxjs': 'https://unpkg.com/rxjs@5.0.1', 
     'ts': 'https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js', 
     'typescript': 'https://unpkg.com/typescript@1.9.0-dev.20160409/lib/typescript.js', 


     'angular2-modal': 'https://unpkg.com/angular2-modal' + angular2ModalVer 
    }; 

    //packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     app: { 
      main: './main.js', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     }, 
     'angular2-in-memory-web-api': { 
      main: './index.js', 
      defaultExtension: 'js' 
     }, 
     'angular2-modal': { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' } 
     //'angular2-modal': { 
     // main: 'bundles/angular2-modal.umd', 
     // defaultExtension: 'js', 
     //}, 
     //'angular2-modal/bundles/bootstrap': { 
     // main: 'angular2-modal.bootstrap.umd', 
     // defaultExtension: 'js' 
     //} 
    }; 
    //var packages = { 
    // 'app': { main: './main.js', defaultExtension: 'ts' }, 
    // 'rxjs': { defaultExtension: 'js' }, 
    // 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    // 'angular2-modal': { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' } 
    //}; 

    // UMD bundles 
    map[`angular2-modal/plugins/${plugin}`] = map['angular2-modal'] + '/bundles'; 
    packages[`angular2-modal/plugins/${plugin}`] = { defaultExtension: 'js', main: `angular2-modal.${plugin}.umd` }; 

    // Uncomment to use Individual files/modules 
    // map[`angular2-modal/plugins/${plugin}`] = map['angular2-modal'] + `/plugins/${plugin}`; 
    // packages['angular2-modal'] = { defaultExtension: 'js', main: 'index' }; 
    // packages[`angular2-modal/plugins/${plugin}`] = { defaultExtension: 'js', main: `index` }; 




    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'upgrade', 
    ]; 

    // Add map entries for each angular package 
    // only because we're pinning the version with `ngVer`. 
    ngPackageNames.forEach(function (pkgName) { 
     map['@angular/' + pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer; 
    }); 

    // Add package entries for angular packages 
    ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function (pkgName) { 

     // Bundled (~40 requests): 
     packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 

     // Individual files (~300 requests): 
     //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
     // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER 
     transpiler: 'ts', 
     typescriptOptions: { 
      tsconfig: true 
     }, 
     meta: { 
      'typescript': { 
       "exports": "ts" 
      } 
     }, 
     map: map, 
     packages: packages 
    }; 

    System.config(config); 

})(this);