Merge pull request #92 from arturovt/perf/tree-shake-errors

perf: tree-shake errors and warnings in production mode

Author: tomastrajan

package.json

@@ -8,7 +8,7 @@
     "lint": "ng lint",
     "test": "ng lint && npm run format:test && ng test --watch false --code-coverage",
     "watch": "ng test",
-    "build": "ng build && ng build --project elements",
+    "build": "ng build && ng build elements",
     "postbuild": "replace \"onFetch.*\\{\" \"onFetch(event) { if (event.request.url.indexOf('unpkg.com') > -1) { return; }\" ./dist/elements-demo/ngsw-worker.js",
     "ci": "npm run test && npm run build && cpx README.md dist/elements",
     "format:write": "prettier projects/**/*.{ts,json,md} --write",

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

@@ -50,10 +50,12 @@ export class LazyElementDynamicDirective implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    if (!this.tag || this.tag.length === 0 || !this.tag.includes('-')) {
-      throw new Error(
-        `${LOG_PREFIX} - Valid tag has to be specified when using *axLazyElementDynamic directive (use *axLazyElementDynamic="'some-tag'"), got: "${this.tag}"`
-      );
+    if (ngDevMode) {
+      if (!this.tag || this.tag.length === 0 || !this.tag.includes('-')) {
+        throw new Error(
+          `${LOG_PREFIX} - Valid tag has to be specified when using *axLazyElementDynamic directive (use *axLazyElementDynamic="'some-tag'"), got: "${this.tag}"`
+        );
+      }
     }
 
     const elementConfig =
@@ -107,7 +109,7 @@ export class LazyElementDynamicDirective implements OnInit, OnDestroy {
             const factory = this.cfr.resolveComponentFactory(errorComponent);
             this.vcr.createComponent(factory);
             this.cdr.markForCheck();
-          } else {
+          } else if (ngDevMode) {
             console.error(
               `${LOG_PREFIX} - Loading of element <${this.tag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,
               error

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

@@ -89,7 +89,7 @@ export class LazyElementDirective implements OnInit, OnDestroy {
             const factory = this.cfr.resolveComponentFactory(errorComponent);
             this.vcr.createComponent(factory);
             this.cdr.markForCheck();
-          } else {
+          } else if (ngDevMode) {
             console.error(
               `${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`
             );

projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts

@@ -49,9 +49,10 @@ export class LazyElementsLoaderService {
     newConfigs.forEach((newConfig) => {
       const existingConfig = this.getElementConfig(newConfig.tag);
       if (existingConfig) {
-        console.warn(
-          `${LOG_PREFIX} - ElementConfig for tag '${newConfig.tag}' was previously added, it will not be added multiple times, continue...`
-        );
+        ngDevMode &&
+          console.warn(
+            `${LOG_PREFIX} - ElementConfig for tag '${newConfig.tag}' was previously added, it will not be added multiple times, continue...`
+          );
       } else {
         newConfig.isAdded = true;
         this.configs.push(newConfig);
@@ -103,14 +104,14 @@ export class LazyElementsLoaderService {
     isModule ??= config?.isModule ?? this.options.isModule;
     importMap ??= config?.importMap ?? this.options.importMap;
 
-    if (!tag) {
+    if (ngDevMode && !tag) {
       throw new Error(
         `${LOG_PREFIX} - tag for '${url}' not found, the *axLazyElement has to be used on HTML element`
       );
     }
 
     if (!url) {
-      if (!config?.url && !importMap) {
+      if (ngDevMode && !config?.url && !importMap) {
         throw new Error(`${LOG_PREFIX} - url for <${tag}> not found`);
       } else if (importMap) {
         url = tag;
@@ -191,7 +192,7 @@ export class LazyElementsLoaderService {
     if (System) {
       await System.prepareImport();
       url = System.resolve(url);
-    } else {
+    } else if (ngDevMode) {
       throw new Error(
         `${LOG_PREFIX} - importMap feature depends on SystemJS library to be globally loaded but none was found, thus '${url}' can't be resolved. You should either load SystemJS or remove the importMap flag.`
       );

projects/elements/src/lib/lazy-elements/lazy-elements.module.ts

@@ -21,10 +21,12 @@ import {
   LAZY_ELEMENT_ROOT_OPTIONS,
 } from './lazy-elements.tokens';
 
+import './ng-dev-mode';
+
 export function createLazyElementRootGuard(
   rootOptions: LazyElementRootOptions
 ) {
-  if (rootOptions) {
+  if (ngDevMode && rootOptions) {
     throw new TypeError(
       `LazyElementsModule.forRoot() called twice. Feature modules should use LazyElementsModule.forFeature() instead.`
     );

projects/elements/src/lib/lazy-elements/ng-dev-mode.ts

@@ -0,0 +1,7 @@
+/**
+ * @description Will be provided through Terser global definitions by Angular CLI during the
+ * production build (ng build --configuration production). This is how Angular does tree-shaking internally.
+ *
+ * @internal
+ */
+declare const ngDevMode: boolean;

projects/elements/tsconfig.lib.json

@@ -6,6 +6,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
+    "stripInternal": true,
     "types": [],
     "lib": ["dom", "es2018"]
   },