webpack angular2-rc5 uri.match is not a function

Question

I have the following webpack setup for angular2 rc.5 development but fails with the following error

url_resolver.js:238Uncaught TypeError: uri.match is not a function

webpack looks like

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
var toString  = Function.prototype.call.bind(Object.prototype.toString);
//const helpers = require('./helpers');
var webpack = require("webpack"),
              ExtractTextPlugin = require('extract-text-webpack-plugin'),
              //helpers = require('./helpers'),
              path = require('path');

var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
    entry: {
        'vendor': [
            // Polyfills
            'core-js/es6',
            'core-js/es7/reflect',
            'zone.js/dist/zone',
            'zone.js/dist/long-stack-trace-zone',
            // Angular2
            '@angular/common',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/core',
            '@angular/router',
            '@angular/http',
            // RxJS
            'rxjs',
            // Other
            'angular2-jwt'
        ],
        'app': [
            './src/index'
        ]
    },
    output: {
        path: root('build'),
        filename: '[name].js',
        // filename: '[name].[hash].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },
    resolve: {
        root: __dirname,
        extensions: [
            '',
            '.ts',
            '.js',
            '.json',
            '.css',
            '.html'
        ]
    },
    devtool: 'source-map',
    module: {

        preLoaders: [
           /* {
                test: /\.ts$/,
                loader: 'string-replace-loader',
                query: {
                    search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
                    replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
                    flags: 'g'
                },
                include: [helpers.root('src')]
            },
            */
            { test: /\.ts$/, loader: 'tslint-loader' } ],
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                query: {
                    'ignoreDiagnostics': [
                        2403, // 2403 -> Subsequent variable declarations
                        2300, // 2300 Duplicate identifier
                        2304, // 2304 Cannot find name
                        2374, // 2374 -> Duplicate number index signature
                        2375  // 2375 -> Duplicate string index signature
                    ]
                },
                exclude: [ /\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/ ]
            },

            // Support for *.json files.
            { test: /\.json$/,  loader: 'json-loader' },

            // Support for CSS as raw text
            { test: /\.css$/,   loader: 'raw-loader' },

            // support for .html as raw text
            { test: /\.html$/,  loader: 'raw-loader' },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }, {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                loader: "url?limit=10000&mimetype=application/font-woff"
            }, {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: "url?limit=10000&mimetype=application/font-woff"
            }
        ],
        noParse: [
            /zone\.js\/dist\/.+/,
            /reflect-metadata/,
            /es(6|7)-.+/,
            /.zone-microtask/,
            /.long-stack-trace-zone/
        ]
    },
    plugins: [
        new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
        new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }),
        new ExtractTextPlugin('dist/app.css', {
            allChunks: true
        })

    ],
    // Other module loader config
    tslint: {
        emitErrors: false,
        failOnHint: false
    },

    // our Development Server configs
    // our Webpack Development Server config
    devServer: {
        historyApiFallback: true,
        publicPath: '/build'
    }
}

function getBanner() {
    return 'This is a sample that shows how to add authentication to an Angular 2 (ng2) app by @auth0';
}

function root(args) {
    args = sliceArgs(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
    args = sliceArgs(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
}

Is there a fix for this bug?

Answer 1

I have encountered a similar problem after migrating to webpack, that was caused by the usage of moduleId: module.id in components designed for SystemJS.

If you have any occurrences of moduleId in your code, delete those.

Check this issue on github: https://github.com/angular/angular/issues/10626

Answer 2

I had same issue, it but since the issue was comming from angular2-material 2.0.0-alpha.7-4, I used this temporary fix based on: https://github.com/angular/material2/issues/974#issuecomment-242936198

npm i --save string-replace-loader

webpack.conf

...
preLoaders: [
  {
    test: /.js$/,
    loader: 'string-replace-loader',
    query: {
      search: 'moduleId: module.id,',
      replace: '',
      flags: 'g'
    }
  },
]
...