如何爲Angular2測試配置webpack？

如何爲Angular2測試配置webpack？如何爲Angular2測試配置webpack？

我已經建立了基於webpack的測試Angular2 npm包的配置。喜歡無論如何，我不斷收到錯誤：

Error: This test module uses the component PaginationComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. in karma-test-shim.js (line 9952)

而且在我看來，我做的一切都是正確的，它應該工作。應該由webpack加載html和scss文件。

如果你想檢查完整的配置，我已將它上傳到GitHub。您可以在那裏找到webpack.test.js,karma.conf.js,package.json以及項目源。它很小 - 一個組件項目。

對於完全的錯誤信息，你可以去Travis CI

這裏是我的webpack配置：

var path = require('path'); 
var _root = path.resolve(__dirname, '..'); 

module.exports = { 
    devtool: 'inline-source-map', 

    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'null' 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json' 
      }, 
      { 
       test: /\.css$/, 
       exclude: root('src'), 
       loader: 'null' 
      }, 
      { 
       test: /\.css$/, 
       include: root('src'), 
       loader: 'raw' 
      }, 
      { 
       test: /\.scss$/, 
       exclude: root('src'), 
       loader: 'null' 
      }, 
      { 
       test: /\.scss$/, 
       include: root('src'), 
       loader: 'raw!postcss!sass' 
      } 
     ] 
    } 
}; 

function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [_root].concat(args)); 
}

來源

2016-10-03 Vardius

看到的一個問題是'_root'。你正在通過''''來解決問題。在Angular示例中，他們在'config'文件夾中有'helpers.js'文件。所以根本會是一個水平。但就你而言，你只是將幫助程序文件中的內容複製到你的配置文件中，該文件已經在根目錄下了。所以你應該只使用一個點「。」。還沒有真正發現它完全符合這個問題。但問題似乎是模板文件無法找到，所以也許它是相關的。我不知道。我不太流利的webpack –

@peeskillet你是對的，但這不是:( – Vardius

所以我創建了基於Angular文檔的[回購]（https://github.com/psamsotha/angular2-webpack）。我測試了它，並且它工作正常，所以我將它簡化爲更適合你的項目結構，並對其進行測試，並且它仍然有效，我嘗試了一些不同的事情來試圖打破它，但是找不到真正與你不同的東西這可能會導致它破壞，也許你可能會有更好的運氣： -/ –

的問題是與打字稿配置。

tsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "declaration": true, 
    "outDir": "./lib", 
    "noEmitHelpers": false, 
    "isolatedModules": false 
    }, 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "exclude": [ 
    "components.d.ts", 
    "typings/browser.d.ts", 
    "typings/browser", 
    "node_modules", 
    "examples" 
    ] 
}

whih觸發分型的代*選項"declaration": true .d.ts文件，使IDE智能感知是cousing的的WebPack在測試過程中拋出的錯誤。

我在運行build時測試並取消註釋時通過評論此行解決了此問題。

來源

2016-10-04 11:25:34 Vardius

如何爲Angular2測試配置webpack？

回答

相關問題