Angular2 在 promise.resolve 中包装引导功能，答案

【问题标题】：Angular2 wrapping bootstrap functionality in promise.resolve,Angular2 在 promise.resolve 中包装引导功能，
【发布时间】：2017-02-05 10:45:44
【问题描述】：

我是一个 js 新手，我想知道是否有人可以在你的 angular2 引导类中解释这样做的好处（我从 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)

我认为 environment.ts 中的 decorateModuleRef 代码只是在 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;
  };

【问题讨论】：

标签： angular promise

【解决方案1】：

代码存在的主要原因是为了帮助 Dev 和 HMR，如果您查看 AngularClass HMR repo，更准确地说是 here：

生产

在生产中，您只需要执行此操作的引导加载程序
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
}

【讨论】：

【解决方案2】：

这是在DOMContentLoaded 事件触发后执行引导代码时试图覆盖的情况，这就是他们检查readyState 的原因：

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

_decorateModuleRef 身份版本在生产模式下只是通过（很明显，对吗？:)，在开发模式下，它会被另一个启用调试和分析工具的功能覆盖。 enableDebugTools 需要组件引用作为参数，这就是为什么他们从应用引用中获取第一个组件（根应用组件）。

【讨论】：

【解决方案3】：

是的，它就是这样做的。但老实说，我认为 AngularClass 版本的引导非常适合开发。最近也开始使用它。它有助于避免所有依赖问题。

【讨论】：