Angular Material或Package Format 4.0的AOT编译失败

Question

When I import Angular Material (or any other Package Format 4.0 Modules), AOT compile fails.

 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 }; } } 

When I compile with AOT the generated ngfactory files for Angular Material create cyclical imports.

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,

This of course breaks the next step of the build process. Rollup can't bundle.

[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';

This is replicated in 4.2.0-rc.2 and 4.2.0 .

Answer 1

This has been fixed here .

You can update @angular/compiler and @angular/compiler-cli to 4.3.0-beta.0 .

However you will discover a new issue...

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

EDIT

You can follow this second issue here

Answer 2

This is most likely a bug with Package Format 4.0, tsickle and ngfactories and I have filed it with the Angular team. There is a workaround.

After running ngc, find the ngfactory files for each library, duplicate the file, rename it with the suffix .imports.js then in the original ngfactory import the new file. This will remove the cyclical import.