perf(angular): flat ng modules (#17007)

fixes #17001

.gitignore

@@ -55,3 +55,4 @@ angular/css/
 core/css/
 core/loader/
 .stencil/
+angular/build/

angular/package.json

@@ -20,13 +20,13 @@
     "url": "https://github.com/ionic-team/ionic.git"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.core && npm run build.ng && npm run build.fesm && npm run clean-generated",
+    "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated",
-    "build.dev": "npm run clean && npm run build.core.dev && npm run build.ng && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
-    "build.core.dev": "node scripts/build-core.js --dev",
     "build.fesm": "rollup --config ./scripts/rollup.config.js",
     "build.link": "npm run build && node scripts/link-copy.js",
-    "build.ng": "./node_modules/.bin/ngc",
+    "build.ng": "npm run build.es2015 && npm run build.es5",
+    "build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js",
+    "build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
     "lint": "npm run lint.ts",
@@ -38,9 +38,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "module": "dist/fesm5.js",
-  "main": "dist/fesm5.js",
+  "types": "dist/core.d.ts",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
   "files": [
     "dist/",
     "css/"
@@ -80,6 +78,7 @@
     "rollup": "^1.0.2",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rxjs": "^6.2.0",
+    "tsickle": "^0.34.0",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.21",
     "typescript": "3.1.6",

angular/scripts/rollup.config.js

@@ -1,9 +1,9 @@
 import resolve from 'rollup-plugin-node-resolve';
 
 export default {
-  input: 'dist/index.js',
+  input: 'build/es2015/core.js',
   output: {
-    file: 'dist/fesm5.js',
+    file: 'dist/fesm2015.js',
     format: 'es'
   },
   external: (id) => {

angular/scripts/rollup.config.legacy.js

@@ -0,0 +1,9 @@
+import config from './rollup.config';
+
+const newConfig = {
+  ...config,
+  input: 'build/es5/core.js',
+};
+newConfig.output.file = 'dist/fesm5.js';
+
+export { newConfig as default };

angular/src/ionic-module.ts

@@ -3,112 +3,128 @@ import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { IonicConfig } from '@ionic/core';
 
 import { appInitialize } from './app-initialize';
-import * as d from './directives';
+import { BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor';
-import * as p from './providers';
+import { NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accesssor';
+import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
+import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
+import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
+import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
+import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
+import { IonTabs } from './directives/navigation/ion-tabs';
+import { NavDelegate } from './directives/navigation/nav-delegate';
+import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
+import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
+import { VirtualItem } from './directives/virtual-scroll/virtual-item';
+import { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
+import { AngularDelegate } from './providers/angular-delegate';
 import { ConfigToken } from './providers/config';
+import { ModalController } from './providers/modal-controller';
+import { PopoverController } from './providers/popover-controller';
 
 const DECLARATIONS = [
   // proxies
-  d.IonApp,
+  IonApp,
-  d.IonAvatar,
+  IonAvatar,
-  d.IonBackButton,
+  IonBackButton,
-  d.IonBackdrop,
+  IonBackdrop,
-  d.IonBadge,
+  IonBadge,
-  d.IonButton,
+  IonButton,
-  d.IonButtons,
+  IonButtons,
-  d.IonCard,
+  IonCard,
-  d.IonCardContent,
+  IonCardContent,
-  d.IonCardHeader,
+  IonCardHeader,
-  d.IonCardSubtitle,
+  IonCardSubtitle,
-  d.IonCardTitle,
+  IonCardTitle,
-  d.IonCheckbox,
+  IonCheckbox,
-  d.IonChip,
+  IonChip,
-  d.IonCol,
+  IonCol,
-  d.IonContent,
+  IonContent,
-  d.IonDatetime,
+  IonDatetime,
-  d.IonFab,
+  IonFab,
-  d.IonFabButton,
+  IonFabButton,
-  d.IonFabList,
+  IonFabList,
-  d.IonFooter,
+  IonFooter,
-  d.IonGrid,
+  IonGrid,
-  d.IonHeader,
+  IonHeader,
-  d.IonIcon,
+  IonIcon,
-  d.IonImg,
+  IonImg,
-  d.IonInfiniteScroll,
+  IonInfiniteScroll,
-  d.IonInfiniteScrollContent,
+  IonInfiniteScrollContent,
-  d.IonInput,
+  IonInput,
-  d.IonItem,
+  IonItem,
-  d.IonItemDivider,
+  IonItemDivider,
-  d.IonItemGroup,
+  IonItemGroup,
-  d.IonItemOption,
+  IonItemOption,
-  d.IonItemOptions,
+  IonItemOptions,
-  d.IonItemSliding,
+  IonItemSliding,
-  d.IonLabel,
+  IonLabel,
-  d.IonList,
+  IonList,
-  d.IonListHeader,
+  IonListHeader,
-  d.IonMenu,
+  IonMenu,
-  d.IonMenuButton,
+  IonMenuButton,
-  d.IonMenuToggle,
+  IonMenuToggle,
-  d.IonNav,
+  IonNav,
-  d.IonNavPop,
+  IonNavPop,
-  d.IonNavPush,
+  IonNavPush,
-  d.IonNavSetRoot,
+  IonNavSetRoot,
-  d.IonNote,
+  IonNote,
-  d.IonProgressBar,
+  IonProgressBar,
-  d.IonRadio,
+  IonRadio,
-  d.IonRadioGroup,
+  IonRadioGroup,
-  d.IonRange,
+  IonRange,
-  d.IonRefresher,
+  IonRefresher,
-  d.IonRefresherContent,
+  IonRefresherContent,
-  d.IonReorder,
+  IonReorder,
-  d.IonReorderGroup,
+  IonReorderGroup,
-  d.IonRippleEffect,
+  IonRippleEffect,
-  d.IonRow,
+  IonRow,
-  d.IonSearchbar,
+  IonSearchbar,
-  d.IonSegment,
+  IonSegment,
-  d.IonSegmentButton,
+  IonSegmentButton,
-  d.IonSelect,
+  IonSelect,
-  d.IonSelectOption,
+  IonSelectOption,
-  d.IonSkeletonText,
+  IonSkeletonText,
-  d.IonSlide,
+  IonSlide,
-  d.IonSlides,
+  IonSlides,
-  d.IonSpinner,
+  IonSpinner,
-  d.IonSplitPane,
+  IonSplitPane,
-  d.IonTabBar,
+  IonTabBar,
-  d.IonTabButton,
+  IonTabButton,
-  d.IonText,
+  IonText,
-  d.IonTextarea,
+  IonTextarea,
-  d.IonThumbnail,
+  IonThumbnail,
-  d.IonToggle,
+  IonToggle,
-  d.IonToolbar,
+  IonToolbar,
-  d.IonTitle,
+  IonTitle,
 
-  d.IonTabs,
+  IonTabs,
 
   // ngModel accessors
-  d.BooleanValueAccessor,
+  BooleanValueAccessor,
-  d.NumericValueAccessor,
+  NumericValueAccessor,
-  d.RadioValueAccessor,
+  RadioValueAccessor,
-  d.SelectValueAccessor,
+  SelectValueAccessor,
-  d.TextValueAccessor,
+  TextValueAccessor,
 
   // navigation
-  d.IonRouterOutlet,
+  IonRouterOutlet,
-  d.IonBackButtonDelegate,
+  IonBackButtonDelegate,
-  d.NavDelegate,
+  NavDelegate,
-  d.RouterLinkDelegate,
+  RouterLinkDelegate,
 
   // virtual scroll
-  d.VirtualFooter,
+  VirtualFooter,
-  d.VirtualHeader,
+  VirtualHeader,
-  d.VirtualItem,
+  VirtualItem,
-  d.IonVirtualScroll
+  IonVirtualScroll
 ];
 
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
-  providers: [p.AngularDelegate, p.ModalController, p.PopoverController],
+  providers: [AngularDelegate, ModalController, PopoverController],
   imports: [CommonModule]
 })
 export class IonicModule {

angular/test/test-app/scripts/sync.sh

@@ -1,10 +1,12 @@
 # Copy angular dist
 rm -rf node_modules/@ionic/angular/dist
 cp -a ../../dist node_modules/@ionic/angular/dist
+cp -a ../../package.json node_modules/@ionic/angular/package.json
 
 # Copy core dist
 rm -rf node_modules/@ionic/core/dist
 cp -a ../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../core/package.json node_modules/@ionic/core/package.json
 
 # Copy ionicons
 rm -rf node_modules/ionicons

angular/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
+    "annotateForClosureCompiler": true,
-    "strictMetadataEmit" : true
+    "strictMetadataEmit" : true,
+    "flatModuleOutFile": "core.js",
+    "flatModuleId": "@ionic/angular",
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": false
   },
   "compilerOptions": {
     "alwaysStrict": true,
@@ -9,10 +13,9 @@
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "declaration": true,
+    "declarationDir": "dist",
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "jsxFactory": "h",
     "lib": ["dom", "es2017"],
     "module": "es2015",
     "moduleResolution": "node",
@@ -20,13 +23,13 @@
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "outDir": "dist",
+    "outDir": "build/es2015",
     "pretty": true,
     "removeComments": false,
     "importHelpers": true,
     "rootDir": "src",
     "strictPropertyInitialization": false,
-    "target": "es5"
+    "target": "es2015"
   },
   "exclude": ["node_modules", "src/schematics"],
   "files": ["src/index.ts"]

angular/tsconfig.legacy.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "declarationDir": "build/es5",
+    "outDir": "build/es5"
+  }
+}