webentwicklung-frage-antwort-db.com.de

Ausführen einer angular 2-Anwendung, die lokal auf Chrome mit angle-cli ohne Knotenserver erstellt wurde

Ich werde meine Angular 2 Frage sehr genau stellen.

1. Ich benutze:

Angular 2, Angular-Cli: 1.0.0-Beta.15, (Webpack-Gebäude) Knoten: 6.4.0, OS: Linux x64

2. Was ich erreichen möchte:

Ich möchte mein Projekt so erstellen, dass ich nach dem Build (ng build project-name) statische Dateien meiner Angular 2-Anwendung erhalte, die ich ausführen kann direkt von chrome ohne ng dienen oder dem Node-Server Ich möchte nur auf index.html doppelklicken und die App lokal ausführen.

. In der Zwischenzeit erhalte ich in der chrome browser console output, wenn ich auf die generierte index.html doppelklicke:

datei: ///inline.js Fehler beim Laden der Ressource: net :: ERR_FILE_NOT_FOUND Datei: ///styles.b52d2076048963e7cbfd.bundle.js Fehler beim Laden der Ressource: net :: ERR_FILE_NOT_FOUND Datei: ///main.c45bb457f14bdc0f5f Fehler beim Laden der Ressource: net :: ERR_FILE_NOT_FOUND Datei: ///favicon.ico Fehler beim Laden der Ressource: net :: ERR_FILE_NOT_FOUND

  1. Soweit ich weiß, hängt dies mit Pfaden zusammen. Die erstellte und gebündelte Anwendung kann die richtigen Pfade nicht finden. Meine Frage lautet also wo und wie. Ich sollte die Pfade in meiner App oder in einer beliebigen Konfigurationsdateien erstellen ändern Damit meine App so funktioniert, wie ich es möchte, funktioniert sie wie in Punkt 2 beschrieben

  2. Vielen Dank im Voraus für eine direkte und vollständige Antwort zu diesem Thema, da andere Themen nicht den vollen Umfang dieses Themas erklären.

25
BartB

Erster Schritt:

Führen Sie den Befehl aus

ng build

oder

ng build -prod (then it will compact all files for production version)

Zweiter Schritt:

Änderung in index.html

<base href="/"> to <base href="./">

Dritter Schritt:

Alle Dateien auf den Server stellen (möglicherweise htdocs in localhost oder auf einem anderen Server)

Hoffentlich klappt es.

25
sabuz

Lösung ohne Server:

Erster Schritt:

Verändern in index.html:

löschen <base href="/">

Zweiter Schritt:

Verändern in app.module.ts:

import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
   providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]
})

Dritter Schritt:

Führen Sie den Befehl aus

ng build

oder

ng build -prod

Doppelklick dist/index.html um das Ergebnis zu sehen.

22
Jakša Bašić

Wenn Sie Angular-Cli verwenden, müssen Sie index.html nach dem Erstellen des Projekts nicht ändern. Gemäß Angular-CLi Github-Dokument https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml können Sie das Argument einfach ändern, während Sie das Projekt erstellen:

    Example: ng build --prod --base-href .

Die tatsächliche Verwendung ist:

ng build --base-href <base>

sie können statt base einfach eine bestimmte URL eingeben. In diesem Beispiel verwenden wir. (Punkt) als Argument

10
Nelly Sattari

Eine einfache Lösung: Ändern Sie Ihre Basis-HREF, wenn Sie bauen.

ng build --prod --base-href .

Jetzt können Sie auf die Datei index.html Doppelklicken, und es wird funktionieren.

Hier ist ein Beispiel für diese Arbeitsweise: https://mattspaulding.github.io/angular-material-starter/

9
Matt

Sie müssen den Ordner /dist Über einen HTTP-Server bedienen. Sie können dies nicht umgehen, da das lokale Laden von Dateien aus Sicherheitsgründen keine Codeausführung ermöglicht.

Der Server muss nicht so schwer sein wie Express oder ein hochkarätiger Minimalist wie HapiJS. Der eingebaute Node http-Server reicht völlig aus. Wenn Sie bereits Apache, Nginx oder IIS eingerichtet haben, können Sie diese auch verwenden Serviere deine App.

BEARBEITEN: Ich habe moralisch nach einer Lösung gesucht und mich dafür entschieden, eine Lösung anzubieten, die ich persönlich nicht verwenden würde, die aber gut zu Ihnen passt: Webserver für Chrome Extension =

4
gelliott181

Alles was Sie brauchen, ist Ihre App mit dieser einen Codezeile zu erstellen:

ng build --prod --base-href ./
2
Nikolay_R

Das Entfernen von <base href="/"> Aus index.html Hat bei mir funktioniert.

1
achola

Ich empfehle die Verwendung von Expressjs, warum Server wie xampp, laragon, etc ... die Routen nicht gut funktionieren, ich habe es so gemacht: Ich habe einen neuen Ordner mit Nameserver erstellt, in den eine Datei kopiert index.js Die Route wäre "src/assets/server/index.js".

Index.js Inhalt

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/../../';

app.set('port', (process.env.PORT || 80));

app.use(express.static(staticRoot));

app.use(function(req, res, next){
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }
    fs.createReadStream(staticRoot + 'index.html').pipe(res);

});
app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

In package.json im Stammverzeichnis des Projekts

{
    "dependencies": {
        "express": "4.13.4"
    }
}

führen Sie später den Konsolenbefehl ng build prod aus und führen Sie ihn aus

knoten dist/assets/server /

mit diesem Befehl wird ein Express-Server ausgeführt, der die Richtung der Datei config our server angibt. In diesem Fall wird die Datei index.js vorkonfiguriert

pS: Entschuldigung für mein schlechtes Englisch, ich lerne

1
Wilder Perozo

Sie können so etwas zum Beispiel mit nw.js (oder electron) erreichen. Ich habe selbst eine App erstellt, die angular 2 lokal mit nw.js verwendet und wie ein Zauber funktioniert;)

nwjs.io

0
kristóf baján