Angular Material 或包格式 4.0 的 AOT 编译失败

Question

当我导入 Angular Material（或任何其他包格式 4.0 模块）时，AOT 编译失败。

import { NgModule, ModuleWithProviders } from '@angular/core';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports:      [ 
                    MdButtonModule, 
                    MdCheckboxModule
                ],
  exports:      [ 
                    MdButtonModule, 
                    MdCheckboxModule
                ]
})

export class NorSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: NorSharedModule
    };
  }
}

当我使用 AOT 编译时，为 Angular Material 生成的 ngfactory 文件创建循环导入。

index.ngfactory.ts

/**
 * @fileoverview This file is generated by the Angular template compiler.
 * Do not edit.
 * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride}
 */
 /* tslint:disable */

import * as i0 from '@angular/core';
import * as i1 from '@angular/material';
import * as i2 from '@angular/common';
import * as i3 from '@angular/platform-browser';
import * as i4 from './index.ngfactory';
import * as i5 from '@angular/forms';
import * as i6 from '@angular/http';
export const MdCoreModuleNgFactory:i0.NgModuleFactory<i1.MdCoreModule> = i0.ɵcmf(i1.MdCoreModule,

这当然会破坏构建过程的下一步。 Rollup 无法捆绑。

[8:51:38] LOG ngc started compiling ngfactory
[8:51:50] LOG ngc compiled /ngfactory 
[8:51:50] LOG Rollup started bundling ngfactory
Error: A module cannot import itself
ngfactory/node_modules/@angular/material/typings/index.ngfactory.js (5:0)
3: import * as i2 from '@angular/common';
4: import * as i3 from '@angular/platform-browser';
5: import * as i4 from './index.ngfactory';
   ^
6: import * as i5 from '@angular/forms';
7: import * as i6 from '@angular/http';

这在 4.2.0-rc.2 和 4.2.0 中复制。

Answer 1

这很可能是 Package Format 4.0、tsickle 和 ngfactories 的错误，我已将其提交给 Angular 团队。有一个解决方法。

运行ngc后，找到每个库的ngfactory文件，复制文件，重命名后缀为.imports.js，然后在原来的ngfactory中导入新文件。这将删除循环导入。

Answer 2

此问题已修复 here。

您可以将 @angular/compiler 和 @angular/compiler-cli 更新为 4.3.0-beta.0。

但是你会发现一个新问题...

(function (exports, require, module, __filename, __dirname) { import * as i0 from '@angular/core';
SyntaxError: Unexpected token import

编辑

你可以关注这个第二期here

Angular Material 或包格式 4.0 的 AOT 编译失败

AOT compile fails for Angular Material or Package Format 4.0

javascript

angular2-aot

angular