Search code examples
angulartypescriptwebpacksass-loaderraw-loader

Webpack is not resolving extensions from third party libraries

I am developing 2 Angular 2 libraries:

  1. carbonldp-workbench
  2. carbonldp-panel

Project2 (Panel):

Is a collection of components and modules that are being exported. These components have their own templates and scss files. The library is written with Typescript but the dist files are being compiled, so the library is shipped as an npm package with its own .js files with their .metadata.json and their .d.ts files.

Project1 (Workbench)

Is the main project. It uses Project2 so it can work. This project is using Webpack to bundle the final app. The thing is that I cannot make webpack work with Project2 (Panel) because the main project is written in typescript and panel is imported only wiht javascript files. The errors I get from webapack are that ALL the template files from Project2 couldn't be found. See below:

enter image description here

This is how the final app.js is bundling the Project2 library, please notice how the header component, which comes from Project2, is importing the template files:

enter image description here

And notice how webpack is importing the templates and styles files from the main project Project1 (written with ts):

enter image description here

This is how I defined the rules for resolving extensions in my webpack.config.js file:

entry: {
    "polyfills": "./src/polyfills.ts",
    "app": "./src/main.ts"
},

resolve: {
    extensions: [ ".ts", ".js" ],
    alias: {
        "app": helpers.root( "src", "app" ),
        "jquery": "jquery/src/jquery",
        "semantic-ui": helpers.root( "src/semantic/dist" ),
    },
    modules: [ helpers.root( "node_modules" ) ]
},

module: {
    rules: [
            {
                test: /\.ts$/,
                use: [ "awesome-typescript-loader", "angular2-template-loader", "angular-router-loader" ]
            },
            {
                test: /\.html$/,
                use: "raw-loader",
                exclude: [ helpers.root( "src/index.html" ) ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: "file-loader?name=assets/[name].[hash].[ext]"
            },
            {
                test: /\.s?css$/,
                use: [ "raw-loader", "sass-loader" ]
            },
        ]
    },

The question here is... How can I make Webpack to also compile the imports of my angular js library?

Solution

  • In my experience, angular2-template-loader won't dig into node_modules, so libraries within node_modules that may depend on it will be out of luck.

    The way I've gotten around it is to inline the external templates and css files as part of the library build step, and I based it heavily off of how angular material 2 was publishing their library. Then webpack - at the consuming app level - doesn't need to worry about your templates or stylesheets since they're already ready.

    In the interest of not using a link, here is their script, and I take no credit for it:

    #!/usr/bin/env node
'use strict';

const fs = require('fs');
const path = require('path');
const glob = require('glob');

/**
 * Simple Promiseify function that takes a Node API and return a version that supports promises.
 * We use promises instead of synchronized functions to make the process less I/O bound and
 * faster. It also simplify the code.
 */
function promiseify(fn) {
  return function() {
    const args = [].slice.call(arguments, 0);
    return new Promise((resolve, reject) => {
      fn.apply(this, args.concat([function (err, value) {
        if (err) {
          reject(err);
        } else {
          resolve(value);
        }
      }]));
    });
  };
}

const readFile = promiseify(fs.readFile);
const writeFile = promiseify(fs.writeFile);


function inlineResources(globs) {
  if (typeof globs == 'string') {
    globs = [globs];
  }

  /**
   * For every argument, inline the templates and styles under it and write the new file.
   */
  return Promise.all(globs.map(pattern => {
    if (pattern.indexOf('*') < 0) {
      // Argument is a directory target, add glob patterns to include every files.
      pattern = path.join(pattern, '**', '*');
    }

    const files = glob.sync(pattern, {})
      .filter(name => /\.js$/.test(name));  // Matches only JavaScript files.

    // Generate all files content with inlined templates.
    return Promise.all(files.map(filePath => {
      return readFile(filePath, 'utf-8')
        .then(content => inlineResourcesFromString(content, url => {
          return path.join(path.dirname(filePath), url);
        }))
        .then(content => writeFile(filePath, content))
        .catch(err => {
          console.error('An error occurred: ', err);
        });
    }));
  }));
}

/**
 * Inline resources from a string content.
 * @param content {string} The source file's content.
 * @param urlResolver {Function} A resolver that takes a URL and return a path.
 * @returns {string} The content with resources inlined.
 */
function inlineResourcesFromString(content, urlResolver) {
  // Curry through the inlining functions.
  return [
    inlineTemplate,
    inlineStyle,
    removeModuleId
  ].reduce((content, fn) => fn(content, urlResolver), content);
}

if (require.main === module) {
  inlineResources(process.argv.slice(2));
}


/**
 * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
 * replace with `template: ...` (with the content of the file included).
 * @param content {string} The source file's content.
 * @param urlResolver {Function} A resolver that takes a URL and return a path.
 * @return {string} The content with all templates inlined.
 */
function inlineTemplate(content, urlResolver) {
  return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function(m, templateUrl) {
    const templateFile = urlResolver(templateUrl);
    const templateContent = fs.readFileSync(templateFile, 'utf-8');
    const shortenedTemplate = templateContent
      .replace(/([\n\r]\s*)+/gm, ' ')
      .replace(/"/g, '\\"');
    return `template: "${shortenedTemplate}"`;
  });
}


/**
 * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
 * replace with `styles: [...]` (with the content of the file included).
 * @param urlResolver {Function} A resolver that takes a URL and return a path.
 * @param content {string} The source file's content.
 * @return {string} The content with all styles inlined.
 */
function inlineStyle(content, urlResolver) {
  return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
    const urls = eval(styleUrls);
    return 'styles: ['
      + urls.map(styleUrl => {
          const styleFile = urlResolver(styleUrl);
          const styleContent = fs.readFileSync(styleFile, 'utf-8');
          const shortenedStyle = styleContent
            .replace(/([\n\r]\s*)+/gm, ' ')
            .replace(/"/g, '\\"');
          return `"${shortenedStyle}"`;
        })
        .join(',\n')
      + ']';
  });
}


/**
 * Remove every mention of `moduleId: module.id`.
 * @param content {string} The source file's content.
 * @returns {string} The content with all moduleId: mentions removed.
 */
function removeModuleId(content) {
  return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
}


module.exports = inlineResources;
module.exports.inlineResourcesFromString = inlineResourcesFromString;

    They use this as part of a gulp task, I've reworked mine to simply be a node script.

    What I do in my build is:

    • create a dist folder from my src folder (so html and css files remain relative), and then from within dist:
      • do any kind of postcss processing here if required (with postcss the best option is to use the replace flag to maintain folder structure)
      • run the inliner (script above)
      • delete the html and css files (don't need them anymore)
      • transpile with ngc

    In the first step, I started by using a staging folder and then transpiling to a dist folder, but ngc was not playing along with having an outDir.

    It took awhile to figure this out, so hopefully I can save you some time.