2017-04-11 2 views
1

Ich habe eine einfache Website mit angular erstellt, die ich auf nginx bereitstellen möchte.Bereitstellen von Angular Website auf Nginx

ich nginx auf meinem PC installiert haben und die Wurzel und der Index der nginx.conf Datei wie unten modifiziert,

server { 
     listen  80; 
     server_name localhost; 

     #charset koi8-r; 

     #access_log logs/host.access.log main; 

     location/{ 
      root C:/Angular-Project/angular2-trial/src; 
      index index.html; 
     } 
     } 

Nein, wenn ich die localhost zugreifen, bekomme ich die Index-Seite - HTML-Inhalt , aber es löst keinen Winkelabschnitt auf. Und es gibt keine Fehler in der Konsole.

Index.HTML

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Angular2Trial</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>Loading...</app-root> 
</body> 
</html> 

src - Ordnerstruktur: enter image description here

Gibt es etwas, was ich tun müssen, so dass meine Winkel App funktioniert?

Antwort

2

Wenn Sie Ihre Struktur betrachten, haben Sie keinen Build erstellt. Scheint so, als ob du angular-cli benutzt.

einen Build generieren

ng build --base-href . 

dist Ordner mit erzeugt wird. Behalte das in nginx. enter image description here

Sein Inhalt wäre dies. enter image description here

Und wenn Sie ihre Index.html betrachten, sollte es so etwas sein.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Angular2Liferay7</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>Loading...</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> 

Hinweis: wie pollyfills & main.bundle.js geladen werden, die nicht in Ihrer index.html sind. Dann würde Angular verwandtes Zeug geladen werden.

+0

Vielen Dank ... Wie Sie erwähnt haben, habe ich vergessen zu bauen. Bauen Sie es gelöst mein Problem – Vinay

+0

@Vinay: Sie sind willkommen :) Sie können es auch upvote: p –

Verwandte Themen