I am working on a Rails 4 project and am trying to write Jasmine tests, but it doesn't look like Jasmine is detecting any of my files.
My spec/javascripts folder looks like this:
./
├── e2e
│ └── products_scenarios.js
├── foo_spec.js
└── support
└── jasmine.yml
and inside jasmine.yml:
# # path to parent directory of src_files
# # relative path from Rails.root
# # defaults to app/assets/javascripts
# src_dir: "app/assets/javascripts"
#
# # path to parent directory of css_files
# # relative path from Rails.root
# # defaults to app/assets/stylesheets
# css_dir: "app/assets/stylesheets"
#
# # list of file expressions to include as source files
# # relative path from src_dir
# src_files:
# - "application.{js.coffee,js,coffee}"
#
# # list of file expressions to include as css files
# # relative path from css_dir
# css_files:
#
# # path to parent directory of spec_files
# # relative path from Rails.root
# # defaults to spec/javascripts
spec_dir: spec/javascripts
#
# # list of file expressions to include as helpers into spec runner
# # relative path from spec_dir
# helpers:
# - "helpers/**/*.{js.coffee,js,coffee}"
# list of file expressions to include as specs into spec runner
# relative path from spec_dir
spec_files:
- "**/*[Ss]pec.{js.coffee,js,coffee}"
# path to directory of temporary files
# (spec runner and asset cache)
# defaults to tmp/jasmine
# tmp_dir: "tmp/jasmine"
and inside foo_spec.js:
describe('Foo', function() {
it("does something", function() {
expect(1+1).toBe(2);
});
});
describe('ProductsCtrl', function() {
beforeEach(module('ilook'));
it('sets title to zzzzz', inject(function($controller) {
var scope = {},
ctrl = $controller('ProductsCtrl', { $scope: scope });
expect(scope.title).toBe("My zzzz");
}));
});
However, when I run the tests:
Nets-Mac-Pro:mysite emai$ be rake spec:javascript
Running `"/Users/emai/.phantomjs/1.9.7/darwin/bin/phantomjs" "/Users/emai/.rvm/gems/ruby-2.0.0-p247#mysite/gems/jasmine-rails-0.9.1/lib/jasmine_rails/../assets/javascripts/jasmine-runner.js" "/Users/emai/Documents/mysite/tmp/jasmine/runner.html?spec="`
Running: /Users/emai/Documents/mysite/tmp/jasmine/runner.html?spec=
Starting...
Finished
-----------------
0 specs, 0 failures in 0.002s.
It says I have no specs. What's going on? I saved all my files.
Add this file
# src_files
#
# Return an array of filepaths relative to src_dir to include before jasmine specs.
# Default: []
#
# EXAMPLE:
#
# src_files:
# - lib/source1.js
# - lib/source2.js
# - dist/**/*.js
#
src_files:
- assets/application.js
- assets/jasmine-jquery.js
# stylesheets
#
# Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs.
# Default: []
#
# EXAMPLE:
#
# stylesheets:
# - css/style.css
# - stylesheets/*.css
#
stylesheets:
- stylesheets/**/*.css
# helpers
#
# Return an array of filepaths relative to spec_dir to include before jasmine specs.
# Default: ["helpers/**/*.js"]
#
# EXAMPLE:
#
# helpers:
# - helpers/**/*.js
#
helpers:
- helpers/**/*.js
# spec_files
#
# Return an array of filepaths relative to spec_dir to include.
# Default: ["**/*[sS]pec.js"]
#
# EXAMPLE:
#
# spec_files:
# - **/*[sS]pec.js
#
spec_files:
- '**/*[sS]pec.js'
# src_dir
#
# Source directory path. Your src_files must be returned relative to this path. Will use root if left blank.
# Default: project root
#
# EXAMPLE:
#
# src_dir: public
#
src_dir:
# spec_dir
#
# Spec directory path. Your spec_files must be returned relative to this path.
# Default: spec/javascripts
#
# EXAMPLE:
#
# spec_dir: spec/javascripts
#
spec_dir: spec/javascripts
Also try to run below command for running jasmine
rake jasmine
It will give you port number. So run the server on that port numvber
Related
Sorry, the question unfortunately hasn't got much detail as I am not sure what exactly is required to explain the issue. To start with, I am trying to use ng2-ace-editor in my Angular application. My setup is not standard though. Details are in this other related problem - application can't find a .js file
In summary, if I explicitly include ace.js in my top level html then things work. But I don't want to do that as I want to use only the bundles created by Angular. But if I use only the bundles then I get the following error when I run the application -
ace.js:1 Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver
f # ace.js:1
t.loadModule # ace.js:1
setTheme # ace.js:1
setTheme # ace.js:1
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setTheme # component.js:117
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.init # component.js:48
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.ngOnInit # component.js:40
checkAndUpdateDirectiveInline # core.js:9250
checkAndUpdateNodeInline # core.js:10514
checkAndUpdateNode # core.js:10476
debugCheckAndUpdateNode # core.js:11109
debugCheckDirectivesFn # core.js:11069
eval # NewPracticeQuestionComponent.html:188
debugUpdateDirectives # core.js:11061
checkAndUpdateView # core.js:10458
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callViewAction # core.js:10699
execEmbeddedViewsAction # core.js:10662
checkAndUpdateView # core.js:10459
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callWithDebugContext # core.js:11351
debugCheckAndUpdateView # core.js:11029
push../node_modules/#angular/core/fesm5/core.js.ViewRef_.detectChanges # core.js:8845
(anonymous) # core.js:4581
push../node_modules/#angular/core/fesm5/core.js.ApplicationRef.tick # core.js:4581
(anonymous) # core.js:4473
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:388
onInvoke # core.js:3824
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run # zone.js:138
push../node_modules/#angular/core/fesm5/core.js.NgZone.run # core.js:3738
next # core.js:4473
schedulerFn # core.js:3555
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub # Subscriber.js:209
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next # Subscriber.js:147
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next # Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next # Subscriber.js:55
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next # Subject.js:47
push../node_modules/#angular/core/fesm5/core.js.EventEmitter.emit # core.js:3539
checkStable # core.js:3793
onHasTask # core.js:3837
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask # zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount # zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount # zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:205
drainMicroTaskQueue # zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:500
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
Show 26 more frames
ace.js:1 GET http://localhost:9000/theme-monokai.js net::ERR_ABORTED 404 (Not Found)
t.loadScript # ace.js:1
t.loadModule # ace.js:1
setTheme # ace.js:1
setTheme # ace.js:1
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setTheme # component.js:117
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.init # component.js:48
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.ngOnInit # component.js:40
checkAndUpdateDirectiveInline # core.js:9250
checkAndUpdateNodeInline # core.js:10514
checkAndUpdateNode # core.js:10476
debugCheckAndUpdateNode # core.js:11109
debugCheckDirectivesFn # core.js:11069
eval # NewPracticeQuestionComponent.html:188
debugUpdateDirectives # core.js:11061
checkAndUpdateView # core.js:10458
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callViewAction # core.js:10699
execEmbeddedViewsAction # core.js:10662
checkAndUpdateView # core.js:10459
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callViewAction # core.js:10699
execComponentViewsAction # core.js:10641
checkAndUpdateView # core.js:10464
callWithDebugContext # core.js:11351
debugCheckAndUpdateView # core.js:11029
push../node_modules/#angular/core/fesm5/core.js.ViewRef_.detectChanges # core.js:8845
(anonymous) # core.js:4581
push../node_modules/#angular/core/fesm5/core.js.ApplicationRef.tick # core.js:4581
(anonymous) # core.js:4473
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:388
onInvoke # core.js:3824
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke # zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run # zone.js:138
push../node_modules/#angular/core/fesm5/core.js.NgZone.run # core.js:3738
next # core.js:4473
schedulerFn # core.js:3555
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub # Subscriber.js:209
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next # Subscriber.js:147
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next # Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next # Subscriber.js:55
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next # Subject.js:47
push../node_modules/#angular/core/fesm5/core.js.EventEmitter.emit # core.js:3539
checkStable # core.js:3793
onHasTask # core.js:3837
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask # zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount # zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount # zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask # zone.js:205
drainMicroTaskQueue # zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask # zone.js:500
invokeTask # zone.js:1540
globalZoneAwareCallback # zone.js:1566
Show 26 more frames
414ede0a-7ac6-4556-a68b-bfcd8c991283:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/414ede0a-7ac6-4556-a68b-bfcd8c991283:1:1
Further analysis shows that the error is thrown from the following piece of code in ace.js.
exports.loadModule = function(moduleName, onLoad) {
var module, moduleType;
if (Array.isArray(moduleName)) {
moduleType = moduleName[0];
moduleName = moduleName[1];
}
try {
module = require(moduleName);
} catch (e) {}
if (module && !exports.$loading[moduleName])
return onLoad && onLoad(module);
if (!exports.$loading[moduleName])
exports.$loading[moduleName] = [];
exports.$loading[moduleName].push(onLoad);
if (exports.$loading[moduleName].length > 1)
return;
var afterLoad = function() {
require([moduleName], function(module) {
exports._emit("load.module", {name: moduleName, module: module});
var listeners = exports.$loading[moduleName];
exports.$loading[moduleName] = null;
listeners.forEach(function(onLoad) {
onLoad && onLoad(module);
});
});
};
if (!exports.get("packaged"))
return afterLoad();
net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
reportErrorIfPathIsNotConfigured();
};
var reportErrorIfPathIsNotConfigured = function() {
if (
!options.basePath && !options.workerPath
&& !options.modePath && !options.themePath
&& !Object.keys(options.$moduleUrls).length
) {
console.error(
"Unable to infer path to ace from script src,",
"use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes",
"or with webpack use ace/webpack-resolver"
);
reportErrorIfPathIsNotConfigured = function() {};
}
};
What is causing the issue? I suppose Angular uses webpack. What is this ace/webpack-resolver thing? How do I solve the issue?
I finally was able to make my code work. My setup is different.
The reason adding script tag explicitly made my code work is because By default ace detcts the url for dynamic loading by finding the script node for ace.js. This doesn't work if ace.js is not loaded with a separate script tag, and in this case it is required to set url explicitely (https://ace.c9.io/#nav=howto). As I am loading modes and themes without using script, I had to use basePath etc. (see answer further).
I build my Angular application and the it is served from my Play server. The angular build is stored in Play's /public/ui folder. The requests should be in format /assets/ui/.. which gets mapped to /public/ui/... due to a rule in Play routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
When I ran the code, I got error.
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1
Earlier, I also got error `Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver`
It seems ng-ace-editor imports .js scripts (theme, mode, worker) based on the theme and mode of the editor. The theme and mode .js files can be included in scripts.js but some worker-.js files can't be (I don't know why, maybe because worker ones are loaded dynamically using importScript).
The scripts section in Angular.json is (this will all get bundled in scripts.js in Angular's final bundle)
"scripts": [
"./node_modules/ace-builds/src/ace.js",
"./node_modules/ace-builds/src/theme-eclipse.js",
"./node_modules/ace-builds/src/theme-monokai.js",
"./node_modules/ace-builds/src/mode-html.js"
]]
To include worker-.js files, I added this rule because it seems angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - How to include assets from node_modules in angular cli project
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/ace-builds/src/",
"output": "/"
}
],
When I executed the code, I found error that http://localhost:9000/worker-javascript.js can't be loaded. I realised that my files are loaded in /assets/ui/ path and not in the server's root directory. So I set ace.js's basepath to /assets/ui in the component's .ts file
import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');
In summary basePath seem to be what is used to load scripts dynamically (eg worker scripts). modePath and themePath are / as the mode and theme scripts are bundled in scripts.js and my index.html correctly loaded scripts.js using <script> tag and are available at root level need to copy worker-.js files outside node_modules as angular_cli can't copy assets from node_modules
I am working on expo SDK Version: 36, and on all platforms (ios/android/web)
When installing react-navigation for the first time as described in the documentation and running jest --watch while doing it, and the following warning appeared:
console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
It also happen in the browser console:
bundle.js:18272 Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
in Card (at CardContainer.tsx:132)
in CardContainer (at CardStack.tsx:499)
in CardStack (at StackView.tsx:384)
in KeyboardManager (at StackView.tsx:382)
in Context.Consumer (at StackView.tsx:380)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Anonymous (at createNavigator.js:80)
in Navigator (at createAppContainer.js:351)
in NavigationContainer (at AppCore.js:15)
in AppCore (at App.js:14)
in App (at withExpoRoot.web.js:13)
in ExpoRootComponent (at registerRootComponent.web.js:6)
in RootComponent
warn # bundle.js:18272
r # backend.js:6
shouldUseNativeDriver # bundle.js:76326
TimingAnimation # bundle.js:76894
start # bundle.js:75709
start # bundle.js:75715
Card._this.animate # bundle.js:85843
componentDidMount # bundle.js:85980
commitLifeCycles # bundle.js:52243
commitLayoutEffects # bundle.js:55486
callCallback # bundle.js:30478
invokeGuardedCallbackDev # bundle.js:30527
invokeGuardedCallback # bundle.js:30582
commitRootImpl # bundle.js:55224
unstable_runWithPriority # bundle.js:92068
runWithPriority$2 # bundle.js:42291
commitRoot # bundle.js:55064
finishSyncRender # bundle.js:54471
performSyncWorkOnRoot # bundle.js:54449
(anonymous) # bundle.js:42341
unstable_runWithPriority # bundle.js:92068
runWithPriority$2 # bundle.js:42291
flushSyncCallbackQueueImpl # bundle.js:42336
flushSyncCallbackQueue # bundle.js:42324
scheduleUpdateOnFiber # bundle.js:53851
enqueueSetState # bundle.js:44136
../../../react/cjs/react.development.js.Component.setState # bundle.js:88125
_callee2$ # bundle.js:1353
tryCatch # bundle.js:90193
invoke # bundle.js:90419
prototype.<computed> # bundle.js:90245
tryCatch # bundle.js:90193
invoke # bundle.js:90283
(anonymous) # bundle.js:90293
Promise.then (async)
invoke # bundle.js:90292
(anonymous) # bundle.js:90293
Promise.then (async)
invoke # bundle.js:90292
(anonymous) # bundle.js:90318
callInvokeWithMethodAndArg # bundle.js:90317
enqueue # bundle.js:90340
prototype.<computed> # bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async # bundle.js:90364
_callee2 # bundle.js:1324
SplashScreen # bundle.js:1537
constructClassInstance # bundle.js:44346
updateClassComponent # bundle.js:48555
beginWork$1 # bundle.js:50328
beginWork$$1 # bundle.js:55898
performUnitOfWork # bundle.js:54837
workLoopSync # bundle.js:54813
performSyncWorkOnRoot # bundle.js:54412
(anonymous) # bundle.js:42341
unstable_runWithPriority # bundle.js:92068
runWithPriority$2 # bundle.js:42291
flushSyncCallbackQueueImpl # bundle.js:42336
flushSyncCallbackQueue # bundle.js:42324
scheduleUpdateOnFiber # bundle.js:53851
enqueueSetState # bundle.js:44136
../../../react/cjs/react.development.js.Component.setState # bundle.js:88125
onFinish # bundle.js:1392
_callee$ # bundle.js:18446
tryCatch # bundle.js:90193
invoke # bundle.js:90419
prototype.<computed> # bundle.js:90245
tryCatch # bundle.js:90193
invoke # bundle.js:90283
(anonymous) # bundle.js:90293
Promise.then (async)
invoke # bundle.js:90292
(anonymous) # bundle.js:90318
callInvokeWithMethodAndArg # bundle.js:90317
enqueue # bundle.js:90340
prototype.<computed> # bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async # bundle.js:90364
_callee # bundle.js:18389
componentDidMount # bundle.js:18470
commitLifeCycles # bundle.js:52243
commitLayoutEffects # bundle.js:55486
callCallback # bundle.js:30478
invokeGuardedCallbackDev # bundle.js:30527
invokeGuardedCallback # bundle.js:30582
commitRootImpl # bundle.js:55224
unstable_runWithPriority # bundle.js:92068
runWithPriority$2 # bundle.js:42291
commitRoot # bundle.js:55064
finishSyncRender # bundle.js:54471
performSyncWorkOnRoot # bundle.js:54449
scheduleUpdateOnFiber # bundle.js:53840
updateContainer # bundle.js:57245
(anonymous) # bundle.js:57670
unbatchedUpdates # bundle.js:54575
legacyRenderSubtreeIntoContainer # bundle.js:57669
render # bundle.js:57750
renderApplication # bundle.js:65334
run # bundle.js:65227
runApplication # bundle.js:65266
registerRootComponent # bundle.js:18777
../../../expo/AppEntry.js # bundle.js:14474
__webpack_require__ # bundle.js:727
fn # index.js:69
0 # bundle.js:101987
__webpack_require__ # bundle.js:727
(anonymous) # bundle.js:794
(anonymous) # bundle.js:797
Show 40 more frames
[Violation] 'requestAnimationFrame'
Related issues:
https://github.com/expo/ex-navigation/issues/276
https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
The last one offers a solution, but it says to open Xcode, while I am on Linux Debian 10. I do not have Xcode. I can use a Macbook and do the step but I am wondering:
Should I care when working on Linux?
Should I care when working on Macbook (if it happens)?
Should I care for the health of my app while testing? Under which circumstances?
To disable this warning add either of the following to your test file.
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
or
jest.mock('NativeAnimatedHelp');
In your package.json file
"jest": {
"setupFiles": [
"./mock.js"
],
In mock.js
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
jest.mock('NativeAnimatedHelp');
You can safely ignore this warning. useNativeDriver is only important when running the code on device.
Nothing above wasn't working for me, but eventually I've found solution here:
create jest-setup.js file (in my case in src/tests directory):
src/tests/jest-setup.js:
import 'react-native-gesture-handler/jestSetup';
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
jest.mock('react-native-reanimated', () => {
const Reanimated = require('react-native-reanimated/mock');
// The mock for `call` immediately calls the callback which is incorrect
// So we override it with a no-op
Reanimated.default.call = () => {};
return Reanimated;
});
Install necessary packages (in my case react-native-reanimated only, but maybe your code will ask you something else):
npm install --save-dev react-native-reanimated
Add one row to jest config in package.json:
"jest": {
"setupFiles": [
"<rootDir>/src/tests/jest-setup.js"
]
},
If your jest-setup.js file located in other directory - change location accordingly.
After these simple steps, the annoying warning has gone. Thanks Spencer Carli and his article by link above.
app.js echo script:
Echo:join('chatroom')
.listen('MessagePosted', (e) => {
this.messages.push({
message: e.message.message,
user: e.user
});
});
getting following error:
app.js:37859 [Vue warn]: Error in created hook: "ReferenceError: join
is not defined"
(found in )warn # app.js:37859handleError # app.js:37944callHook
# app.js:39983Vue._init # app.js:41425Vue$3 # app.js:41520(anonymous
function) # app.js:1127__webpack_require__ # app.js:20(anonymous
function) # app.js:47150__webpack_require__ # app.js:20(anonymous
function) # app.js:66(anonymous function) # app.js:69 app.js:37948
ReferenceError: join is not defined(…)handleError #
app.js:37948callHook # app.js:39983Vue._init # app.js:41425Vue$3 #
app.js:41520(anonymous function) # app.js:1127__webpack_require__ #
app.js:20(anonymous function) # app.js:47150__webpack_require__ #
app.js:20(anonymous function) # app.js:66(anonymous function) #
app.js:69 app.js:45006 Download the Vue Devtools extension for a
better development experience:
install pusher and laravel-echo
you can install it by using
npm install --save laravel-echo pusher-js
I hope this helps
you will also need to compile the code
in Angular 2 project written in typescript and packaged with webpack I add e.g. following throw to welcome.ts file:
#Page({
templateUrl: 'build/views/welcome/welcome.html'
})
export class Welcome{
constructor(){
throw('something went wrong')
}
}
In JS console, I see following error and stacktrace:
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error during instantiation of Welcome!.
ORIGINAL EXCEPTION: something went wrong
ERROR CONTEXT:
[object Object]BrowserDomAdapter.logError # browser_adapter.js?f9d6:77
BrowserDomAdapter.logGroup # browser_adapter.js?f9d6:87
ExceptionHandler.call # exception_handler.js?1ee2:57
(anonymous function) # application_ref.js?7cf8:194
EventEmitter.subscribe.schedulerFn # async.js?563f:123
SafeSubscriber.__tryOrUnsub # VM2136:166SafeSubscriber.next # VM2136:115
Subscriber._next # VM2136:74Subscriber.next # VM2136:51
Subject._finalNext # VM2130:124Subject._next # VM2130:116
Subject.next # VM2130:73EventEmitter.emit # async.js?563f:112
_a._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError # ng_zone.js?c886:120
_a.inner.inner.fork.onHandleError # ng_zone_impl.js?4233:66
ZoneDelegate.handleError # zone.js?fad3:327Zone.runGuarded # zone.js?fad3:233
_loop_1 # zone.js?fad3:487drainMicroTaskQueue # zone.js?fad3:494cancelFn.invoke # zone.js?fad3:426
browser_adapter.js?f9d6:77
STACKTRACE:BrowserDomAdapter.logError # browser_adapter.js?f9d6:77
ExceptionHandler.call # exception_handler.js?1ee2:59
(anonymous function) # application_ref.js?7cf8:194
EventEmitter.subscribe.schedulerFn # async.js?563f:123
SafeSubscriber.__tryOrUnsub # VM2136:166SafeSubscriber.next # VM2136:115
Subscriber._next # VM2136:74
Subscriber.next # VM2136:51
Subject._finalNext # VM2130:124
Subject._next # VM2130:116
Subject.next # VM2130:73
EventEmitter.emit # async.js?563f:112
_a._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError # ng_zone.js?c886:120_
a.inner.inner.fork.onHandleError # ng_zone_impl.js?4233:66
ZoneDelegate.handleError # zone.js?fad3:327
Zone.runGuarded # zone.js?fad3:233
_loop_1 # zone.js?fad3:487drainMicroTaskQueue # zone.js?fad3:494
cancelFn.invoke # zone.js?fad3:426
Is it possible to configure typescript compiler and webpack so that the stacktrace will also feature my welcome.ts file? e.g.:
constructor # welcome.ts:7
So far I tried all the options in webpack devtool option and in tsconfig.js compilerOptions.sourceMap is set to true, but none helped.
I have a a ComponentB in a Angular 2 app (beta 1). It works perfectly fine until I place it inside a ngFor loop in ComponentA. I receive the rather cryptic error of:
EXCEPTION: TypeError: viewFactory_ComponentB0 is not a function in [numbers in ComponentA#1:23]BrowserDomAdapter.logError # angular2.dev.js:22690BrowserDomAdapter.logGroup # angular2.dev.js:22701ExceptionHandler.call # angular2.dev.js:1163(anonymous function) # angular2.dev.js:12416NgZone._notifyOnError # angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13228run # angular2-polyfills.js:141(anonymous function) # angular2.dev.js:13247NgZone.run # angular2.dev.js:13209(anonymous function) # angular2.dev.js:12499schedulerFn # angular2.dev.js:12742tryCatcher # Rx.js:31Subscriber.next # Rx.js:9500Subject._next # Rx.js:9999Subject.next # Rx.js:9963EventEmitter.emit # angular2.dev.js:12723(anonymous function) # angular2.dev.js:13140run # angular2-polyfills.js:138NgZone._notifyOnTurnDone # angular2.dev.js:13139(anonymous function) # angular2.dev.js:13254zoneBoundFn # angular2-polyfills.js:111lib$es6$promise$asap$$flush # angular2-polyfills.js:1305
angular2.dev.js:22690 ORIGINAL EXCEPTION: TypeError: viewFactory_ComponentB0 is not a functionBrowserDomAdapter.logError # angular2.dev.js:22690ExceptionHandler.call # angular2.dev.js:1172(anonymous function) # angular2.dev.js:12416NgZone._notifyOnError # angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13228run # angular2-polyfills.js:141(anonymous function) # angular2.dev.js:13247NgZone.run # angular2.dev.js:13209(anonymous function) # angular2.dev.js:12499schedulerFn # angular2.dev.js:12742tryCatcher # Rx.js:31Subscriber.next # Rx.js:9500Subject._next # Rx.js:9999Subject.next # Rx.js:9963EventEmitter.emit # angular2.dev.js:12723(anonymous function) # angular2.dev.js:13140run # angular2-polyfills.js:138NgZone._notifyOnTurnDone # angular2.dev.js:13139(anonymous function) # angular2.dev.js:13254zoneBoundFn # angular2-polyfills.js:111lib$es6$promise$asap$$flush # angular2-polyfills.js:1305
angular2.dev.js:22690 ORIGINAL STACKTRACE:BrowserDomAdapter.logError # angular2.dev.js:22690ExceptionHandler.call # angular2.dev.js:1175(anonymous function) # angular2.dev.js:12416NgZone._notifyOnError # angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13228run # angular2-polyfills.js:141(anonymous function) # angular2.dev.js:13247NgZone.run # angular2.dev.js:13209(anonymous function) # angular2.dev.js:12499schedulerFn # angular2.dev.js:12742tryCatcher # Rx.js:31Subscriber.next # Rx.js:9500Subject._next # Rx.js:9999Subject.next # Rx.js:9963EventEmitter.emit # angular2.dev.js:12723(anonymous function) # angular2.dev.js:13140run # angular2-polyfills.js:138NgZone._notifyOnTurnDone # angular2.dev.js:13139(anonymous function) # angular2.dev.js:13254zoneBoundFn # angular2-polyfills.js:111lib$es6$promise$asap$$flush # angular2-polyfills.js:1305
angular2.dev.js:22690 TypeError: viewFactory_ComponentB0 is not a function
at AppElement.viewFactory_ComponentA1 [as embeddedViewFactory] (viewFactory_ComponentA:388)
at AppViewManager_.createEmbeddedViewInContainer (angular2.dev.js:9185)
at ViewContainerRef_.createEmbeddedView (angular2.dev.js:5890)
at NgFor._bulkInsert (angular2.dev.js:14608)
at NgFor._applyChanges (angular2.dev.js:14567)
at NgFor.ngDoCheck (angular2.dev.js:14552)
at AbstractChangeDetector.ChangeDetector_ComponentA_0.detectChangesInRecordsInternal (viewFactory_ComponentA:45)
at AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:7825)
at AbstractChangeDetector.runDetectChanges (angular2.dev.js:7808)
at AbstractChangeDetector._detectChangesInViewChildren (angular2.dev.js:7892)
ComponentA:
#Component({
selector: 'component-a'
, directives: [
FORM_DIRECTIVES
, ComponentB
]
, template: `
<!-- works --><component-b [(ngFormControl)]="_formControl"></component-b>
<!-- fails --><component-b *ngFor="#number of numbers" [(ngFormControl)]="_formControls[number]"></component-b>
`
})
export class ComponentA {}
Any hints/help highly appreciated.
As suggested by #TylerDurden
This error message is produced by a bug introduced in cycle detection (see #6404).
There's already a fix in master (see #6474) not yet released. This will for sure be in beta.2.
The recommendation is to downgrade to beta.0 until the storm is over.
Update
This issue has been fixed in beta.2 (issues with minification are still there). See changelog for more details.
Is this problem really solved? I was working on the "beta 0" and the following code worked for me, but when updating files beta 2 still gives me the same problem as in this post. This is my code:
// rowIterator.component.ts
import {Component,forwardRef} from 'angular2/core';
import {ColumIteratorComponent} from './columIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';
#Component({
selector: '[rowIterator]',
template: `
<div *ngFor="#element of rowData">
<div columIterator *ngIf="element.column" [ngClass]="element.class" [columData]="element.column"></div>
<div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
</div>
`,
inputs: ['rowData'],
directives: [forwardRef(function() { return ColumIteratorComponent; }),ModuleIteratorComponent]
})
export class RowIteratorComponent {
// "rowData" is a ARRAYS
}
//columnIterator.components.ts
import {Component,forwardRef} from 'angular2/core';
import {RowIteratorComponent} from './rowIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';
#Component({
selector: '[columIterator]',
template:`
<div *ngFor="#element of columData">
<div rowIterator *ngIf="element.row" [ngClass]="element.class" [rowData]="element.row"></div>
<div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
</div>
`,
inputs: ['columData'],
directives: [forwardRef(function(){return RowIteratorComponent;}), ModuleIteratorComponent]
})
export class ColumIteratorComponent{
// "columData" is a ARRAY
}
I have to use the forwardRef(function() {return RowIteratorComponent;} function and forwardRef(function() {return ColumIteratorComponent;}) respectively for the loop in the Beta 0 version and have no problems, but in Versioned beta2 get the following error:
EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent#2:25]
EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent#2:25]BrowserDomAdapter.logError # angular2.dev.js:22911BrowserDomAdapter.logGroup # angular2.dev.js:22922ExceptionHandler.call # angular2.dev.js:1182(anonymous function) # angular2.dev.js:12562NgZone._notifyOnError # angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13389Zone.run # angular2-polyfills.js:1247(anonymous function) # angular2.dev.js:13408NgZone.run # angular2.dev.js:13370(anonymous function) # angular2.dev.js:12661schedulerFn # angular2.dev.js:12904tryCatcher # Rx.js:234Subscriber.next # Rx.js:9703Subject._next # Rx.js:10202Subject.next # Rx.js:10166EventEmitter.emit # angular2.dev.js:12885(anonymous function) # angular2.dev.js:13301Zone.run # angular2-polyfills.js:1243NgZone._notifyOnTurnDone # angular2.dev.js:13300(anonymous function) # angular2.dev.js:13415zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch # angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback # angular2-polyfills.js:480lib$es6$promise$$internal$$publish # angular2-polyfills.js:451(anonymous function) # angular2-polyfills.js:123Zone.run # angular2-polyfills.js:1243zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$asap$$flush # angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a functionBrowserDomAdapter.logError # angular2.dev.js:22911ExceptionHandler.call # angular2.dev.js:1191(anonymous function) # angular2.dev.js:12562NgZone._notifyOnError # angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13389Zone.run # angular2-polyfills.js:1247(anonymous function) # angular2.dev.js:13408NgZone.run # angular2.dev.js:13370(anonymous function) # angular2.dev.js:12661schedulerFn # angular2.dev.js:12904tryCatcher # Rx.js:234Subscriber.next # Rx.js:9703Subject._next # Rx.js:10202Subject.next # Rx.js:10166EventEmitter.emit # angular2.dev.js:12885(anonymous function) # angular2.dev.js:13301Zone.run # angular2-polyfills.js:1243NgZone._notifyOnTurnDone # angular2.dev.js:13300(anonymous function) # angular2.dev.js:13415zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch # angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback # angular2-polyfills.js:480lib$es6$promise$$internal$$publish # angular2-polyfills.js:451(anonymous function) # angular2-polyfills.js:123Zone.run # angular2-polyfills.js:1243zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$asap$$flush # angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL STACKTRACE:BrowserDomAdapter.logError # angular2.dev.js:22911ExceptionHandler.call # angular2.dev.js:1194(anonymous function) # angular2.dev.js:12562NgZone._notifyOnError # angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError # angular2.dev.js:13389Zone.run # angular2-polyfills.js:1247(anonymous function) # angular2.dev.js:13408NgZone.run # angular2.dev.js:13370(anonymous function) # angular2.dev.js:12661schedulerFn # angular2.dev.js:12904tryCatcher # Rx.js:234Subscriber.next # Rx.js:9703Subject._next # Rx.js:10202Subject.next # Rx.js:10166EventEmitter.emit # angular2.dev.js:12885(anonymous function) # angular2.dev.js:13301Zone.run # angular2-polyfills.js:1243NgZone._notifyOnTurnDone # angular2.dev.js:13300(anonymous function) # angular2.dev.js:13415zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch # angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback # angular2-polyfills.js:480lib$es6$promise$$internal$$publish # angular2-polyfills.js:451(anonymous function) # angular2-polyfills.js:123Zone.run # angular2-polyfills.js:1243zoneBoundFn # angular2-polyfills.js:1220lib$es6$promise$asap$$flush # angular2-polyfills.js:262
angular2.dev.js:22911 TypeError: viewFactory_ColumIteratorComponent0 is not a function...