标签: angular2-aot

Ahead-of-Time Compilation(或AoT)是Angular2中提供的一项功能.但我在官方网站上找不到有关它的好解释.

有人可以明确定义它吗？

我正在使用最新的angular-cli(beta-18)进行项目.我知道cli仍然处于非常早期的阶段,但是我很困惑为什么我的最终束大小实际上没有 AoT.

当我跑ng build --prod,它是1.08 MB:

                                 Asset       Size  Chunks             Chunk Names                                                        
   main.53d637ff9422b65418e6.bundle.js    1.08 MB    0, 2  [emitted]  main                                                               
 styles.01cffb95000fdb84402c.bundle.js     8.9 kB    1, 2  [emitted]  styles                                                             
                             inline.js    1.45 kB       2  [emitted]  inline                                                             
  main.53d637ff9422b65418e6.bundle.map    7.24 MB    0, 2  [emitted]  main                                                               
styles.01cffb95000fdb84402c.bundle.map    40.3 kB    1, 2  [emitted]  styles                                                             
inline.d41d8cd98f00b204e980.bundle.map    13.5 kB       2  [emitted]  inline                                                             
main.53d637ff9422b65418e6.bundle.js.gz     236 kB          [emitted]                                                                     
                            index.html  907 bytes          [emitted]                                                                     
                     assets/.npmignore    0 bytes          [emitted]                                                                     
                           favicon.ico    5.43 kB          [emitted] 

当我跑ng build --prod --aot,它是1.26 MB.

                                 Asset       Size  Chunks …

刚开始使用Angular 2.

1. 角度2中的各种Bootstrapping选项有哪些？

2. 为什么当我进行更改并刷新index.html时,只需要很少的时间来检索HTML标记？

3. 他们之间的差异

我正在开发一个Angular库,我正在与AOT编译兼容.我已经开始使用一些gulp任务了ngc,但是我更喜欢使用,@ngtools/webpack因为它允许我使用SASS和PUG作为我的样式和模板的更直接的方法.但是,我找不到从其虚拟文件系统中获取声明或元数据文件的方法.有没有办法发出这些文件？

概观

我看到奇怪的行为,因为通过解构赋值(或Object.assign)添加到对象的属性在传递时会出现,forRoot但在注入服务时不存在.此外,初始化后进行的更新在传递到forRoot服务时存在但在注入服务时不存在.这仅在使用AOT构建时发生.

我创建了一个重现问题的最小项目:https: //github.com/bygrace1986/wat

包版本

• 角度:5.2.0
• angular-cli:1.6.4(我的应用),1.7.4(我的测试)
• 打字稿:2.4.2

建立

创建一个具有静态forRoot方法的模块,该方法将接受一个对象,然后通过它提供InjectionToken并注入到服务中.

TestModule

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TestDependency, TEST_DEPENDENCY, TestService } from './test.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class TestModule {
  static forRoot(dependency?: TestDependency): ModuleWithProviders {
    return {
      ngModule: TestModule,
      providers: [
        TestService,
        { provide: TEST_DEPENDENCY, useValue: dependency }
      ]
    }
  }
}

TestService的

import …

我正在尝试运行i18n提取工具来翻译我的角度2应用程序.但是当我试图跑步时,我得到:

Failed on type {"filePath":"C:/ng/anbud/src/app/_common/logging-error handler.ts","name":"LoggingErrorHandler"} with error Error: Error encountered resolving symbol values statically. Could
 not resolve type LoggingErrorHandlerOptions (position 34:53 in the original .ts file), resolving symbol LoggingErrorHandler in C:/ng/anbud/src/app/_common/logging-error-handler.ts
Error: Error encountered resolving symbol values statically. Could not resolve type LoggingErrorHandlerOptions (position 34:53 in the original .ts file), resolving symbol LoggingErrorHandle
r in C:/ng/anbud/src/app/_common/logging-error-handler.ts
    at simplifyInContext (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:469:23)
    at StaticReflector.simplify (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:472:22)
    at StaticReflector.parameters (C:\ng\anbud\node_modules\@angular\compiler-cli\src\static_reflector.js:102:47)
    at CompileMetadataResolver.getDependenciesMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14317:56)
    at CompileMetadataResolver.getTypeMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14282:28)
    at CompileMetadataResolver.getProviderMetadata (C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14473:42)
    at C:\ng\anbud\node_modules\@angular\compiler\bundles\compiler.umd.js:14421:47
    at Array.forEach (native) …

我在使用自定义组件时遇到了以下问题.

错误:静态解析符号值时遇到错误.不支持函数调用.考虑使用对导出函数的引用替换函数或lambda,在E中解析符号getValue:/ AOT/systemjs-aot-16 62901741/src /

core.ts

export function getValue(

 ):any{ return "";}

CUS-component.ts

