programing

브라우저 새로 고침 후 angularjs 코드 변경이 표시되지 않음

telebox 2023. 2. 26. 09:32
반응형

브라우저 새로 고침 후 angularjs 코드 변경이 표시되지 않음

.hmtl 파일 또는 .js 파일에서 코드를 변경해도 브라우저는 이전 코드를 렌더링하고 새 코드 변경은 브라우저 결과에 나타나지 않습니다.

예를 들어.html 파일에 다음 두 줄의 코드를 추가합니다.

    <div class="control-group">
        <label class="control-label">First Name</label>
        <div class="controls readonly">
            {{profile.FirstName}}
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">Last Name</label>
        <div class="controls readonly">
            {{profile.LastName}}
        </div>
    </div>

다음으로 다음 작업을 수행합니다.

  1. VS2013에서 내 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 브라우저(IE 또는 Chrome)에서 봅니다.
  2. 내 응용 프로그램에 로그인합니다.
  3. 각각의 페이지로 이동하면 오래된 html 파일의 렌더링이 표시됩니다.새로 추가된 2개의 div 요소가 전혀 표시되지 않습니다.
  4. 심지어 브라우저를 새로 고치려고 f5를 눌렀지만 여전히 운이 없다.

내가 뭘 잘못하고 있지?

브라우저에서 F12 키를 눌러 Developer Tools를 표시합니다.캐시를 무효로 합니다.페이지를 새로고침합니다.

를 하는 것 외에, " " " " " " " 를 할 수 .Web.config【IIS】각형.

<configuration>

  <!-- Disable IIS caching for directories containing Angular templates and scripts -->
  <location path="app">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache"/>
      </staticContent>
    </system.webServer>
  </location>

...
</configuration>

는 My Angular root 입니다.app/파일 구조에 따라 수정이 필요할 수 있습니다.

TypeScript만!

tsconfig.json에서 추가...

"compileOnSave": true, 

개발 도구를 사용하여 캐시를 비활성화해 보십시오.

https://developer.chrome.com/devtools/docs/settings#general

chrome에서 devTools를 열고 네트워크 탭을 선택한 다음 네트워크 탭에서 캐시 사용 안 함을 선택하고 페이지를 다시 로드합니다.

나는 이전의 답변 중 어느 것도 통하지 않았다.Chrome을 사용하고 있었는데, 업데이트를 볼 수 있는 것은 innocnito 창을 여는 것 뿐이었습니다.일반적인 브라우저 창에서는 어떤 이유로든 최신 자산을 얻을 수 없습니다.

캐시 지우기, devtools 캐시 비활성화 및 하드 새로고침을 시도했지만 소용이 없었습니다.DNS 캐시를 지우는 방법밖에 없었습니다.자세한 내용은 다음 링크를 참조하십시오.

컴퓨터와 웹 브라우저에서 DNS 캐시를 클리어하는 방법


명령줄 사용 방법은 다음과 같습니다.

Windows 7 이전 버전

ipconfig /flushdns

윈도 8

ipconfig /flushdns

OSX(요세미티, El Capitain, Sierra)

sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder

aspnetcore 환경변수를 운영에서 개발로 변경해야 합니다.공식 웹사이트:

...ASP에 알릴 환경변수를 설정합니다.개발 모드로 실행되는 NET:

  • Windows에서 PowerShell을 사용하는 경우 $Env:ASPNETCORE_ENVironment = "개발"
  • Windows에서 cmd.exe를 사용하는 경우 setx ASPNETCORE_ENVIENT "Development"를 실행하고 명령 프롬프트를 재시작하여 변경을 적용합니다.
  • Mac/Linux를 사용하는 경우 내보내기 ASPNETCORE_ENVIENT=개발을 실행합니다.

Linux 의 경우는, 슈퍼 유저로서 실행할 필요가 있는 경우가 있습니다.

sudo export ASPNETCORE_ENVIRONMENT=Development

변음음 음음음음 음음음 음음음 음음 the the the로 돌아갈 수 .Production여러 에서 .launchSettings.json 일::

{
      "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
         "applicationUrl": "http://localhost:40088/",
         "sslPort": 0
      }
   },
     "profiles": {
       "IIS Express": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "environmentVariables": {
              "ASPNETCORE_ENVIRONMENT": "Development"
          }
       },
       "IIS Express (Staging)": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Staging"
         }
       }
     }  
   }

