-1
編輯：問題是，我是一個白癡，在我們的tsconfig.json我們的目標是es6，而不是es5。希望這有助於某個人！Angular2/Node.js應用程序將無法加載在Internet Explorer中
我無法讓我的Angular 2應用程序在IE 11中加載，它在Chrome或Firefox中沒有問題。在IE中拋出的錯誤是：
"SyntaxError: Syntax error at Anonymous function (eval code:6:1) at Anonymous function (eval code:1:31) at eval code (eval code:1:2) Evaluating http://localhost:3000/js/app/assets/app/app.component.js Evaluating http://localhost:3000/js/app/assets/app/boot.js Error loading http://localhost:3000/js/app/assets/app/boot.js"
我在這裏試圖解決方案，他們沒有工作：
https://github.com/angular/angular/issues/7144
https://christianliebel.com/2016/03/fixing-angular-2-app-ie-9-11/
這裏是我的boot.ts
/// <reference path="../../typings/browser.d.ts" />
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide, Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {AppComponent} from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';
import {LocationStrategy,
HashLocationStrategy,
} from '@angular/common';
import {ToastOptions} from "ng2-toastr/ng2-toastr";
import {REST_API_URLS} from './definitions/index';
let toastrOptions = {
autoDismiss: true,
positionClass: 'toast-top-center',
};
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}),
provide(ToastOptions, { useValue: new ToastOptions(toastrOptions)})
]);
個index.hbs
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="js/vendor/es5-shim/es5-shim.js"></script>
<script src="js/vendor/es6-shim/es6-shim.js"></script>
<script src="https://npmcdn.com/[email protected]/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="js/vendor/zone.js/dist/zone.min.js"></script>
<script src="js/vendor/reflect-metadata/Reflect.js"></script>
<script src="js/vendor/systemjs/dist/system.src.js"></script>
<script src="js/vendor/rxjs/bundles/Rx.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" type="text/css" href="resources/css/ot.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/cards.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/nav.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/dropdown.css"/>
<link rel="stylesheet" href="resources/css/style.css">-->
<link rel="stylesheet" type="text/css" href="resources/css/all.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="js/vendor/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" />
<script src="js/vendor/ng2-toastr/bundles/ng2-toastr.min.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body class="body">
<my-app>Loading...</my-app>
</body>
</html>
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var config = require('config');
var appRoutes = require('./routes/app');
var http = require('http');
var querystring = require('querystring');
var app = express();
var log4js = require('log4js');
log4js.configure(config.get("Logs"));
var log = log4js.getLogger("Logs");
log.info("Node server started");
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(log4js.connectLogger(log, {level: log4js.levels.DEBUG}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE');
next();
});
app.use('/', appRoutes);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
//will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
log.error("Server encountered an error: " + JSON.stringify(err, null, 2));
if (err.message ==='No data returned from the query.') {
res.status(err.code || 500)
.json({});
}
else {
res.status(err.code || 500)
.json({
status: 'error',
data: [],
message: err.message
});
}
});
}
//production error handler
//no stacktraces leaked to user
app.use(function(err, req, res, next) {
log.error("Server encountered an error: " + JSON.stringify(err, null, 2));
if (err.message ==='No data returned from the query.') {
res.status(err.code || 500)
.json({});
}
else {
res.status(err.code || 500)
.json({
status: 'error',
data: [],
message: err.message
});
}
});
module.exports = app;
app.component.ts
import {Component, OnInit} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import {HTTP_PROVIDERS} from '@angular/http';
import {MainNavigationComponent} from './nav/nav.component';
import {VersionComponent} from './components/index';
@Component({
selector: 'my-app',
templateUrl: 'html/app.component.html',
directives: [MainNavigationComponent, VersionComponent, ROUTER_DIRECTIVES],
providers: [HTTP_PROVIDERS]
})
export class AppComponent {}
IE再次回擊 – Tushar
在'@ Component'改變任何東西后會刪除空行嗎？ –