Build optimizer: removing BrowserAnimationsModule

[valorkin]

"@angular/cli": "1.3.0-rc.5"
"typescript": "2.4.2" ( and 2.3.4)

Workaround: ng build --preserve-symlinks allows to work with npm linked modules,
and remove tsconfig path entries

Issue:
BrowserAnimationsModule is completely removed from main.js bundle
which leads to issue in _createProviderInstance
here: https://github.com/angular/angular/blob/39b92f7e546b8bdecc0e08c915d36717358c122b/packages/core/src/view/ng_module.ts#L110

because ctor will be undefined

How to reproduce

1. ng new test-bob
2. in app.module.ts add
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   and

  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],

3. in tsconfig.app.json add line to paths

"types": [],
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"]
    }

Why add this kind of mapping?
It is needed for successful build when you work with linked angular modules

[valorkin]

My initial guess was that this check was broken
https://github.com/angular/devkit/pull/77/files

simple logging shows that without path string
build optimizer works with this files list
note: boolean value in logs result of isAngularPackage.test(inputFilePath)

most interesting is
without path string

 17    node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js  :  true
 18    node_modules/@angular/animations/@angular/animations.es5.js  :  true
 19    node_modules/@angular/animations/@angular/animations/browser.es5.js  :  true

with path string

 15    node_modules/@angular/animations/@angular/animations.es5.js  :  true
 21    node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js  :  true
 22    node_modules/@angular/animations/bundles/animations-browser.umd.js  :  true

