2016-09-02 2 views
6

아니라웹팩 angular2-RC5의 uri.match 내가 angular2 rc.5 개발을위한 다음 웹팩 설정을하는 기능

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)); 
} 

인가 같이 웹팩 보이는

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

다음과 같은 오류와 함께 실패 이 버그에 대한 수정 사항이 있습니까?

답변

12

SystemJS 용으로 설계된 구성 요소에서 moduleId: module.id의 사용으로 인해 webpack으로 마이그레이션 한 후 비슷한 문제가 발생했습니다.

코드에 moduleId가있는 경우 해당 코드를 삭제하십시오.

확인 GitHub의에서이 문제 : https://github.com/angular/angular/issues/10626

+0

안녕하세요 덕분에, 나는 angular2와 모든 요점 링크가 구식 페이지에 아주 새로운 해요. 그렇다면 module.id를 어떻게 제거합니까? – fefe

+2

@component 데코레이터에서이 줄이 발견되면 해당 줄을 제거하면됩니다. – j2L4e

+0

나를 위해 트릭을 했어! 내가 그들을 모두 제거했다고 생각하면, 나는 그것을 놓쳤다. –

2

나는이 같은 문제, 그것은하지만 문제가 angular2 재료 2.0.0-alpha.7-4에서오고 이후, 나는이 임시 수정 사용에 기초했다 : 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' 
    } 
    }, 
] 
...