Angular 2 L'application fonctionne sous Chrome mais pas IE 11

Essayer de commencer à développer des applications angulaires 2. J'ai trouvé une vidéo sur YouTube et j'ai couru avec. Cela a bien fonctionné, mais seulement dans Chrome. Quand je lance la même application dans IE 11, je reçois l'erreur suivante:Angular 2 L'application fonctionne sous Chrome mais pas IE 11

Error: (SystemJS) Syntax error 
SyntaxError: Syntax error 
at Anonymous function (eval code:4:1) 
at Anonymous function (eval code:1:31) 
Evaluating http://localhost:52688/app/app.module.js 
Evaluating http://localhost:52688/app/main.js 
Error loading http://localhost:52688/app/main.js

Alors je vais à Google pour trouver une solution. J'ai appris que IE 11 ne supporte pas es6, j'ai donc besoin de changer mon framework cible dans mon tsconfig.json de es6 à es5. Il est évident que ma demande n'a pas été heureux à ce sujet et il renvoie toutes sortes d'erreurs le long des lignes de:

"Build:Cannot find name 'Map'" and "Build:Cannot find name 'Set'".

Encore une fois, hors Google. J'ai appris que ces deux objets sont maintenant totalement différents entre es5 et es6 et beaucoup de gens ont suggéré quelques cales. J'ajoute donc un shim à mon paquetage.json, restaure les paquets, et le référence dans ma page principale. J'essaie de construire à nouveau et je n'ai pas de succès.

Je me demande si ces cales fonctionnent vraiment, mais je ne sais pas comment les faire fonctionner. Merci de votre aide. Voici tout le code pertinent. Si vous avez besoin de plus s'il vous plaît faites le moi savoir.

package.json

{"name": "angular2withvs2015", 
"version": "1.0.0", 
"dependencies": { 
"@angular/common": "~2.1.1", 
"@angular/compiler": "~2.1.1", 
"@angular/core": "~2.1.1", 
"@angular/forms": "~2.1.1", 
"@angular/http": "~2.1.1", 
"@angular/platform-browser": "~2.1.1", 
"@angular/platform-browser-dynamic": "~2.1.1", 
"@angular/router": "~3.1.1", 
"@angular/upgrade": "~2.1.1", 
"bootstrap": "3.3.7", 
"core-js": "^2.4.1", 
"reflect-metadata": "^0.1.8", 
"rxjs": "5.4.3", 
"systemjs": "0.19.39", 
"zone.js": "^0.6.25", 
"es6-shim": "0.35.3"}, 
"devDependencies": { 
"@types/core-js": "^0.9.41", 
"@types/node": "6.0.40", 
"gulp": "3.9.1", 
"gulp-tsc": "^1.2.5", 
"gulp-typescript": "^3.1.2", 
"rimraf": "^2.5.4", 
"typescript": "^2.0.7"}}

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es6", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "types": [] 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
}

app.component.ts

import { Component,OnInit } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1>`, 
    providers:[GetDataService] 
}) 
export class AppComponent { 
    name = 'Angular 2 (From component)'; 
}

system.config.js

(function (global) { 
var map = { 
    'app': '/app', 
    '@angular': '/node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs': '/node_modules/rxjs' 

}, 
    packages = { 
     'app': { main: './main.js', defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' } 
    }, 
    ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'forms' 
    ]; 

function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } } 

ngPackageNames.forEach(packUmd); 


var config = { 
    map: map, 
    packages: packages 
}; 

System.config(config);})(this);

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Angular2Demo10.Default" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server">  
<script src="node_modules/es6-shim/es6-shim.js"></script> 
<script src="node_modules/core-js/client/shim.js"></script> 

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="system.config.js"></script> 
<script> 
    System.import('app').then(null, console.error.bind(console)); 
</script> 
</head> 
<body> 
    <h1>Hello World (Default.aspx)</h1> 
    <my-app>Loading...</my-app> 
</body></html>

Source

2017-10-13 champ8686

https://stackoverflow.com/questions/33332394/angular-2-typescript-cant-find-names –

I Je n'ai aucune idée de ce que cela signifie. Pouvez-vous simplifier du tout? Je suppose que j'ai besoin de changer les choses dans mon package.json mais je ne sais pas quoi. – champ8686

Il y a beaucoup de solutions. Il suffit de passer du temps et d'essayer quelques-uns d'entre eux ... Vous pouvez ajouter '/// ' au fichier principal, ou essayer d'ajouter une dépendance pour ' @ types/es6-shim' dans votre 'package.json' –

Changé ma package.json à:

{"compilerOptions": { 
"lib": [ "es5", "dom", "es6", "dom.iterable", "scripthost" ], 
"noLib": false, 
"target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": true, 
"types": ["node"]}, 
"exclude": [ 
"node_modules" 
]

Aussi, assurez-vous d'ajouter ces deux références dans votre index.html.

<script src="node_modules/es5-shim/es5-shim.js"></script> 
<script src="node_modules/es6-shim/es6-shim.js"></script>

Sources: https://groups.google.com/forum/#!topic/angular/rR4GTRMUNsw --Steven Luke Angular 2 typescript can't find names --Jiayi Hu

Source

2017-10-13 20:21:58 champ8686

Angular 2 L'application fonctionne sous Chrome mais pas IE 11

Répondre

Questions connexes