build optimizer build without `path` string

 0    node_modules/css-loader/lib/css-base.js  :  false
 1    src/main.ts  :  false
 2    src/polyfills.ts  :  false
 3    src/environments/environment.ts  :  false
 4    src/$$_gendir/app/app.module.ngfactory.ts  :  false
 5    src/app/app.module.ts  :  false
 6    src/$$_gendir/app/app.component.ngfactory.ts  :  false
 7    src/app/app.component.ts  :  false
 8    src/$$_gendir/app/app.component.css.shim.ngstyle.ts  :  false
 9    node_modules/@angular/platform-browser/@angular/platform-browser.es5.js  :  true
 10    node_modules/@angular/core/@angular/core.es5.js  :  true
 11    node_modules/core-js/es6/reflect.js  :  false
 12    node_modules/core-js/es7/reflect.js  :  false
 13    node_modules/zone.js/dist/zone.js  :  false
 14    node_modules/@angular/common/@angular/common.es5.js  :  true
 15    node_modules/rxjs/Observable.js  :  false
 16    node_modules/rxjs/Subject.js  :  false
 17    node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js  :  true
 18    node_modules/@angular/animations/@angular/animations.es5.js  :  true
 19    node_modules/@angular/animations/@angular/animations/browser.es5.js  :  true
 20    node_modules/webpack/buildin/global.js  :  false
 21    node_modules/rxjs/observable/merge.js  :  false
 22    node_modules/rxjs/operator/share.js  :  false
 23    node_modules/core-js/modules/es6.reflect.construct.js  :  false
 24    node_modules/core-js/modules/es6.reflect.apply.js  :  false
 25    node_modules/core-js/modules/es6.reflect.define-property.js  :  false
 26    node_modules/core-js/modules/es6.reflect.delete-property.js  :  false
 27    node_modules/core-js/modules/es6.reflect.get.js  :  false
 28    node_modules/core-js/modules/es6.reflect.enumerate.js  :  false
 29    node_modules/core-js/modules/es6.reflect.get-own-property-descriptor.js  :  false
 30    node_modules/core-js/modules/es6.reflect.is-extensible.js  :  false
 31    node_modules/core-js/modules/es6.reflect.get-prototype-of.js  :  false
 32    node_modules/core-js/modules/es6.reflect.has.js  :  false
 33    node_modules/core-js/modules/es6.reflect.own-keys.js  :  false
 34    node_modules/core-js/modules/es6.reflect.prevent-extensions.js  :  false
 35    node_modules/core-js/modules/es6.reflect.set.js  :  false
 36    node_modules/core-js/modules/es6.reflect.set-prototype-of.js  :  false
 37    node_modules/core-js/modules/_core.js  :  false
 38    node_modules/core-js/modules/es7.reflect.define-metadata.js  :  false
 39    node_modules/core-js/modules/es7.reflect.delete-metadata.js  :  false
 40    node_modules/core-js/modules/es7.reflect.get-metadata.js  :  false
 41    node_modules/core-js/modules/es7.reflect.get-metadata-keys.js  :  false
 42    node_modules/core-js/modules/es7.reflect.get-own-metadata.js  :  false
 43    node_modules/core-js/modules/es7.reflect.get-own-metadata-keys.js  :  false
 44    node_modules/core-js/modules/es7.reflect.has-metadata.js  :  false
 45    node_modules/core-js/modules/es7.reflect.has-own-metadata.js  :  false
 46    node_modules/core-js/modules/es7.reflect.metadata.js  :  false
 47    node_modules/tslib/tslib.es6.js  :  false
 48    node_modules/rxjs/Subscription.js  :  false
 49    node_modules/rxjs/Subscriber.js  :  false
 50    node_modules/rxjs/SubjectSubscription.js  :  false
 51    node_modules/rxjs/util/ObjectUnsubscribedError.js  :  false
 52    node_modules/rxjs/util/root.js  :  false
 53    node_modules/rxjs/symbol/observable.js  :  false
 54    node_modules/rxjs/util/toSubscriber.js  :  false
 55    node_modules/rxjs/symbol/rxSubscriber.js  :  false
 56    node_modules/rxjs/operator/merge.js  :  false
 57    node_modules/rxjs/operator/multicast.js  :  false
 58    node_modules/core-js/modules/_object-create.js  :  false
 59    node_modules/core-js/modules/_a-function.js  :  false
 60    node_modules/core-js/modules/_export.js  :  false
 61    node_modules/core-js/modules/_an-object.js  :  false
 62    node_modules/core-js/modules/_is-object.js  :  false
 63    node_modules/core-js/modules/_fails.js  :  false
 64    node_modules/core-js/modules/_bind.js  :  false
 65    node_modules/core-js/modules/_global.js  :  false
 66    node_modules/core-js/modules/_object-dp.js  :  false
 67    node_modules/core-js/modules/_to-primitive.js  :  false
 68    node_modules/core-js/modules/_object-gopd.js  :  false
 69    node_modules/core-js/modules/_object-gpo.js  :  false
 70    node_modules/core-js/modules/_has.js  :  false
 71    node_modules/core-js/modules/_iter-create.js  :  false
 72    node_modules/core-js/modules/_own-keys.js  :  false
 73    node_modules/core-js/modules/_property-desc.js  :  false
 74    node_modules/core-js/modules/_set-proto.js  :  false
 75    node_modules/core-js/modules/_metadata.js  :  false
 76    node_modules/core-js/modules/es6.set.js  :  false
 77    node_modules/core-js/modules/_array-from-iterable.js  :  false
 78    node_modules/rxjs/util/isArray.js  :  false
 79    node_modules/rxjs/util/isObject.js  :  false
 80    node_modules/rxjs/util/isFunction.js  :  false
 81    node_modules/rxjs/util/tryCatch.js  :  false
 82    node_modules/rxjs/util/errorObject.js  :  false
 83    node_modules/rxjs/util/UnsubscriptionError.js  :  false
 84    node_modules/rxjs/Observer.js  :  false
 85    node_modules/rxjs/observable/ArrayObservable.js  :  false
 86    node_modules/rxjs/operator/mergeAll.js  :  false
 87    node_modules/rxjs/util/isScheduler.js  :  false
 88    node_modules/rxjs/observable/ConnectableObservable.js  :  false
 89    node_modules/core-js/modules/_object-dps.js  :  false
 90    node_modules/core-js/modules/_dom-create.js  :  false
 91    node_modules/core-js/modules/_enum-bug-keys.js  :  false
 92    node_modules/core-js/modules/_shared-key.js  :  false
 93    node_modules/core-js/modules/_html.js  :  false
 94    node_modules/core-js/modules/_hide.js  :  false
 95    node_modules/core-js/modules/_redefine.js  :  false
 96    node_modules/core-js/modules/_ctx.js  :  false
 97    node_modules/core-js/modules/_invoke.js  :  false
 98    node_modules/core-js/modules/_ie8-dom-define.js  :  false
 99    node_modules/core-js/modules/_descriptors.js  :  false
 100    node_modules/core-js/modules/_object-pie.js  :  false
 101    node_modules/core-js/modules/_to-iobject.js  :  false
 102    node_modules/core-js/modules/_to-object.js  :  false
 103    node_modules/core-js/modules/_set-to-string-tag.js  :  false
 104    node_modules/core-js/modules/_wks.js  :  false
 105    node_modules/core-js/modules/es6.map.js  :  false
 106    node_modules/core-js/modules/_object-gops.js  :  false
 107    node_modules/core-js/modules/_object-gopn.js  :  false
 108    node_modules/core-js/modules/_shared.js  :  false
 109    node_modules/core-js/modules/es6.weak-map.js  :  false
 110    node_modules/core-js/modules/_collection-strong.js  :  false
 111    node_modules/core-js/modules/_collection.js  :  false
 112    node_modules/core-js/modules/_for-of.js  :  false
 113    node_modules/rxjs/observable/ScalarObservable.js  :  false
 114    node_modules/rxjs/OuterSubscriber.js  :  false
 115    node_modules/rxjs/util/subscribeToResult.js  :  false
 116    node_modules/rxjs/observable/EmptyObservable.js  :  false
 117    node_modules/core-js/modules/_uid.js  :  false
 118    node_modules/core-js/modules/_object-keys.js  :  false
 119    node_modules/core-js/modules/_iobject.js  :  false
 120    node_modules/core-js/modules/_defined.js  :  false
 121    node_modules/core-js/modules/_array-methods.js  :  false
 122    node_modules/core-js/modules/_object-keys-internal.js  :  false
 123    node_modules/core-js/modules/_object-assign.js  :  false
 124    node_modules/core-js/modules/_meta.js  :  false
 125    node_modules/core-js/modules/_collection-weak.js  :  false
 126    node_modules/core-js/modules/_redefine-all.js  :  false
 127    node_modules/core-js/modules/_iter-define.js  :  false
 128    node_modules/core-js/modules/_an-instance.js  :  false
 129    node_modules/core-js/modules/_iter-step.js  :  false
 130    node_modules/core-js/modules/_set-species.js  :  false
 131    node_modules/core-js/modules/_inherit-if-required.js  :  false
 132    node_modules/core-js/modules/_iter-detect.js  :  false
 133    node_modules/core-js/modules/_iter-call.js  :  false
 134    node_modules/core-js/modules/_is-array-iter.js  :  false
 135    node_modules/core-js/modules/_to-length.js  :  false
 136    node_modules/core-js/modules/core.get-iterator-method.js  :  false
 137    node_modules/rxjs/util/isArrayLike.js  :  false
 138    node_modules/rxjs/util/isPromise.js  :  false
 139    node_modules/rxjs/symbol/iterator.js  :  false
 140    node_modules/rxjs/InnerSubscriber.js  :  false
 141    node_modules/core-js/modules/_cof.js  :  false
 142    node_modules/core-js/modules/_array-species-create.js  :  false
 143    node_modules/core-js/modules/_array-includes.js  :  false
 144    node_modules/core-js/modules/_library.js  :  false
 145    node_modules/core-js/modules/_iterators.js  :  false
 146    node_modules/core-js/modules/_to-integer.js  :  false
 147    node_modules/core-js/modules/_classof.js  :  false
 148    node_modules/core-js/modules/_array-species-constructor.js  :  false
 149    node_modules/core-js/modules/_to-index.js  :  false
 150    node_modules/core-js/modules/_is-array.js  :  false
