CODEWITHSUNDEEP
javascriptangularangular2-aot
steveblue
steveblue

Reputation: 490

AOT compile fails for Angular Material or Package Format 4.0

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.

Upvotes: 1

Views: 515

Answers (2)

glemiere
glemiere

Reputation: 5034

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

Upvotes: 2

steveblue
steveblue

Reputation: 490

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.

Upvotes: 0

Related Questions