1
我的angular2應用程序目前可用於最新的Chrome和Firefox。IE11問題：從main.js中將app.module.js加載爲./app.module時出錯
爲我的模塊加載使用我的版本process和systemjs的gulp。
試圖在IE11查看應用程序無法通過顯示在頁面上進行任何操作，把這個錯誤在控制檯：
"(SystemJS) Syntax error
SyntaxError: Syntax error
at ZoneDelegate.prototype.invoke (localhost:3000/lib/zone.js/dist/zone.js:201:13)
at Zone.prototype.run (localhost:3000/lib/zone.js/dist/zone.js:96:17)
at Anonymous function (localhost:3000/lib/zone.js/dist/zone.js:462:17)
Evaluating localhost:3000/app/app.module.js
Error loading localhost:3000/app/app.module.js as "./app.module" from localhost:3000/app/main.js"
這個錯誤似乎很普通的我，但任何指針什麼嘗試下一個會是不勝感激。
到目前爲止，我已檢查網絡選項卡以查看請求和響應，以確保它實際上獲取我的app.module.js。正如預期的那樣正確返回app.module.js文件。
網絡選項卡中的所有請求都是成功的，並且都返回我期望的文件。
我搜索了任何可能需要在IE11中工作的polyfills/shim。
我已經在我的應用程序的早期部分進行了日誌記錄，例如main.ts,app.module.ts，但似乎沒有人調用。
索引文件
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Example</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css"/>
<link rel="stylesheet" href="css/bootstraptheme/style.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="css/bootstraptheme/homer.js"></script>
<script src="lib/core-js/client/shim.min.js"></script>
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/systemjs/dist/system-polyfills.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<script src="lib/.tmp/Rx.js"></script>
<script src="systemjs.config.js"></script>
<script>
conf = JSON.parse(decodeURIComponent("#{encodeURIComponent(JSON.stringify(conf))}"));
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
import { Ng2CompleterModule } from "ng2-completer";
import { TooltipModule } from "ng2-tooltip";
import { DndModule } from 'ng2-dnd';
import { routing } from './app.routing';
import { CompanyService } from './services/company.service';
import { LocationService } from './services/location.service';
import { AppComponent } from './app.component';
import { ReportsComponent } from './reports/reports.component';
import { CalendarComponent } from './calendar/calendar.component';
import { CalendarFilter } from './calendar/calendar.filter.component';
import { DatePicker, ModalContentBase, Dropdown } from './sharedComponents/index';
import { LoginComponent } from './login/login.component';
import { SetDatesModalWindow } from './calendar/dialogs/set-dates-modal';
import { ViewCalendarDetailsModalWindow } from './calendar/dialogs/view-calendar-details-modal';
@NgModule({
imports:
[
BrowserModule,
FormsModule,
routing,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
BootstrapModalModule,
Ng2CompleterModule,
TooltipModule,
DndModule.forRoot()
],
exports: [DndModule],
declarations:
[
AppComponent,
ReportsComponent,
LoginComponent,
CalendarComponent,
CalendarFilter,
DatePicker,
ModalContentBase,
Dropdown,
SetDatesModalWindow,
ViewCalendarDetailsModalWindow
],
schemas: [CUSTOM_ELEMENTS_SCHEMA ],
providers: [ CompanyService, LocationService ],
bootstrap: [ AppComponent ],
entryComponents: [ SetDatesModalWindow, ViewCalendarDetailsModalWindow ]
})
export class AppModule { }
的package.json
{
"name": "example",
"version": "0.0.0",
"private": true,
"scripts": {
"clean": "gulp clean",
"compile": "gulp compile",
"build": "gulp build",
"start": "concurrent --kill-others \"gulp watch\" \"node ./bin/www\"",
"postinstall": "typings install"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"angular2-fontawesome": "^0.5.1",
"angular2-in-memory-web-api": "0.0.20",
"angular2-modal": "^2.0.0-beta.13",
"body-parser": "~1.13.2",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-timepicker": "^0.5.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"es6-shim": "^0.35.1",
"gulp-concat": "^2.6.0",
"js-yaml": "^3.4.3",
"lodash": "^4.15.0",
"morgan": "~1.6.1",
"ng2-completer": "^0.1.10",
"ng2-dnd": "2.0.1",
"ng2-tooltip": "0.0.3",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"express": "~4.13.1",
"concurrently": "^2.0.0",
"core-js": "^2.4.1",
"del": "^2.2.0",
"font-awesome": "^4.6.3",
"gulp": "^3.9.1",
"gulp-inline-ng2-template": "^3.0.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^4.3.3",
"gulp-typescript": "^2.12.0",
"jade": "^1.11.0",
"jadeify": "^4.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"systemjs-builder": "^0.15.17",
"systemjs-plugin-text": "0.0.9",
"tslint": "^3.5.0",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"yargs": "^4.7.1",
"zone.js": "^0.6.23"
},
"engines": {
"node": "^4.5.0",
"npm": "^3.10.6"
}
}
systemjs.config.js
(function(global) {
var angular2ModalVer = '@1.1.5';
var plugin = 'bootstrap';
// map tells the System loader where to look for things
var paths = {
// paths serve as alias
'npm:': 'lib/'
}
var map = {
'app': 'app',
'@angular': 'npm:@angular',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'moment': 'npm:moment/moment.js',
'ng2-dnd': 'npm:ng2-dnd',
'angular2-modal': 'https://unpkg.com/angular2-modal' + angular2ModalVer,
'lodash': 'npm:lodash',
'font-awesome': 'npm:font-awesome',
'ng2-completer': 'npm:ng2-completer/bundles',
'ng2-tooltip': 'npm:ng2-tooltip'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-dnd': { main: 'index.js', defaultExtension: 'js' },
'angular2-modal': { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' },
'lodash': {main:'index.js', defaultExtension:'js'},
'font-awesome': { main: 'font-awesome.min.css', defaultExtension: 'css' },
'ng2-completer': { main: 'ng2-completer.js', defaultExtension: 'js' , format: 'cjs' },
'ng2-tooltip': { main: 'index.js', defaultExtension: 'js'}
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
map["angular2-modal/plugins/bootstrap"] = map['angular2-modal'] + '/bundles';
packages["angular2-modal/plugins/bootstrap"] = { defaultExtension: 'js', main: "angular2-modal.bootstrap.umd" };
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
有同樣的問題，並嘗試相同的事情。它沒有解決，但看到你的評論讓我清除了我的緩存並重新運行了我的吞噬任務，儘管我確信我第一次完成了這個任務，但它仍然以某種方式修復了！ – James
我自己試了一下，發現了一堆錯誤，比如發現的[這裏]（http://stackoverflow.com/questions/33332394/angular-2-typescript-cant-find-names） – Zack