Angular2 testing: 'Unhandled Promise rejection:', 'Failed to load strategyTables.html'

Question

I caught this error when testing a component with templateUrl.I wonder if it's wrong with webpasck'test.I'm not shure how to fix it.thanks advance!

ERROR: 'Unhandled Promise rejection:', 'Failed to load strategyTables.html', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to load strategyTables.html', undefined ERROR: Error{originalStack: 'Error: Uncaught (in promise): Failed to load strategyTables.html

//karma.config.js
// Karma configuration

var webpackConfig = require('./webpack.test');
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '.',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser
    files: [
      {pattern: './karma-shim.js', watched: false}
      ],

    // list of files to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './karma-shim.js': ['webpack']
    },
    webpack: webpackConfig,
    plugins:[
      'karma-jasmine',
      'karma-chrome-launcher',
      require("karma-webpack")
    ],
    proxies:{
      //http://localhost:3000/#/pages/strategys/strategytables
      "/app/": "base/src/app"
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],
    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
   // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

//karma-shim,js
Error.stackTraceLimit = Infinity;

require('reflect-metadata');
require('zone.js/dist/zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');


var appContext = require.context('./src',true,/\.spec\.ts/);
appContext.keys().forEach(appContext);


var testing = require('@angular/core/testing');
var testingBrowser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(testingBrowser.
    BrowserDynamicTestingModule,
    testingBrowser.platformBrowserDynamicTesting());

//webpack.test.js
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  resolve: {
    extensions: ['.ts','.js']
  },

  entry: {
   },

  module: {
    loaders: [
      //��.ts��β���ļ�ʹ�� TypeScript loader
      {test: /.ts$/,loader: 'awesome-typescript-loader'},
      {
        test:/\.html$/,
        loader: 'html'
      },
      {
        test:/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null'
      },
      {
        test:/\.css$/,
        loader: 'null'
      }
    ]
  }
  
}

Were you using a relative or absolute path for templateUrl? If you fixed it I would love to know what the problem was. — Winnemucca

Graham Graham · Accepted Answer · 2018-03-07T19:16:33

I had the same Unhandled Promise Rejection error when testing a component with templateURL and assigning raw html to it. I believe this was because it was trying to load a nonexistent html file. Using template with the raw html solved the problem.

I think all this error means is the html file specified cannot be located, so make sure the path is correct and the desired html file is in the correct place.

Angular2 testing: 'Unhandled Promise rejection:', 'Failed to load strategyTables.html'

1 Answers