HMR не обновляет представление с помощью Angular CLI

Мы столкнулись с той же проблемой. Это было решено путем удаления зависимостей разработчика, связанных с Webpack, и выполнения новой установки npm.

rm -R package-lock.json node_modules npm cache clean --force npm i

Надеюсь, это поможет.

Немного поздно для этого ... то, что сработало для меня, было в моей папке ClientApp. У меня была папка / dist со всеми битами js ... HMR не будет работать, если есть папка dist. Dist попадает туда, если вы выполняете сборку. Удалите папку dist, затем запустите ng serve. В моем случае у меня есть основное приложение .net, на котором оно размещено, поэтому я создал его и запустил для своего углового приложения... протестировал, изменив html-файл... приложение должно перезагрузиться в браузере с новым содержимым.

Я думаю, что это может быть полезно для некоторых. Я решил свою проблему, обновив Angular до версии 7 и добавив следующую строку в main.ts для HMR.

module['hot'].accept();

Следующим образом:

if (environment.hmr) {
    if (module['hot']) {
        module['hot'].accept();
        hmrBootstrap(module, bootstrap);
    } else {
        console.error('HMR is not enabled for webpack-dev-server!');
        console.log('Are you using the --hmr flag for ng serve?');
    }
} else {
    console.log('hot');
    bootstrap().catch(err => console.log(err));
}

До сих пор HMR работал совершенно нормально. У меня не было времени на дальнейшую отладку, но, скорее всего, это была несовместимость зависимостей, которая могла вызвать это с моей стороны.

Вот моя установка, в настоящее время она отлично работает в новейших версиях. Вы можете избавиться от ngrx вещей, если они вам не нужны :-)

// main.ts

// ...
import { 
  bootloader, createInputTransfer, createNewHosts, removeNgStyles 
} from '@angularclass/hmr/dist/helpers'; // For correct treeshaking    

if (environment.production) {
  enableProdMode();
}

type HmrModule<S> = {
  appRef: ApplicationRef,
}
type HmrNgrxModule<S, A> = HmrModule<S> & {
  store: { dispatch: (A) => any } & Observable<S>,
  actionCreator: (s: S) => A
}

const isNgrxModule = 
  <S, A, M extends HmrNgrxModule<S, A>>(instance: HmrModule<S> | HmrNgrxModule<S, A>)
  : instance is M =>
    !!((<M>instance).store && (<M>instance).actionCreator);

function processModule<S, A, M extends HmrModule<S> | HmrNgrxModule<S, A>>(ngModuleRef: NgModuleRef<M>) {

  const hot = module['hot'];
  if (hot) {

    hot['accept']();

    const instance = ngModuleRef.instance;
    const hmrStore = hot['data'];

    if (hmrStore) {
      hmrStore.rootState 
        && isNgrxModule(instance) 
        && instance.store.dispatch(instance.actionCreator(hmrStore.rootState));
      hmrStore.restoreInputValues && hmrStore.restoreInputValues();
      instance.appRef.tick();
      Object.keys(hmrStore).forEach(prop => delete hmrStore[prop]);
    }

    hot['dispose'](hmrStore => {
      isNgrxModule(instance) && instance.store.pipe(take(1)).subscribe(s => hmrStore.rootState = s);
      const cmpLocation = instance.appRef.components.map(cmp => cmp.location.nativeElement);
      const disposeOldHosts = createNewHosts(cmpLocation);
      hmrStore.restoreInputValues = createInputTransfer();
      removeNgStyles();
      ngModuleRef.destroy();
      disposeOldHosts();
    });
  }
  else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }

  return ngModuleRef;
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
const hmrBootstrap = () => bootloader(() => bootstrap().then(processModule));

environment.hmr
  ? hmrBootstrap()
  : bootstrap();

// app.module.ts

// ...
export class AppModule {
  constructor(
    public appRef: ApplicationRef 
    // , ...
  ){}
}

// angular.json

"build": {
  "configurations": {
    "hmr": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.hmr.ts"
        }
      ]
    }
  }
},
"serve": {
  "configurations": {
    "hmr": {
      "browserTarget": "AppName:build:hmr"
    }
  }
}

И я запускаю его с ng serve --hmr -c=hmr

Надеюсь, это немного поможет :-)