Angular Package Format cannot be bundled with Rollup

[steveblue]

Whenever a package that conforms to Angular Package Format 4.0 is imported, the ngfactory.ts file is not directly compatible with Rollup. The bugfix/package-4-import reproduces the issue with Angular Material, but I have been able to reproduce with libraries generated with this repo as well that also comfort to Angular Package Format 4.0.

To reproduce the issue:

git clone https://github.com/steveblue/angular2-rollup.git
git checkout bugfix/package-4-import
npm install -g webdriver-manager
npm install
npm link  // installs `ngr` CLI globally 
ngr --build prod --serve

Example of the error:

[14:44:26] LOG Initial scan complete. Building for prod
[14:44:26] LOG src/*.ts copied to tmp/*ts
[14:44:26] LOG angular-srcs/shims_for_IE.js copied to ./build/lib/angular-srcs/shims_for_IE.js
[14:44:27] LOG core-js copied to ./build/lib/core-js
[14:44:27] LOG reflect-metadata copied to ./build/lib/reflect-metadata
[14:44:27] LOG zone.js copied to ./build/lib/zone.js
[14:44:27] LOG systemjs copied to ./build/lib/systemjs
[14:44:28] LOG @angular copied to ./build/lib/@angular
[14:44:28] LOG rxjs copied to ./build/lib/rxjs
[14:44:28] LOG src/public/ copied to build/
File "./build/index.html" created.
[14:44:28] LOG index.html formatted for prod
[14:44:29] LOG libsass and postcss compiled for prod
[14:44:31] LOG ngc started compiling ngfactory
[14:44:43] LOG ngc compiled /ngfactory 
[14:44:43] 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';

[14:44:53] LOG Rollup bundled bundle.es2015.js in ./build
[14:44:53] LOG Closure Compiler is optimizing bundle.js for prod
ERROR - Cannot read: ./build/bundle.es2015.js

This is due to malformed index.ngfactory.js from Angular Material.

angular2-rollup/ngfactory/node_modules/@angular/material/typings/index.ngfactory.js

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

^ index.ngfactory.js is importing itself

NOT IDEAL WORKAROUND:

Stop the above process.

Duplicate index.ngfactory.js and rename it to index.ngfactory.imports.js Change import * as i4 from './index.ngfactory'; in index.ngfactory.js to import * as i4 from './index.ngfactory.imports';

Run the following commands which would be the next steps in the build after ngc:

npm run bundle:prod npm run transpile:prod npm run serve

The Material Checkbox is there now, it is hiding on the bottom left of the Angular logo. Click to reveal.

This process could be scripted with a custom build in this repo. It could get tricky with multiple libraries though, each would probably have to be whitelisted for a script. This of course is not ideal, ngc should be able to handle ngfactory files in a way Rollup can interpret.

[sebek64]

I can see the same problem in an angular project with ngx-bootstrap library after upgrade of angular from 4.1 to 4.2.

[glemiere]

Check this out. https://github.com/angular/angular/commit/c112232fa3400cf672ec654191a037bb4c7c988d

[steveblue]

The issue preventing Package Format 4.0 from building correctly has been fixed in 4.3.0-beta.0. I will update a branch ASAP to track this change.

[steveblue]

Updated on feature/4.3.0-beta.0 branch. Verified the library bundle is not producing circular imports in ngfactory files any longer.