2016-10-10 3 views
0

angular2 cli를 사용하여 프로젝트를 만들었습니다. 또한 백엔드 역할을하는 별도의 노드 js 응용 프로그램을 만들었습니다. 프론트 엔드 애플리케이션을 노드 애플리케이션으로 이동하여 노드 server.js를 사용하여 두 애플리케이션을 모두 실행할 수 있습니다. 내 server.js는 다음과 같습니다동일한 폴더에서 Angular2 CLI Project 및 Node.js 앱을 설정하는 방법

app.use(express.static(__dirname + '/app')); 
... 
app.get('*', function (req, res) { 
    res.sendfile('./app/src/index.html'); 
}); 
app.listen(8000); 

angular2의 CLI에서 내 index.html을은 다음과 같습니다 : 지금 노드 server.js를 실행하고 http://localhost:8000/를 찾아

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>My App</title> 
    <base href="/"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <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> 

"Loading ..."메시지를 볼 수는 있지만 아무 것도 나타나지 않고 콘솔에 오류가 없습니다.

+0

잘못된 위치'/ app/src/index.html'을 참조하고 있습니다. 'app' 디렉토리에서 파일을 제공하는 노드 응용 프로그램이기 때문에'/ src/index.html'이어야합니다. 'app.use (express.static (__ 디렉토리 이름 + '/ app'))'. 따라서'/ app'를 루트로 고려하여 위치를 직접 참조해야합니다. –

+0

@KunalSharma 브라우저에 "Loading ..."레이블이 표시되어 위치가 정확한지 확인할 수 있습니다. 나는 그것을 어쨌든 변경하려고 시도하고 "Error : ENOENT : no such file or directory"오류를 받았습니다. –

+0

plnkr을 업로드해야합니다. 아마도 도움이 될 것입니다. 어떤 종류의 경로 참조 문제 일 수 있습니다. 콘솔의 네트워크 탭을 확인하십시오. –

답변

0

실제로해야 할 일은 각 폴더 (ng build --prod -o /somefolder)에 각도 cli로 빌드를 생성하는 것입니다 (출력은 o입니다). 노드에 정적으로 서버의 폴더를 app.use(express.static...)으로 지정하십시오. URL이 전체 폴더 경로 (예 : localhost/somefolder/index.html)를 포함하지 않도록 index.html 페이지를 반환하는 경로를 하나 이상 추가 할 수 있습니다 (이 경로는 추악합니다).

각도 앱은 여전히 ​​분리되어 있으며 nodejs 로직과 아무 곳이나 섞이지 않기 때문에 이것이 가장 좋은 방법입니다.

+0

각도가 변경되면 언제든지 버전을 빌드해야합니다. 이 기능은 프로덕션에서 작동하지만 개발 단계에서는 다소 쓸모가 없습니다. –

+0

개발 단계에서 ng build --watch -o/somefolder를 사용할 수 있습니다. 파일을보고 자체적으로 다시 컴파일합니다 (서비스가 메모리에있는 파일이기 때문에 약간 느립니다). 또한 디스크에 파일을 물리적으로 가지고 있으면 웹 스톰에서 디버깅하는 데 도움이 될 수 있습니다. –

관련 문제