angular: Angular Package Format 4.0 cannot be bundled with Rollup

I’m submitting a … (check one with “x”)

[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Packages that conform to Angular Package Format 4.0 cannot be imported into a project and then bundled with Rollup. The index.ngfactory.js file that is created for Angular Material, for example attempts to import itself.

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.ɵcmf(i1.MdCoreModule, (([])), (_l) => {

This causes an error with Rollup, since now there is a circular import.

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

Expected behavior

Rollup should be able to interpret ngfactory files, which is already setup to do, however this circular import breaks the build.

Minimal reproduction of the problem with instructions

Steps to reproduce are here: https://github.com/steveblue/angular2-rollup/issues/18

What is the motivation / use case for changing the behavior?

Rollup should be able to bundle packages that conform to the spec cleanly and without modification of ngfactory files.

Please tell us about your environment:

MacOS Sierra, VS Code, npm, Express

  • Angular version: 2.0.X

4.2.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

This is a problem with the build,

  • Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript 2.2.2

  • Node (for AoT issues): node --version = I tried both 6.5.0, 6.9.0

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 19
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

The same problem is with ngx-bootstrap and angular 4.2.0 to 4.2.2. This is quite a huge regression in 4.2 release, affecting many people and being reported in many projects as an issue.

Not fixed in 4.2.2:

{ Error: A module cannot import itself
    at error (/var/lib/jenkins/workspace/cies-UEYRTW7635K3HMG/Frontend/node_modules/rollup/src/utils/error.js:2:14)
    at Module.error$1 [as error] (/var/lib/jenkins/workspace/cies-UEYRTW7635K3HMG/Frontend/node_modules/rollup/src/Module.js:303:2)
    at /var/lib/jenkins/workspace/cies-UEYRTW7635K3HMG/Frontend/node_modules/rollup/src/Bundle.js:415:15
  code: 'CANNOT_IMPORT_SELF',
  pos: 166,
  loc: 
   { file: '/var/lib/jenkins/workspace/cies-UEYRTW7635K3HMG/Frontend/dist/tmp/node_modules/@angular/material/typings/index.ngfactory.js',
     line: 5,
     column: 0 },
  frame: '3: import * as i2 from \'@angular/common\';\n4: import * as i3 from \'@angular/platform-browser\';\n5: import * as i4 from \'./index.ngfactory\';\n   ^\n6: import * as i5 from \'@angular/forms\';\n7: import * as i6 from \'@angular/http\';' }

Happens in all my projects that are using https://github.com/angular/material2. This is a huge regression. Please have a look ASAP!

Getting the same issues on Angular 4.3.4, TS 2.4.2, ng-bootstrap 1.0.0-beta.1

`/dist/ngfactory/node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts:9 import * as i0 from ‘@angular/core’; ^^^^^^

SyntaxError: Unexpected token import`

Same issue as above with an Angular 4.2.2 project that uses https://github.com/ng-bootstrap/ng-bootstrap

Same here for my project, why everything so troublesome, should we revert back to angular 4.1 version ?