date: 2017-08-05T14:55:55.666Z
Hash: 9c6c3f27486ecfb28ece
Time: 17961ms
chunk {0} polyfills.550cf10c9aa54b8194c7.bundle.js (polyfills) 107 kB {3} [initial] [rendered]
chunk {1} main.4ce1e4747ba31ae37ddc.bundle.js (main) 415 kB {3} [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {3} [initial] [rendered]
chunk {3} inline.5907d316c5e998ed39eb.bundle.js (inline) 2.79 kB [entry] [rendered]

and build optimizer build with `path` string

 0    node_modules/css-loader/lib/css-base.js  :  false
 1    src/main.ts  :  false
 2    src/polyfills.ts  :  false
 3    src/environments/environment.ts  :  false
 4    src/$$_gendir/app/app.module.ngfactory.ts  :  false
 5    src/app/app.module.ts  :  false
 6    src/app/app.component.ts  :  false
 7    src/$$_gendir/app/app.component.ngfactory.ts  :  false
 8    node_modules/@angular/platform-browser/@angular/platform-browser.es5.js  :  true
 9    src/$$_gendir/app/app.component.css.shim.ngstyle.ts  :  false
 10    node_modules/@angular/core/@angular/core.es5.js  :  true
 11    node_modules/core-js/es7/reflect.js  :  false
 12    node_modules/core-js/es6/reflect.js  :  false
 13    node_modules/zone.js/dist/zone.js  :  false
 14    node_modules/@angular/common/@angular/common.es5.js  :  true
 15    node_modules/@angular/animations/@angular/animations.es5.js  :  true
 16    node_modules/rxjs/Observable.js  :  false
 17    node_modules/rxjs/Subject.js  :  false
 18    node_modules/webpack/buildin/global.js  :  false
 19    node_modules/rxjs/observable/merge.js  :  false
 20    node_modules/rxjs/operator/share.js  :  false
 21    node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js  :  true
 22    node_modules/@angular/animations/bundles/animations-browser.umd.js  :  true
 23    node_modules/core-js/modules/es7.reflect.delete-metadata.js  :  false
 24    node_modules/core-js/modules/es7.reflect.get-own-metadata.js  :  false
 25    node_modules/core-js/modules/es7.reflect.define-metadata.js  :  false
 26    node_modules/core-js/modules/es7.reflect.get-own-metadata-keys.js  :  false
 27    node_modules/core-js/modules/es7.reflect.get-metadata.js  :  false
 28    node_modules/core-js/modules/es7.reflect.get-metadata-keys.js  :  false
 29    node_modules/core-js/modules/es7.reflect.has-metadata.js  :  false
 30    node_modules/core-js/modules/es7.reflect.has-own-metadata.js  :  false
 31    node_modules/core-js/modules/es7.reflect.metadata.js  :  false
 32    node_modules/core-js/modules/_core.js  :  false
 33    node_modules/core-js/modules/es6.reflect.apply.js  :  false
 34    node_modules/core-js/modules/es6.reflect.construct.js  :  false
 35    node_modules/core-js/modules/es6.reflect.define-property.js  :  false
 36    node_modules/core-js/modules/es6.reflect.enumerate.js  :  false
 37    node_modules/core-js/modules/es6.reflect.get.js  :  false
 38    node_modules/core-js/modules/es6.reflect.has.js  :  false
 39    node_modules/core-js/modules/es6.reflect.get-prototype-of.js  :  false
 40    node_modules/core-js/modules/es6.reflect.is-extensible.js  :  false
 41    node_modules/core-js/modules/es6.reflect.get-own-property-descriptor.js  :  false
 42    node_modules/core-js/modules/es6.reflect.own-keys.js  :  false
 43    node_modules/core-js/modules/es6.reflect.delete-property.js  :  false
 44    node_modules/core-js/modules/es6.reflect.prevent-extensions.js  :  false
 45    node_modules/core-js/modules/es6.reflect.set.js  :  false
 46    node_modules/core-js/modules/es6.reflect.set-prototype-of.js  :  false
 47    node_modules/tslib/tslib.es6.js  :  false
 48    node_modules/rxjs/Subscriber.js  :  false
 49    node_modules/rxjs/Subscription.js  :  false
 50    node_modules/rxjs/SubjectSubscription.js  :  false
 51    node_modules/rxjs/util/root.js  :  false
 52    node_modules/rxjs/util/toSubscriber.js  :  false
 53    node_modules/rxjs/util/ObjectUnsubscribedError.js  :  false
 54    node_modules/rxjs/symbol/observable.js  :  false
 55    node_modules/rxjs/symbol/rxSubscriber.js  :  false
 56    node_modules/rxjs/operator/merge.js  :  false
 57    node_modules/rxjs/operator/multicast.js  :  false
 58    node_modules/core-js/modules/_metadata.js  :  false
 59    node_modules/core-js/modules/_an-object.js  :  false
 60    node_modules/core-js/modules/_object-gpo.js  :  false
 61    node_modules/core-js/modules/es6.set.js  :  false
 62    node_modules/core-js/modules/_array-from-iterable.js  :  false
 63    node_modules/core-js/modules/_a-function.js  :  false
 64    node_modules/core-js/modules/_export.js  :  false
 65    node_modules/core-js/modules/_global.js  :  false
 66    node_modules/core-js/modules/_fails.js  :  false
 67    node_modules/core-js/modules/_object-create.js  :  false
 68    node_modules/core-js/modules/_is-object.js  :  false
 69    node_modules/core-js/modules/_bind.js  :  false
 70    node_modules/core-js/modules/_object-dp.js  :  false
 71    node_modules/core-js/modules/_to-primitive.js  :  false
 72    node_modules/core-js/modules/_iter-create.js  :  false
 73    node_modules/core-js/modules/_object-gopd.js  :  false
 74    node_modules/core-js/modules/_has.js  :  false
 75    node_modules/core-js/modules/_own-keys.js  :  false
 76    node_modules/core-js/modules/_property-desc.js  :  false
 77    node_modules/core-js/modules/_set-proto.js  :  false
 78    node_modules/rxjs/util/isFunction.js  :  false
 79    node_modules/rxjs/Observer.js  :  false
 80    node_modules/rxjs/util/isArray.js  :  false
 81    node_modules/rxjs/util/isObject.js  :  false
 82    node_modules/rxjs/util/tryCatch.js  :  false
 83    node_modules/rxjs/util/errorObject.js  :  false
 84    node_modules/rxjs/util/UnsubscriptionError.js  :  false
 85    node_modules/rxjs/observable/ArrayObservable.js  :  false
 86    node_modules/rxjs/util/isScheduler.js  :  false
 87    node_modules/rxjs/observable/ConnectableObservable.js  :  false
 88    node_modules/rxjs/operator/mergeAll.js  :  false
 89    node_modules/core-js/modules/es6.map.js  :  false
 90    node_modules/core-js/modules/_shared.js  :  false
 91    node_modules/core-js/modules/es6.weak-map.js  :  false
 92    node_modules/core-js/modules/_to-object.js  :  false
 93    node_modules/core-js/modules/_collection.js  :  false
 94    node_modules/core-js/modules/_shared-key.js  :  false
 95    node_modules/core-js/modules/_for-of.js  :  false
 96    node_modules/core-js/modules/_collection-strong.js  :  false
 97    node_modules/core-js/modules/_hide.js  :  false
 98    node_modules/core-js/modules/_redefine.js  :  false
 99    node_modules/core-js/modules/_ctx.js  :  false
 100    node_modules/core-js/modules/_object-dps.js  :  false
 101    node_modules/core-js/modules/_enum-bug-keys.js  :  false
 102    node_modules/core-js/modules/_dom-create.js  :  false
 103    node_modules/core-js/modules/_html.js  :  false
 104    node_modules/core-js/modules/_invoke.js  :  false
 105    node_modules/core-js/modules/_ie8-dom-define.js  :  false
 106    node_modules/core-js/modules/_descriptors.js  :  false
 107    node_modules/core-js/modules/_set-to-string-tag.js  :  false
 108    node_modules/core-js/modules/_wks.js  :  false
 109    node_modules/core-js/modules/_object-pie.js  :  false
 110    node_modules/core-js/modules/_to-iobject.js  :  false
 111    node_modules/core-js/modules/_object-gopn.js  :  false
 112    node_modules/core-js/modules/_object-gops.js  :  false
 113    node_modules/rxjs/observable/ScalarObservable.js  :  false
 114    node_modules/rxjs/observable/EmptyObservable.js  :  false
 115    node_modules/rxjs/OuterSubscriber.js  :  false
 116    node_modules/rxjs/util/subscribeToResult.js  :  false
 117    node_modules/core-js/modules/_array-methods.js  :  false
 118    node_modules/core-js/modules/_meta.js  :  false
 119    node_modules/core-js/modules/_object-assign.js  :  false
 120    node_modules/core-js/modules/_collection-weak.js  :  false
 121    node_modules/core-js/modules/_defined.js  :  false
 122    node_modules/core-js/modules/_redefine-all.js  :  false
 123    node_modules/core-js/modules/_an-instance.js  :  false
 124    node_modules/core-js/modules/_iter-detect.js  :  false
 125    node_modules/core-js/modules/_inherit-if-required.js  :  false
 126    node_modules/core-js/modules/_uid.js  :  false
 127    node_modules/core-js/modules/_is-array-iter.js  :  false
 128    node_modules/core-js/modules/_iter-call.js  :  false
 129    node_modules/core-js/modules/_to-length.js  :  false
 130    node_modules/core-js/modules/core.get-iterator-method.js  :  false
 131    node_modules/core-js/modules/_iter-define.js  :  false
 132    node_modules/core-js/modules/_iter-step.js  :  false
 133    node_modules/core-js/modules/_set-species.js  :  false
 134    node_modules/core-js/modules/_object-keys.js  :  false
 135    node_modules/core-js/modules/_iobject.js  :  false
 136    node_modules/core-js/modules/_object-keys-internal.js  :  false
 137    node_modules/rxjs/util/isArrayLike.js  :  false
 138    node_modules/rxjs/util/isPromise.js  :  false
 139    node_modules/rxjs/symbol/iterator.js  :  false
 140    node_modules/rxjs/InnerSubscriber.js  :  false
 141    node_modules/core-js/modules/_array-species-create.js  :  false
 142    node_modules/core-js/modules/_iterators.js  :  false
 143    node_modules/core-js/modules/_classof.js  :  false
 144    node_modules/core-js/modules/_library.js  :  false
 145    node_modules/core-js/modules/_to-integer.js  :  false
 146    node_modules/core-js/modules/_cof.js  :  false
 147    node_modules/core-js/modules/_array-includes.js  :  false
 148    node_modules/core-js/modules/_array-species-constructor.js  :  false
 149    node_modules/core-js/modules/_to-index.js  :  false
 150    node_modules/core-js/modules/_is-array.js  :  false
Date: 2017-08-05T14:58:32.836Z
Hash: f3042383727057ace00f
Time: 17116ms
chunk {0} polyfills.550cf10c9aa54b8194c7.bundle.js (polyfills) 107 kB {3} [initial] [rendered]
chunk {1} main.8ebb76630d12049f3847.bundle.js (main) 354 kB {3} [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {3} [initial] [rendered]
chunk {3} inline.ff00b91075d934af31a8.bundle.js (inline) 2.79 kB [entry] [rendered]

most interestin

[valorkin]

ok, could be important
for some reason with path in tsconfig
build starts to use bundles

[valorkin]

@filipesilva any advice in which direction to look at?

[clydin]

There definitely appears to be a bug here but the preserve symlinks option is really more than a workaround. Its intention is to support linked package scenarios such as described without the potentially lengthy and complex path mapping configurations otherwise required.

This angular-CLI issue regarding monorepos may be of interest: angular/angular-cli#7097

There's also a pending PR involving wildcard path mapping support: angular/angular-cli#7250

[valorkin]

@clydin could be, but not respecting module field sounds like an issue

[filipesilva]

Heya, I've had a look and this is fixed by angular/angular-cli#7250. I think what happens is that the CLI path support has a bug and uses the .umd.js instead of the .es5.js, and the UMD isn't meant to be optimized so stuff breaks.

The particular optimization that's breaking the UMD is Prefix Functions which is a rather dangerous one and should only be used on the Angular module files for now.

I'm modifying #77 to whitelist stuff instead of blacklisting so I'll make sure to only pick up the .es5 bundles.

[valorkin]

@filipesilva thanks you