환경에 대한 자세한 내용은 여기를 참조하십시오.

Chrome에서 F12 > 네트워크 탭으로 이동 > 캐시 비활성화를 누릅니다.

여기에 이미지 설명 입력

소스에서 clientApp 폴더에서 dist 폴더를 삭제하여 문제를 해결한 후 자동 새로 고침을 다시 시작했습니다.

또는 Visual Studio 2013의 Browserlink를 사용하여 페이지를 자동으로 다시 로드할 수 있습니다.

http://www.asp.net/visual-studio/overview/2013/using-browser-link

.yarn webpack:build클라이언트 코드를 다시 컴파일합니다. 이외의 경우는, 「」의 변경합니다..HTML,.json,.ts파일은 반영되지 않습니다.

Visual Studio에서 dist 폴더를 삭제하기만 하면 다시 자동으로 새로 고쳐집니다.

*** Angular 7용*****

브라우저의 페이지 새로고침 버튼을 마우스 오른쪽 버튼으로 클릭하고 "비운 캐시와 하드 새로고침"을 선택합니다.

Angular 파일 내 내 angular angular angular angular Angular.json inside inside inside inside inside inside inside inside 문문 inside in in in in in in in in in in in 。"deployUrl": 상대경로는 다음과 같아야 합니다."/support/yourpagenam/bundle/dist/"따라서 Angular 파일에서 변경된 내용은 브라우저에 반영되지 않습니다.

문제

  • 개발 환경의 정적 파일 클라이언트 측(브라우저) 캐싱
  • 서버측(IIS Express)에서 개발 환경 내 정적 파일 캐싱

솔루션

For Client-side (Browser) caching of static files in dev enviornment

  • Web.Config/ApplicationHost.config Approach: 위의 @NateBarbettini가 제안하는 Web.config 접근법.이 접근법은 web.config 파일이 아닌 Applicationhost.config에도 적용할 수 있습니다.
  • 위의 @Phil Degenhardt가 제안한 IE의 "Always Refresh From Server"를 참조하십시오.아래에서 스크린샷을 찾아주세요.여기에 이미지 설명 입력
  • 브라우저 주소 표시줄에서 원본 파일 위치로 이동합니다.자바스크립트자바스크립트이치노다시 돌아가서 응용 프로그램의 올바른 랜딩 페이지로 이동할 수 있습니다.JavaScript를 사용합니다.' 'app/home/home-account.js'를 하지 않는 데 . 다음 브라우저로 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js이렇게 하면 내용이 표시됩니다.다음으로 어플리케이션의 홈 페이지로 이동합니다.이 경우는,'http://[your-host/localhost]:[specified port of your application]/'

For Server-side (IIS-Express) caching of static files in dev enviornment

  • IIS Express appcmd 명령줄 유틸리티를 방문합니다.제 경우 appcmd는 "C:"에 있습니다.\Program Files(x86)\IIS Express\appcmd.exe" 경로입니다.그 후 사용SITE list그리고.SITE deleteiexexpress에 캐시된 임시 파일을 제거하는 명령입니다.

  • 여기에 언급된 IE에 고유한 솔루션이 하나 있습니다. Visual Studio 2013은 이전 버전의 .js 파일을 캐싱합니다.

이 문제는 브라우저에 의해 저장된 캐시 때문에 발생합니다.응용 프로그램을 실행하기 전에 브라우저에 저장된 캐시 및 쿠키를 삭제할 수 있습니다.

IIS 관리자를 통해 콘텐츠를 만료하도록 HTTP 응답 헤더를 설정합니다.

  1. 웹 응용 프로그램의 HTTP 응답 헤더 모듈을 엽니다.
  2. [ Actions ]페인으로 [Set Common header]을 클릭합니다.

HTTP 응답 헤더가 만료되도록 설정

https://www.iis.net/configreference/system.webserver/staticcontent/clientcache

Inkognito 모드에서는 캐시가 비활성화되어 Voila가 작동했기 때문에 링크를 열었습니다.

언급URL : https://stackoverflow.com/questions/28311542/angularjs-code-changes-do-not-show-up-after-browser-refresh

반응형