Bundle angular2 App mit jspm

Ich bin neu bei Jspm, und habe seit einigen Monaten mit ihm gearbeitet, und mag es wirklich. Ich habe eine App in Angular2 entwickelt, und finden jspm sehr glatt, um andere Bibliotheken einzuschließen. Ich verwende TypeScript.Bundle angular2 App mit jspm

Jetzt versuche ich eine Entwicklung zu bauen, wo ich meine App bündeln möchte, aber ich kann es nicht richtig funktionieren. Ich bekomme keine Probleme, bevor ich die App bündle. Ich vermute es ein Problem in der Art, wie ich system.js konfiguriere.

Wenn ich versuche, mit zu bündeln:

jspm bundle-sfx app/main public\app.js

Und ändere meine zwei Script-Tags mit einem einzigen Hinweis auf app.js, und das Bündel auf meinen Server kopieren, die App funktioniert nicht aufgrund dieser Fehler:

Uncaught ReferenceError: System is not defined

Und:

EXCEPTION: Template parse errors: 
Unexpected closing tag "head" (" 


    [ERROR ->]</head> 
<body> 

"): [email protected]:2 
Unexpected closing tag "html" (" 
</body> 

[ERROR ->]</html> 
"): [email protected]:0

der letzte Fehler scheint ein Problem mit demzu seinTag-Ausgabe: Template parse error: Unexpected closing tag, aber ich habe das Basis-Tag direkt nach dem Kopf. Wenn ich nur die lokalen Scripts ändere, bekomme ich nur den ersten Systemimportfehler?

Meine Version von jspm:

0.16.32 
Running against local jspm install.

Mein indes.html:

<!DOCTYPE html> 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="google" content="notranslate"> 
    <meta http-equiv="Content-Language" content="en"> 

    <title>The Young Scholars Directory</title> 

    <!-- Bootstrap core CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom styles for YSI --> 
    <link href="assets/css/app.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
<body>   

    <my-app> 
     <div class="preloader"> 
     <img src="assets/img/loader.gif" alt="preloader" /> 
     </div> 
    </my-app> 

    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <!-- <script src="app.js"></script> --> 
    <script> 
     System.import("app/main"); 
    </script> 

</body>  
</html>

config.js:

baseURL: "/", 
    defaultJSExtensions: true, 
    transpiler: "typescript", 
    typescriptOptions: { 
    "module": "commonjs", 
    "emitDecoratorMetadata": true 
    }, 

    packages: { 
    "app": { 
     "main": "main", 
     "defaultExtension": "ts" 
    } 
    },

Quelle

2016-04-09 DNRN

Sollte in Ordnung sein, wie Sie es bündeln. Ich eröffne mein Bündel wie folgt aus:

jspm bundle-sfx app/main app-bundle.min.js --minify

Und mein html sieht wie folgt aus (Bundle Script-Tag nach App-Selektor):

<!DOCTYPE html> 
<head> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
    <script src="app-bundle.min.js"></script> 
</body> 
</html>

Sie ein vollständiges Beispiel finden Sie hier:

https://github.com/fintechneo/angular2-templates

Quelle

2016-10-25 11:28:13

Bundle angular2 App mit jspm

Antwort

Verwandte Themen