我在加载 angular2-modal 弹出窗口时遇到了一些问题。收到此异常"意外令牌<- 缺少文件 libular2-modal/plugins/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);
我的包.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 文件夹下寻找插件/引导.js文件？
我已经解决了这个问题。
我已经按照下面更改了我的 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);