angular-builders
angular-builders copied to clipboard
Published
20 hours ago •
just-jeb
just-jeb
[Karma] Uncaught ReferenceError: sourceMapSupport is not defined
I have this issue after migration to angular 12 dev build work correctly also production but running karma test is problem this is still reported and than stuct, browser is open but cannot continue bc. same issue is in console
⠙ Generating browser application bundles (phase: building)...25 10 2021 18:19:48.078:WARN [karma]: No captured browser, open http://192.168.69.1:9876/
✔ Browser application bundle generation complete.
25 10 2021 18:19:52.165:WARN [karma]: No captured browser, open http://192.168.69.1:9876/
START:
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
const webdriver = require('selenium-webdriver');
module.exports = async function (config) {
// Get local IP for selenium runner
const address = require('./builder/helpers').getMyIPAddress(false);
const configuration = {
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-selenium-webdriver-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('karma-junit-reporter'),
require('karma-mocha-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
{ 'reporter:jasmine-seed': ['type', JasmineSeedReporter] },
],
reporters: ['mocha', 'coverage', 'kjhtml', 'junit', 'jasmine-seed'],
coverageReporter: {
reporters: [
{ type: 'html', subdir: 'html' },
{ type: 'text-summary', subdir: '.' },
{ type: 'lcovonly', subdir: '.' },
{ type: 'json', subdir: '.', file: 'coverage.json' },
],
dir: './coverage',
includeAllSources: true,
},
mochaReporter: {
maxLogLines: 50,
},
// the default configuration
junitReporter: {
outputDir: './coverage',
outputFile: './karma-junit.xml',
suite: 'Crossuite Karma Unit',
useBrowserName: false,
nameFormatter: (browser, result) => {
return result.description;
},
classNameFormatter: (browser, result) => {
return result.suite[0];
},
// properties: {}
},
port: 9876,
colors: process.env.DOCKER_EXTRA !== '--no-color',
logLevel: config.LOG_WARN,
// autoWatch: true, // already in parent config
browsers: [/*'ChromeTravisCi'*/ 'Chrome'],
// singleRun: false, // already in parent config
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
random: true,
seed: '',
},
},
browserDisconnectTimeout: 15 * 1000,
browserDisconnectTolerance: 1,
browserNoActivityTimeout: 100 * 60 * 1000,
captureTimeout: 10 * 60 * 1000,
restartOnFileChange: true,
hostname: address && address.length ? address[0] : 'localhost',
customLaunchers: {
ChromeTravisCi: {
base: 'ChromeHeadless',
browserName: 'Chrome',
flags: [
'--no-sandbox',
'--headless',
'--disable-gpu',
'--disable-web-security',
'--disable-translate',
'--disable-extensions',
'--disable-dev-shm-usage',
'--hide-scrollbars',
'--mute-audio',
// '--remote-debugging-port=9223'
],
},
ChromeSelenium: {
base: 'SeleniumWebdriver',
browserName: 'Chrome',
flags: [
'--no-sandbox',
'--headless',
'--disable-gpu',
'--disable-web-security',
'--disable-translate',
'--disable-extensions',
'--disable-dev-shm-usage',
'--hide-scrollbars',
'--mute-audio',
// '--remote-debugging-port=9223'
],
getDriver: function () {
return new webdriver.Builder()
.forBrowser('chrome')
.usingServer('http://selenium-chrome:4444/wd/hub')
.build();
},
},
},
};
if (
process.env.TRAVIS ||
config.browsers.includes('ChromeTravisCi') ||
config.browsers.includes('ChromeSelenium')
) {
if (config.browsers.includes('ChromeSelenium')) {
configuration.browsers = ['ChromeSelenium'];
} else {
configuration.browsers = ['ChromeTravisCi'];
}
}
if (
configuration.browsers.includes('ChromeTravisCi') ||
configuration.browsers.includes('ChromeSelenium')
) {
const kjhtml = configuration.reporters.indexOf('kjhtml');
if (kjhtml > -1) {
configuration.reporters.splice(kjhtml, 1);
}
const chrome = configuration.browsers.indexOf('Chrome');
if (chrome > -1) {
configuration.browsers.splice(chrome, 1);
}
}
if (process.env.PARALLEL) {
config.frameworks.unshift('parallel');
config.plugins.unshift(require('karma-parallel'));
config.parallelOptions = {
// executors: 10, // Defaults to cpu-count - 1
// shardStrategy: 'round-robin'
// shardStrategy: 'description-length'
// shardStrategy: 'custom'
// customShardStrategy: function(config) {
// config.executors // number, the executors set above
// config.shardIndex // number, the specific index for the shard currently running
// config.description // string, the name of the top-level describe string. Useful // for determining how to shard the current specs
// return config.
// }
};
}
config.set(configuration);
};
// Helpers
function JasmineSeedReporter(baseReporterDecorator) {
baseReporterDecorator(this);
this.onBrowserComplete = (browser, result) => {
const seed = result.order && result.order.random && result.order.seed;
if (seed) this.write(`${browser}: Randomized with seed ${seed}.\n`);
};
this.onRunComplete = () => undefined;
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"defaultProject": "sandbox",
"cli": {
"analytics": false,
"packageManager": "npm"
},
"projects": {
"sandbox": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "cp",
"i18n": {
"sourceLocale": "en-GB",
"locales": {
"nl-BE": "src/locale/messages.nl-BE.xlf",
"nl-NL": "src/locale/messages.nl-NL.xlf",
"fr-BE": "src/locale/messages.fr-BE.xlf",
"de-DE": "src/locale/messages.de-DE.xlf"
}
},
"architect": {
"build": {
"defaultConfiguration": "",
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "build/sandbox",
"index": "src/index.html",
"main": "src/app.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false
},
"assets": [
{
"glob": "favicon-32x32.png",
"input": "nui/assets/favicons/",
"output": "/favicons/"
},
{
"glob": "*",
"input": "assets",
"output": "/public/images/"
},
{
"glob": "*",
"input": "config/init/",
"output": "/config/init/"
}
],
"styles": ["src/style.scss"],
"stylePreprocessorOptions": {
"includePaths": ["nui", "node_modules/@syncfusion"]
},
"scripts": [],
"customWebpackConfig": {
"path": "./builder/webpack.extras.dev.ts"
},
"allowedCommonJsDependencies": [
"md5",
"croppie",
"xlsx",
"file-saver",
"node-interval-tree",
"socket.io-client",
"moment-timezone",
"dom-set",
"dom-plane",
"dom-autoscroller",
"zone.js/dist/long-stack-trace-zone",
"querystring",
"formiojs"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"customWebpackConfig": {
"path": "./builder/webpack.extras.prod.ts"
},
"assets": [
{
"glob": "robots.txt",
"input": "nui/assets/",
"output": "/"
},
{
"glob": "humans.txt",
"input": "nui/assets/",
"output": "/"
},
{
"glob": "**/*",
"input": "nui/assets/favicons/",
"output": "/favicons/"
},
{
"glob": "*",
"input": "assets",
"output": "/public/images/"
},
{
"glob": "*",
"input": "config/init/",
"output": "/config/init/"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"localize": true,
"statsJson": false,
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": true
},
"namedChunks": false,
"extractLicenses": true,
"buildOptimizer": true,
"budgets": [
{
"type": "bundle",
"name": "main",
"maximumWarning": "700kb",
"maximumError": "1400kb"
},
{
"type": "initial",
"maximumWarning": "1500kb",
"maximumError": "3mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "50kb"
},
{
"type": "anyScript",
"maximumWarning": "1mb",
"maximumError": "5mb"
}
]
},
"be": {
"localize": ["nl-BE"]
},
"nl": {
"localize": ["nl-NL"]
},
"fr": {
"localize": ["fr-BE"]
},
"de": {
"localize": ["de-DE"]
},
"prod-stats": {
"browserTarget": "sandbox:build:production",
"statsJson": true,
"outputHashing": "none"
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "sandbox:build",
"port": 8080
},
"configurations": {
"production": {
"browserTarget": "sandbox:build:production"
},
"be": {
"browserTarget": "sandbox:build:be"
},
"nl": {
"browserTarget": "sandbox:build:nl"
},
"fr": {
"browserTarget": "sandbox:build:fr"
},
"de": {
"browserTarget": "sandbox:build:de"
},
"jit": {
"aot": false,
"sourceMap": {
"scripts": true,
"styles": false,
"vendor": false
}
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "sandbox:build",
"format": "xlf2",
"outputPath": "src/locale",
"outFile": "messages.xlf"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"codeCoverage": true,
"styles": [],
"scripts": [],
"customWebpackConfig": {
"path": "./builder/webpack.extras.ts"
}
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "sandbox:serve"
},
"configurations": {
"production": {
"devServerTarget": "sandbox:serve:production"
},
"noserve": {
"devServerTarget": ""
},
"sandbox": {
"devServerTarget": "",
"baseUrl": "https://app.mvp-dev.aws.crossuite.com"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
"exclude": ["**/node_modules/**"]
}
}
}
}
}
}
tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec"
},
"files": ["src/test.ts", "src/polyfills.ts"],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts",
"@types/*.d.ts",
"nui/@types/*.d.ts",
"core/@types/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"target": "ES2015",
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noUnusedParameters": false,
"noUnusedLocals": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"strictNullChecks": false,
"skipLibCheck": true,
"strict": true,
"strictPropertyInitialization": false,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"pretty": true,
"resolveJsonModule": true,
"declaration": false,
"lib": ["dom", "es2019"],
"baseUrl": ".",
"outDir": "./out-tsc/base",
"paths": {
"nui/*": ["nui/src/lib/*"],
"nui/shared/*": ["nui/src/shared/*"],
"src/globals": ["src/globals.ts"],
"src/env": ["src/env.ts"],
"core/*": ["core/src/*"],
"store/*": ["src/store/*"],
"app/*": ["src/app/*"],
"lib/*": ["src/lib/*"],
"lazy/*": ["src/lazy/*"],
"modernizr": ["nui/vendor/modernizr.js"],
"test/*": ["src/test/*"],
"src/i18n": ["src/i18n/index.ts"]
},
"typeRoots": ["node_modules/@types", "@types", "nui/@types", "core/@types"]
},
"exclude": [
"aio-builds-setup",
"content",
"dist",
"build",
"node_modules",
"out-tsc",
"scripts",
"tools",
"nui/node_modules"
],
"angularCompilerOptions": {
"strictInputAccessModifiers": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"strictTemplates": true,
"strictInputTypes": true,
"strictOutputEventTypes": true
}
}
Hey @KrakenTyio, thanks for opening this issue! If you switch back to the default Angular builder everything works fine?
Hi, when i switch to default its work almost correct, ofc almost bc i use in custom handler for svg loader, but yes when i turn off (comment) features in project which is needed this custom loaders, everethinks work correct
i found in other threats like that https://github.com/tschaub/karma-source-map-support/issues/30#issuecomment-953219812
there is issue with this source-map-support and new ts-node version
after reading this for now i prepare my own quick prebuild file like npx tsc ./builder/webpack.extras.dev.ts which create ./builder/webpack.extras.dev.js and load to custom-webpack:karma this file and everethink work well
so issue is only when is setting wrote in ts
also will be nice set different tsconfig options for config ts file and different for builded project which will be tested
@elliottregan in the package.json in the devDependencies in the version for the ts-node, make sure there is no ~ or ^:
"devDependencies": {
"ts-node": "10.2.1"
}
I just tried with [email protected], and the issue still exists. We're stuck on [email protected] still...
I started a discussion on the release notes for the version of ts-node that broke this. Hoping to get more traction with the issue.
https://github.com/TypeStrong/ts-node/discussions/1507
I've responded with a tiny, tested, working fix in https://github.com/TypeStrong/ts-node/discussions/1507 but no one has followed up. So the traction issue appears to be external to ts-node.
Replacing this => "ts-node": "^10.7.0", For this => "ts-node": "10.2.1"
Worked for me.
