IE11问题:从main.js将app.module.js加载为./app.module时出错

时间:2016-09-28 10:32:24

标签: angular typescript

我的angular2应用目前正在使用最新的Chrome和Firefox。

为我的版本processsystemjs使用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中使用的填充物/填充物。

我已经在我的应用程序的早期部分放置了日志记录,例如main.tsapp.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);

1 个答案:

答案 0 :(得分:1)

我的tsconfig设置为以es6为目标,将其更改为es5意味着它现在在IE11中运行。

通过检查angular2快速入门并检查任何不匹配的设置来找到它。