Angular 디 버 깅 기술 의 오류 404(not found)

서언
방학 동안 학생 들 은 충전 하 느 라 바 쁘 고'스 택 개발'을 배 우 는 사람 이 적지 않 습 니 다.저 는 독자 들 의 피드백 을 자주 받 았 습 니 다.라 는 책의 사례 를 테스트 할 때 곤 혹 스 러 웠 습 니 다.비록 여러 가지 문제 에 부 딪 힐 수 있 지만 전체적으로 보면 하나의 기술 점 으로 요약 할 수 있다.그것 이 바로 Angular 의 디 버 깅 이다.
Angular 코드 를 만 드 는 것 은 어렵 지 않 습 니 다.어 려 운 것 은 Angular 코드 를 디 버 깅 하 는 것 입 니 다.Angular 초보 자 에 게 Angular 를 디 버 깅 하 는 데 는 하나의 과정 이 필요 하 며,이 과정 에서 끊임없이 경험 을 쌓 아야 한다.오 류 를 보고 나 면 십중팔구 문제 가 어디 에 있 는 지 알 아 맞 힐 수 있다.
이 글 은 흔히 볼 수 있 는 Angular 디 버 깅 기법 부터 시작 해서 404(not found)오류 가 발생 하면 어떻게 합 니까?
디 버 깅 장면 시 뮬 레이 션
라 는 책의 사례 6.3.3 장―단일 페이지 응용 실현 은 이러한 효 과 를 실현 해 야 한다.그림 과 같다.

단일 페이지 적용 효과
홈,About,Contact 를 눌 렀 을 때 아래 의 내용 은 페이지 에서 새로운 요청 을 보 내지 않 아 도 됩 니 다.단일 페이지 응용 은 한 페이지 에서 자동 으로 변화 가 발생 하 는 것 이 고 새로운 페이지 로 돌아 가지 않 아 사용자 체험 이 크게 향상 되 었 다.
이러한 단일 페이지 응용 을 실현 하기 위해 책 에 html 파일(index.html,home.html,about.html,contact.html)을 만 들 었 고 라 우 터 와 contrller 에 사용 되 는 my app.js 도 만 들 었 으 며 응용 프로그램의 입구 server.js 를 만 들 었 습 니 다.
책의 튜 토리 얼 에 따라 코드 입력 을 한 걸음 한 걸음 완성 하고 마지막 으로 node server.js 를 실행 할 때 까지 Home,About,Contact 단 추 를 눌 렀 을 때 아래 의 내용 은 변 하지 않 았 다.코드 는 문제 가 없 는데,이 건 또 어떻게 된 일 입 니까?
디 버 깅 기술
우정 알림:
Angular 를 디 버 깅 할 때 는 반드시 Chrome 브 라 우 저 를 사용 해 야 합 니 다.이 점 은 쉽게 이해 할 수 있 습 니 다.Angular 는 구 글 집 이 고 크롬 도 구 글 집 입 니 다.크롬 은 자신의 제품 을 가장 잘 지원 합 니 다.
터미널 창 에서 node server.js 실행
Chrome 브 라 우 저 에 입력:http://localhost:3000
이때 Chrome 브 라 우 저의 개발 도 구 를 열 고 Wiindows 시스템 이 라면 F12 키 를 사용 합 니 다.Mac 시스템 이 라면 Option+Command+I 를 사용 하 십시오.여기 캡 처 는 Mac 시스템 을 예 로 들 수 있 습 니 다.

