Angular2/Node.js应用无法在ie浏览器中加载

Angular2/Node.js App will not load in Internet Explorer

本文关键字：ie 浏览器 加载 Node js 应用 Angular2      更新时间：2023-09-26

编辑:问题是我是一个白痴，在我们的tsconfig。我们的目标是es6，而不是es5。希望有一天这能帮助到别人!

我无法让我的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/

这是我的靴子。

/// <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/angular2@2.0.0-beta.6/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 {}

从堆栈跟踪错误发生在app.component.ts所以我检查那里。或者最好把它的内容贴在这里。

相关文章：