2017-06-13 60 views
6

Próbuję uruchomić aplikację Angular generowaną przez kątowy interfejs CLI, ale wygląda na to, że domyślny komponent app-root nie ładuje się. Trzeba powiedzieć, że używam proxy do połączenia między aplikacją kątową a serwerem ekspresowym, a ja uruchamiam jednocześnie dwa skrypty: node bin/www dla wyrażenia express/node.js start i ng serve --proxy-config proxy.config.json dla uruchamiania Angular i tworzenia połączenia proxy, to wygląda następująco (część package.json):Dlaczego Angular 2 nie ładuje domyślnego komponentu App-root?

"scripts": { 
    "start": "concurrently --kill-others \"node bin/www\" \"ng serve --proxy-config proxy.config.json\"" 
} 

stronie indeksu obciążenia w porządku, ale wydaje się, że app-root składnik (składnik domyślny, który został stworzony z kątowym CLI ng new) nie ładuje: enter image description here Oto mój plik node.js/express use s i trasa:

var express = require('express'); 
var router = express.Router(); 
var app = express(); 
var path = require('path'); 

app.use(express.static('./src/client/')); 
app.use(express.static('./')); 
app.use(express.static('./tmp')); 
app.use('/*', express.static(path.resolve('src/client/index.html'))); 

router.get('*', function(req, res) { 
    res.sendFile(path.resolve('src/client/index.html')); 
}); 

module.exports = router; 

i struktury mojego projektu (w razie potrzeby): enter image description here

Co mnie ominęło? Dlaczego domyślny komponent app-root nie ładuje się? (muszę powiedzieć, kiedy uruchamiam ng serve, uruchamia on kątową stronę główną w razie potrzeby, a komponent jest w porządku, więc myślę, że problem jest gdzieś w ekspresowym).

Dzięki z góry

+0

Użycie 'Ng Serve' i serwowania z express są powielane. Mimo to, możesz służyć z folderu kompilacji, a nie folderu src. –

+0

@TaylorAckley, Próbowałem uruchomić tylko express i używać domyślnie folderu kompilacji o nazwie "dist", ale nadal mam ten sam problem (ale teraz wszystkie skrypty są ładowane). –

+0

@Ced, oto moje otrzymane 'index.html': https://ibb.co/czJe2k oraz zakładka Moja sieć: https://ibb.co/hE3Jv5 –

Odpowiedz

5

powinien służyć zawartość folderu after calling ng build --prod (the --prod is important, as the default is --dev)dist/. Tak, to byłoby coś takiego:

"scripts": { 
    "start": "ng build --prod && node bin/www" 
} 

I mniej lub bardziej dostosowując swoją Express Scripts:

app.use(express.static('./dist')); 
app.use('/*', express.static(path.resolve('dist/index.html'))); 

router.get('*', function(req, res) { 
    res.sendFile(path.resolve('dist/index.html')); 
}); 
+0

Twoja sugestia wygląda OK, ale próbowałem użyć to i teraz dostaję błąd 404. Może gdzieś pomyliłeś się lub zapomniałeś dodać coś do swojej odpowiedzi? Czuję, twoja sugestia jest bardzo blisko. Muszę powiedzieć, że jestem całkowicie nowy w węźle/ekspresie –

+0

O tak, zapomniałem dodać 'index.html'. Daj znać czy działa. – acdcjunior

+0

Próbowałem, index.html ze skryptami ładuje się dobrze, ale nadal otrzymuję pusty element 'app-root'. Ale mój wynik kompilacji (folder 'dist') zawiera tylko' client/index.html' i pięć plików '... bundle.js'. Wszystkie one są zawarte w 'index.html', ale kiedy próbuję otworzyć jeden z nich w nowej karcie, nie widzę żadnego kodu zgodnie z oczekiwaniami. Wygląda na to, że tak naprawdę nie zostały uwzględnione. Myślę, że to kolejny problem, ale jeśli masz jakieś przemyślenia na ten temat, proszę, daj mi znać –