Angular 오류 알림
첫 번 째 줄 의 오 류 를 먼저 보면 두 번 째 줄 의 오 류 는 첫 번 째 줄 에서 발생 하 는 경우 가 많다.첫 번 째 잘못 이 해결 되면 아래 의 잘못 은 자동 으로 사라 진다.
http://localhost:3000/myapp.js 404 (Not Found)
인터넷 용어 에서 404 는 요청 할 파일 이 존재 하지 않 는 다 는 뜻 이다.이것 은 전통 적 인 개발 환경 에서 예 를 들 어 C,자바 등 은 파일 을 찾 지 못 하 더 라 도 404 오류 가 발생 하지 않 습 니 다.다음 힌트 를 살 펴 보 자.Not Found 는 못 찾 았 다 는 뜻 이다.
오류 조사 방법
이런 오 류 를 만 났 을 때,조사 하 는 방법 은 먼저 이 파일 이 존재 하 는 지 를 보고,그 파일 의 접근 경로 가 정확 한 지 를 보 는 것 이다.
(1)이 파일 이 존재 하 는 지 확인 합 니 다.파일 이름 은 반드시 엄격하게 일치 해 야 하 며,파일 이름 자 체 는 대소 문 자 를 구분 할 필요 가 없다.예 를 들 어 index.html 와 Index.html 는 같은 파일 이 고 my app.js 와 my App.js 도 마찬가지 입 니 다.
(2)파일 의 경 로 를 배차 한다.파일 이름 이 정확 한 지 확인 하 는 것 은 간단 하 다.파일 을 검사 하 는 경 로 는 기술적 인 일이 다.왜 그 러 세 요?AngularJS 에 정적 자원 이라는 개념 이 있 기 때문이다.my App.js 파일 은 분명히 존재 하 는데 왜 찾 을 수 없 습 니까?먼저 my App.js 를 참조 한 줄 코드 를 보 겠 습 니 다.
index.html 의탭 에서:

<script src="myapp.js"></script>

파일 을 인용 할 때 절대 경 로 를 제시 하거나 상대 경 로 를 제시 합 니 다.my app.js 의 파일 경 로 는 어떻게 약속 합 니까?
이것 은 server.js 파일 이 경 로 를 어떻게 정 하 는 지 봐 야 합 니 다.코드 는 다음 과 같 습 니 다.

app.use(express.static(path.join(__dirname, 'public')));

__dirname 은 현재 파일(server.js)이 있 는 경 로 를 말 하 며,Public 는dirname 의 다음 디 렉 터 리 입 니 다.path.join 은 프로그램 이 지정 한 정적 자원 저장 위 치 를 표시 하 는 폼 입 니 다.express.static 는 프로그램 이 지정 한 정적 자원 저장 위 치 를 표시 합 니 다.
이 개념 에 따 르 면 위의 home.html,about.html,contact.html,my app.js 네 개의 파일 은 모두 정적 자원 파일 입 니 다.다시 이 코드 를 살 펴 보 겠 습 니 다.

<script src="myapp.js"></script>

코드 를 이렇게 쓸 때 프로그램 은 현재 경로 의 Public 디 렉 터 리 에 my app.js 파일 을 옮 겨 다 녀 야 합 니 다.여기까지 읽 으 면 404 가 틀린 이 유 를 알 수 있 겠 지.
그림 과 같이 정적 자원 파일 을 Public 폴 더 에 통일 시 켜 야 합 니 다.

정적 자원 파일 경로
진일보 토론 하 다
경로 가 일 으 킨 화 라면 생각 을 바 꾸 고 정적 자원 경로 의 설정 을 바 꿀 수 있 습 니까?예 를 들 어 server.js 파일 의 코드 를 수정 하면 다음 과 같 습 니 다.

app.use(express.static(path.join(__dirname, '/')));

이렇게 되면 위의 네 개의 서 류 는 Public 에 두 지 않 아 도 된다.이런 방법 은 잘못 보고 하지 않 았 지만 문 제 는 이것 이 규범 적 인 방법 이 아니 라 는 것 이다.조금 복잡 한 응용 이 라면 대량의 정적 자원 파일 을 사용 할 것 입 니 다.경 로 를 분배 하지 않 으 면 유지 하기 어 려 울 것 입 니 다!
작은 매듭
프로 그래 밍 기술 을 익히 는 것 은 코드 만 작성 하 는 것 으로 는 부족 하 다.한 사람의 프로 그래 밍 수준 을 평가 하 는 것 은 그의 디 버 깅 기능 이 가 벼 운 지 아 닌 지 를 보 는 것 이다.다음 에 저 는 Angular 전용 디 버 깅 도 구 를 통 해 bug 가 나타 나 는 장면 을 모 의 하고 root cause 를 신속하게 발견 하면 해결 방안 을 제시 하 겠 습 니 다.
한 마디 로 하면 Angular 의 디 버 깅 기능 을 습득 하 는 것 은 고급 스 택 엔지니어 로 가 는 계단 입 니 다!이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.