2017-08-31 7 views
2

Ich habe eine eckige 2+ Frontend-Anwendung erstellt, die ich auf der Sharepoint-Website meines Unternehmens ausführen möchte. Wenn ich jedoch mein Projekt erstelle und der dist Ordner erstellt wird, wird es mir nicht erlauben, die index.html und .js Dateien zu nehmen und sie einfach in ein freigegebenes Laufwerk zu legen, um die Anwendung zu starten. Ich brauche Hilfe. Ist es möglicherweise nach einem Build, um die Anwendung ohne einen Webserver zu starten? Im Grunde starten Sie einfach den index.html und damit es funktioniert?Angular 2+ Anwendung ng build

Ich weiß, es hat etwas mit dem Routing und der Basis href

angular chrome error

+0

Können Sie den Inhalt von index.html posten? –

Antwort

0
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Emulator</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
    <app-root></app-root> 
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body> 
</html> 
0

Versuchen zu ändern in Ihrer index.html statt base href = "/" fügen Sie den Namen zu tun Ihre Ordner, in dem die index.html und vergessen Sie nicht die Endung „/“:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Emulator</title> 
    <base href="/<BaseFolder>/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
    <app-root></app-root> 
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body> 
</html> 
0

guten Vorschlag, aber immer noch keine Liebe ... noch immer nicht immer Ressource in der Konsole zu laden.

+0

Ich habe meinen Beitrag aktualisiert –

+0

funktioniert es diesmal? –

0
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Emulator</title> 
    <base href="./././"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
    <app-root></app-root> 
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body> 
</html> 

Ich schätze die Ideen. Ich war in der Lage, die Basis-href ein bisschen höher zu ändern, so dass die .js-Dateien jetzt erkannt werden, aber nun einen anderen Fehler in der Konsole bekommen, ohne dass etwas geladen wird ... scheint etwas mit dem Routing zu tun zu haben.

enter image description here

+0

afaik, das ist eine Sicherheitsfunktion des Browsers, den Sie verwenden. Probiere meine Lösung aus, die ich als Bearbeitung in der ersten Antwort gepostet habe. installieren Sie http-Server: 'npm installieren -g http-server' und führen Sie die kompilierte Seite aus:' http-server dist -a 127.0.0.1' –

0

fand ich eine einfache Lösung hier so ein

EDIT ist:

Es gibt ein npm Paket "http-server", die Sie ganz einfach einen HTTP-Server lokal ausgeführt werden kann. Hier ist, wie es zu installieren und zu verwenden:

  1. installieren http-Server global

    npm install -g http-server 
    
  2. Um Ihren Build in Ihrem dist-Ordner auf http://localhost:4201 Lauf laufen:

    http-server dist -a 127.0.0.1 -p 4201 
    

Sie können auch XAMPP verwenden, aber das geht weit über das hinaus, was Sie dafür benötigen. Aber wenn Sie nicht wollen, das npm Paket dort verwenden, sind auch Methoden, wie Sie einen Webserver mit Bordmitteln von Windows oder MacOS in dieser Gist

Alternative mit GitHub Seiten beschrieben läuft

Ich hatte auch das gleiche Problem und könnte nicht löse es, auch nach dem stack overflow nach (lass uns ehrlich sein ...) Minuten. Ich habe einige Lösungen gefunden, aber ich konnte es nicht laufen lassen. Was ich stattdessen tat, war GitHub Pages (Sie können auch GitLab Pages verwenden, wo Sie private Repositories erstellen können).

  1. Bauen

    Erstellen Sie Ihre App mit der Basis-href für die GitHub Seite

    ng build --prod --base-href "https://USER_NAME.github.io/REPOSITORY/" 
    
  2. Push-to- GitHub

    Build zu GitHub als die Push- gh_pages Zweig. Wenn Sie nicht familar mit Git sind, können Sie das sehr einfach bedienen GitHub Desktop app

  3. Satz GitHub Pages verwenden

    bekam https://github.com/USER_NAME/REPOSITORY/settings und setzen die Filiale, wo Sie Ihre Seite hochgeladen (in unserem Fall gh_pages) als die Quelle von GitHub Pages

Es gibt viel mehr Sie mit der Verwendung Travis-CI tun können. Travis-CI kann Ihr Projekt jedes Mal erstellen, wenn Sie ein Update an Ihr Repository senden und es an GitHub Pages senden. GitLab hat sogar eine eigene Continuous Integration.