Angular2包装promise.resolve中的bootstrap功能,

Question

我是一个js新手,我想知道是否有人可以解释你在angular2 bootstrapping类中做到这一点的好处(我从https://github.com/angularclass/angular2-webpack-starter得到了这个):

export function main(): Promise<any> {
    return platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(decorateModuleRef)
    .catch(err => console.error(err));
}

// Ripped this from angularclass/hmr
if (document.readyState === 'complete') {
    main();
} else {
    document.addEventListener('DOMContentLoaded', main);
}

vs只是做 platformBrowserDynamic().bootstrapModule(AppModule)

我是否认为decorateModuleRef代码environment.ts只是在prod模式中返回标识,否则它会调用enableDebugTools它从注入器获取的每个组件引用？

let _decorateModuleRef = function identity<T>(value: T): T { return value; };

if ('build' === process.env.ENV) {
  // Production
  disableDebugTools();
  enableProdMode();

  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in production
  ];

  IMPORTS = [
      ...IMPORTS
  ];

  DECLARATIONS = [
      ...DECLARATIONS
  ];
} else {

  _decorateModuleRef = (modRef: any) => {
    const appRef = modRef.injector.get(ApplicationRef);
    const cmpRef = appRef.components[0];

    let _ng = (<any>window).ng;
    enableDebugTools(cmpRef);
    (<any>window).ng.probe = _ng.probe;
    (<any>window).ng.coreTokens = _ng.coreTokens;
    return modRef;
  };

Answer 1

代码存在的主要原因是为了帮助开发和 HMR，如果您检查AngularClass HMR 存储库，更准确的信息如下：

生产

在生产中，您只需要引导加载程序即可完成此操作

export function bootloader(main) {
  if (document.readyState === 'complete') {
    main()
  } else {
   document.addEventListener('DOMContentLoaded', main);
  }
}

在 dom 准备好后，您将在生产中以正常方式引导您的应用程序。另外，在生产中，您应该删除加载器

但为什么你需要那个？主要原因是：

bootloader 只需要在引导之前检测 dom 是否已准备好，否则引导。这是必需的，因为 dom 在重新加载期间已经准备好

所以基本上当 webpack 注意到文件更改时，它可以告诉 Angular2 强制自己再次渲染。

if (document.readyState === 'complete') {
    main(); //this will happen when the app is already boostraped and a file was changed.
} else {
    document.addEventListener('DOMContentLoaded', main); //This will happen whenever we open the app for the very first time
}