import { getValue } from './core.ts';
export let compTest = getValue();

app.module.ts

import { compTest } from './cus-component';

 @NgModule({
 imports: [BrowserModule, FormsModule, HttpModule,  RouterModule.forRoot(rootRouterConfig, { useHash: true })],
 declarations: [ HomeComponent,compTest ],
 bootstrap: [AppComponent]
})
export class AppModule { }

我有一个由ng cli生成的角度2应用程序.

- 当我运行build(或)ng build --prod --aot = false并提供页面时,一切正常.
- 但是当我尝试通过运行ng serve --aot = true启用aot并提供服务时,该页面会出现多个DI错误,如下所示

很难调试.有关如何调试这些问题的任何想法？

例外:没有选项提供商!
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
(匿名)@ application_ref.js:272
webpackJsonp.679.ZoneDelegate.invoke @ zone.js:229
onInvoke @ ng_zone.js:271
webpackJsonp.679. ZoneDelegate.invoke @ zone.js:228
webpackJsonp.679.Zone.run @ zone.js:113
(匿名)@ zone.js:509
webpackJsonp.679.ZoneDelegate.invokeTask @ zone.js:262
onInvokeTask @ ng_zone.js: 262
webpackJsonp.679.ZoneDelegate.invokeTask @ zone.js:261
webpackJsonp.679.Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:405

我一直试图在我的Angular应用程序中使用ngTools设置AOT(使用Webpack进行模块加载)并且有一个绝对的噩梦.我已经浏览了这里和这里的文档中的各种资源,并阅读了ngTools自述文件,查看了Angular CLI中的示例(此应用程序不是使用Angular CLI构建的,但我认为它至少是通过Angular + Webpack + Sass + ngTools 上的这个资源找到一个有用的参考资料(我也使用SASS但是我的webpack.config.aot.js编译得很好 - 它确实阻止我切换到ngc,至少到目前为止正如我发现的那样,这是我在一些例子中看到过的,以及我在过去几天发现的每个github问题或stackoverflow帖子,无论我做什么尝试构建aot产生以下错误:

 ERROR in window is not defined

 ERROR in /Users/nataliecoley/development/company-app-name/src/main-aot.ts (2,36): Cannot find module '../aot/src/app/app.module.ngfactory'.

 ERROR in ./src/main-aot.ts

找不到模块:错误:无法解析'/ Users/nataliecoley/development/company-app-name/src'中的'../aot/src/app/app.module.ngfactory'@ ./src/main- aot.ts 2:0-73

目前我一直在忽略第一个问题(部分是因为我似乎无法在网上发现任何其他人有这个错误,部分是因为我搜索了我的整个代码库,不包括节点模块,并且window没有出现在但是如果有人知道可能来自哪里(或者你认为它与错误2和3相关),我愿意接受建议.

虽然我认为第二个和第三个错误消息是我的问题的主要来源,因为很明显,app.module.ts之前没有编译,main-aot.ts所以main-aot.ts编译它时无法找到文件.但是,我根据我专门发现的文档进行了设置,以便app.module.ngfactory在编译器到达时已经编译好并准备好了main-aot.ts.

很明显,我的设置中缺少一些部分,因为我在网上找到的每个解决方案设置略有不同,我似乎无法缩小范围.所有我知道的是,到目前为止我没有尝试过的任何内容消除了这个错误(或产生任何其他新错误),并且我很乐意帮助那些成功设置AOT + ngTools + webpack + Angular来缩小正在发生的事情的人这里.

这是我的文件结构(简化):

.
+-- config/
|   +-- helpers.js
|   +-- webpack.common.js
|   +-- webpack.dev.js
|   +-- webpack.prod.js
+-- src/
| …

我试图在我的项目中使用AOT编译,我有7个延迟加载的模块.AOT编译似乎工作(我的应用程序更快),但我的应用程序的大小比没有AOT编译大1 Mo.当我使用bundle analyzer插件查看发生了什么时,似乎导入了我的共享模块的所有地方(也就是说,几乎在我所有的延迟加载的模块中),它被重新导入,所以有一个共享模块的副本我的每一块!

有人有任何解决方案吗？

我的共享模块中没有任何提供程序.为了使AOT与延迟加载一起工作,我不得不将此配置用于webpack:

module.exports = function(env) {
  return webpackMerge({
    plugins: [
    new AotPlugin({
      tsConfigPath: 'tsconfig-aot.json',
      entryModule: helpers.root('src/app/app.module#AppModule')
    }),
    ]
  }, commonConfig, {
    devtool: 'source-map',

    output: {
      path: helpers.root('export/dist'),
      publicPath: '/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
      rules: [
      {
        test: /\.ts$/,
        use: ['@ngtools/webpack']
      }
      ]
    },

    plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      compress: { warnings: false },
      mangle: {
        keep_fnames: true
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    }), …