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)

我认为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;
  };

Answer 1

是的，确实如此。但我诚实地认为AngularClass版本的bootstrapping是开发的理想选择。最近也开始使用它。它有助于避免所有依赖性问题。

Answer 2

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

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

_decorateModuleRef身份版本只是在生产模式下通过（显而易见的正确？:)，在开发模式下，它会被另一个启用调试和配置文件工具的功能覆盖。 enableDebugTools需要组件引用作为参数，这就是他们从app ref中获取第一个组件（根应用程序组件）的原因。

Answer 3

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

生产

在制作中你只需要能够执行此操作的引导加载程序
export function bootloader(main) {
  if (document.readyState === 'complete') {
    main()
  } else {
   document.addEventListener('DOMContentLoaded', main);
  }
}
你会以正常的方式引导你的应用程序，在生产中，dom 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
}

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

3 个答案:

生产