webpack angular2-RC5 uri.match không phải là một chức năng

Question

Tôi có cài đặt webpack sau cho angular2 phát triển rc.5 nhưng không thành công với các lỗi sau

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

webpack trông giống như

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 có một sửa chữa cho lỗi này?

Answer 1

Tôi đã gặp sự cố tương tự sau khi di chuyển đến webpack, được gây ra bởi việc sử dụng moduleId: module.id trong các thành phần được thiết kế cho SystemJS.

Nếu bạn có bất kỳ lần xuất hiện nào trong số moduleId trong mã của bạn, hãy xóa chúng.

Kiểm tra vấn đề này trên github: https://github.com/angular/angular/issues/10626

Answer 2

tôi đã cùng một vấn đề, nó nhưng vì vấn đề này đã được đến từ angular2 vật chất 2.0.0-alpha.7-4, tôi sử dụng sửa chữa tạm thời này dựa trên: 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' 
    } 
    }, 
] 
...