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
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to chuckjaz/angular by chuckjaz 7 years ago
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to chuckjaz/angular by chuckjaz 7 years ago
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to angular/angular by chuckjaz 7 years ago
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to angular/angular by chuckjaz 7 years ago
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to asnowwolf/angular by chuckjaz 7 years ago
- fix(compiler): avoid emitting self importing factories Fixes: #17389 — committed to juleskremer/angular by chuckjaz 7 years ago
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:
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 ?