fix(vite-plugin-angular): add plugin to remove inline resource imports (

#111)
analogjs · Oct 17, 2022 · 3ceb470 · 3ceb470
1 parent 3865aa0
commit 3ceb470
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 52 deletions.
diff --git a/apps/analog-app/vite.config.ts b/apps/analog-app/vite.config.ts
@@ -16,15 +16,6 @@ export default defineConfig(({ mode }) => {
       outDir: `${offsetFromRoot('apps/analog-app/src')}/dist/apps/analog-app`,
       emptyOutDir: true,
       target: 'es2020',
-      rollupOptions: {
-        external: [/ngResource/],
-        onwarn: (warning, warn) => {
-          if (warning.message.includes('ngResource')) {
-            return;
-          }
-          warn(warning);
-        },
-      },
     },
     resolve: {
       mainFields: ['module'],

diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
@@ -342,7 +342,7 @@ export function angular(options?: PluginOptions): Plugin[] {
         return;
       },
     },
-    componentAssetsPlugin(pluginOptions.inlineStylesExtension),
+    ...componentAssetsPlugin(pluginOptions.inlineStylesExtension),
   ];
 
   function setupCompilation() {

diff --git a/packages/vite-plugin-angular/src/lib/component-assets-plugin.ts b/packages/vite-plugin-angular/src/lib/component-assets-plugin.ts
@@ -10,51 +10,69 @@ const virtualModuleId = 'virtual:analog-components-assets-module';
  * return them as imported assets to pass through the appropriate
  * transform pipeline.
  */
-export function componentAssetsPlugin(inlineStylesExtension = ''): Plugin {
-  return {
-    name: '@analogjs/vite-plugin-angular-component-assets',
-    enforce: 'pre',
-    resolveId(id) {
-      if (id.includes('html?ngResource') && !id.includes(virtualModuleId)) {
-        return '\0' + virtualModuleId + id;
-      }
-
-      if (
-        id.includes(`.${inlineStylesExtension}?ngResource`) &&
-        /data=(.*)\!/.test(id)
-      ) {
-        return '\0' + virtualModuleId + id;
-      }
-
-      return undefined;
-    },
-    async load(id) {
-      if (!id.startsWith(`\0${virtualModuleId}`)) {
+export function componentAssetsPlugin(inlineStylesExtension = ''): Plugin[] {
+  return [
+    {
+      name: '@analogjs/vite-plugin-angular-component-assets',
+      enforce: 'pre',
+      resolveId(id) {
+        if (id.includes('html?ngResource') && !id.includes(virtualModuleId)) {
+          return '\0' + virtualModuleId + id;
+        }
+
+        if (
+          id.includes(`.${inlineStylesExtension}?ngResource`) &&
+          /data=(.*)\!/.test(id)
+        ) {
+          return '\0' + virtualModuleId + id;
+        }
+
         return undefined;
-      }
-
-      if (id.includes(`.html`)) {
-        return `export default "${id
-          .replace('\x00', '')
-          .replace(virtualModuleId, '')}"`;
-      }
-
-      if (
-        id.includes(`.${inlineStylesExtension}?ngResource`) &&
-        /data=(.*)\!/.test(id)
-      ) {
-        const encodedStyles = id.match(/data=(.*)\!/)![1];
-        const styles = Buffer.from(
-          decodeURIComponent(encodedStyles),
-          'base64'
-        ).toString();
+      },
+      async load(id) {
+        if (!id.startsWith(`\0${virtualModuleId}`)) {
+          return undefined;
+        }
+
+        if (id.includes(`.html`)) {
+          return `export default "${id
+            .replace('\x00', '')
+            .replace(virtualModuleId, '')}"`;
+        }
+
+        if (
+          id.includes(`.${inlineStylesExtension}?ngResource`) &&
+          /data=(.*)\!/.test(id)
+        ) {
+          const encodedStyles = id.match(/data=(.*)\!/)![1];
+          const styles = Buffer.from(
+            decodeURIComponent(encodedStyles),
+            'base64'
+          ).toString();
+
+          return {
+            code: styles,
+          };
+        }
+
+        return;
+      },
+    },
+    {
+      name: '@analogjs/vite-plugin-angular-remove-inline-resource',
+      enforce: 'post',
+      transform(_code) {
+        /**
+         * Remove the resources replaced with import
+         * statements from the Angular Compiler
+         * that are no longer being used.
+         */
+        const code = _code.replace(/import.*inline-resource.*\n/g, '');
 
         return {
-          code: styles,
+          code,
         };
-      }
-
-      return;
+      },
     },
-  };
+  ];
 }
-Original file line number
+Diff line change
@@ Expand Up @@
             return;
           },
         },
-        componentAssetsPlugin(pluginOptions.inlineStylesExtension),
+        ...componentAssetsPlugin(pluginOptions.inlineStylesExtension),
       ];
       function setupCompilation() {
@@ Expand Down @@