Angular2-Anwendung auf Firebase bereitstellen

Ich versuche, eine angular2-Anwendung auf Firebase bereitzustellen. Ich habe this Guide gefolgt, aber wenn ich firebase open tippe ich bekomme einen Fehler (siehe unten).Angular2-Anwendung auf Firebase bereitstellen

Dies ist die Struktur meiner Anwendung ist

\root 
    \ app 
    \ assets 
    \ dev 
    \ node_modules 
    \ public 
    \ src 
    \ typings 
    index.html 
    firebase.json 
    gulpfile.js 
    package.json 
    tsconfig.json 
    typings.json

ich alle Dateien in meinem app Ordner abgelegt haben (sie sind .js Dateien, von .ts diejenigen transpiled, die im Inneren dev Ordner sind) innerhalb der öffentlichen Ordner. Ich habe index.html Datei auch in den öffentlichen Ordner kopiert.

So, jetzt für öffentliche Ordner-Struktur ist:

\public 
    \app 
     |-> app.component.js 
     |-> boot.js 
     |-> other .js files 
    index.html

dies index.html:

<html> 
<head> 
    <base href="/"> 
    <title>Angular 2 Boilerplate</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.js"></script> 


    <link rel="stylesheet" href="src/css/app.css"> 
</head> 
<body> 
<my-app>Loading...</my-app> 

<script> 
    System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('app/boot') 
      .then(null, console.error.bind(console)); 
</script> 
</body> 
</html>

mein firebase.json ist wie folgt:

{ 
    "firebase": "wetta", 
    "public": "public", 
    "ignore": [ 
    "firebase.json", 
    "**/.*", 
    "**/node_modules/**" 
    ] 
}

Der Fehler, dass Google Chrom Konsole shows is: (index):24 Uncaught ReferenceError: System is not defined

Gehe ich in die richtige Richtung? Was verursacht diesen Fehler?

Quelle

2016-04-25 splunk

Die Ursache des Problems ist, dass das Skript aus index.html

system.config (...

aber das Objekt System anrufen will, die in

<script src="node_modules/systemjs/dist/system.src.js"></script>

definiert ist,

wurde nicht geladen, da Sie in Ihrer Firebase.json Regel für /node_modules/ ignoriert haben und die system.src.js nicht auf Firebase-Server hochgeladen wurde.

Es wäre nicht praktisch, all die Sachen von node_modules hochzuladen, weil es zu viele Dateien gibt.

Ich war in der Lage, das Problem mit folgenden Schritten zu lösen:

erstellt Angular 2-Anwendung mit Winkel-cli
bauten meine Anwendung mit ng zu bauen, die mit dist Ordner erstellt meinem App

initialisieren mit firebase init. Zur Frage "Welches Verzeichnis sollte die öffentliche Wurzel sein?" Antwort geben dist.

Feuerbasis bereitstellen

Quelle

2016-05-09 16:21:26

Angular2-Anwendung auf Firebase bereitstellen

Antwort

Verwandte Themen