Not able to achieve using the IndividualConfig and GlobalConfig classes.
imports: [ToastrModule.forRoot({timeOut: 10000, positionClass: 'toast-bottom-right', preventDuplicates: true})]
Setting the GlobalConfig like the above code snippet will set the timeout for all the types of messages/toastrs, I would like to take control of timeout for each type of message. For example say I want to timeout success message after 2000 milliseconds, error message after 6 seconds, warn and info after 3 seconds. I see this kind of configurations available in Growl messages but not sure about ngx-toastr messages.
I have tried using growl messages in angular 1.x version application
growlProvider.globalTimeToLive({ success: 2000, error: 5000, warning: 3000, info: 2000 });growlProvider.globalDisableCountDown(true);
In Angular 6 App
imports: [ToastrModule.forRoot({timeOut: 10000})]
I am able to set global timeout which is getting applied for all message notifications but i want to take control of each message type
Hi you can try with below configuration
import the ToastrModule and ToastContainerModule in your module
imports: [
ToastrModule.forRoot({ positionClass: 'inline' }),
ToastContainerModule,
]
or
imports: [
ToastrModule.forRoot(),
ToastContainerModule,
]
than call below code to open the toastr with timeout
this.toastrService.show(
'message',
'title',
{positionClass:'inline',
timeOut:500000},
);
check StackBlitz Code in detail
Related
Hi My Main Application url is http:localhost:4000. It internally render iframe app which is http:localhost:4000/contentApp/index.html (with sandbox parameter as sandbox="allow-scripts allow-popups allow-modals allow-forms allowdownloads allow-same-origin") and its in React application.
PrintJS package, using 1.0 version and it makes call to printJS(URL)
//URL, blob:http:localhost:4000/[guid value]
It gets an error at below piece of code within printjs library.
print.js:
try{
iframeElement.focus(); // iframeElement = iframe#printJS { src: blob:http://localhost:4000/a33334343-33434-343434-343434adf', src: '', name: '', sandbox: DOMTockenList(0..)
...
// other browsers
iframeElement.contentWindow.print(); // throw CORS error at here.
} catch(error){ params.onError(error);}
finally {
(o,_function.cleanup)(params);
}
}
above, iframeElement.contentWindow.print() getting an error out with below error CORS:
Uncaught DOMException: Blocked a frame with origin "http://localhost:4000" frame accessing a cross-origin frame.
at performPrint (webpack-internal:///./node_modules/print-js/dist/print.js:898:35)
at HTMLIframeElement.iframeElement.onload (webpack-internal:///./node_modules/print-js/dist/print.js:852:11)
..
When I remove sandbox then it worked. However, I can not remove sandbox as its structure of application.
Is there any way to fix this CORS issue. Like adding some parameter in "iframe sandbox attribute" OR any option at 'printjs' to fix this issue ?
Appreciate for the help.
PrintJS, internally call iframeElement.contentWindow.print(); , I don't have control to do postMessage as its printJS package part. Though, I have control over localhost:4000/contentApp , sandbox attribute.
(Also, it looks like issue created at, "http://localhost:4000" != "BLOB:http://localhost:4000/GUIDvalue" , (which looks weird as, both are pointing to same origin".)
I searched a lot of posts and also the official Angular documentation, but I'm not able to get an AngularJS service running in Angular. I finally came to this page https://angular.io/api/upgrade/static/UpgradeModule#examples which seems to explain exactly what I need, but when doing all those steps I'm getting:
ERROR Error: Trying to get the AngularJS injector before it being set.
My impression is that this example is not quite complete. E.g. there is no hint were the (old) AngularJS framework must be loaded. My service looks like angular.module('my-module').service('my-service', ... thus angular needs to be defined, otherwise I'm getting an error. Furthermore many examples assume that the AngularJS code is written in TypeScript. In my case this is not true (just plain Javascript).
Unfortunately with Angular 9 there is an additional issue with the #angular/upgrade module which is not mentioned anywhere and can only be solved by disabling the new Ivy compiler in tsconfig.app.json, otherwise the compiler will throw Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected UpgradeComponent to have an inner class declaration:
"angularCompilerOptions": {
"enableIvy": false
}
I'd really appreciate if somebody could post a complete example on what exactly must be done in order to run an AngularJS service in an Angular component.
UPDATE [6th July 2020]
Here you can find a GitHub repo which you can clone, to reproduce the behavior: https://github.com/berkon/angularjs-service-upgrade-test. I should also mention that I'm using the Electron framework and started based on this repo https://github.com/maximegris/angular-electron but I guess that shouldn't matter in this case.
Finally I got it working! It was really really cumbersome to figure this all out. A lot of things aren't mentioned in most tutorials and even in the official Angular guide there are only code snippets which make it hard for Angular newbies to guess where to put all that stuff. Also the bootstraping is not explained correctly. Furthermore all tutorials assume that the "old" AngularJS code is already written in TypeScript, which makes it even harder to find the right way/order to load/bootstrap/import all that stuff. Finally there seems to be an issue with the #angular/upgrade module in combination with the new Ivy compiler in Angular 9. It throws the error mentioned below. Thus it must be disabled to get things working. A real pain!!!
So roughly these are the steps:
install the angular and #angular/upgrade node modules
load all .js modules including AngularJS in the script section of angular.json
interrupt the regular Angular bootstrap process by removing the bootstrap section from #NgModule and bootstrap AngularJS via ngDoBootstrap manually. First bootstrap
AngularJS, afterwards bootstrap the AppComponent class. This way the service is available at AppComponent initialization. Otherwise you'll get an injection error!
Add a new provider in providers [] section to get access to the new service
Now the new (upgraded) service can be injected in the constructor of AppComponent
Its quite a lot of work to perform all steps below manually, but I listed them for reference. Here you can find a GitHub repo where you can clone a working app. Don't be surprised! This repo uses the Electron framework (electronjs.org). But don't worry this doesn't have any influence on my findings: https://github.com/berkon/angularjs-service-upgrade-test
And here is the step-by-step guide:
Prerequistes
execute npm install angular --save
execute npm install #angular/upgrade --save
in tsconfig.app.json add "enableIvy": false to angularCompilerOptions to avoid getting:
Error: getInternalNameOfClass() called on a non-ES5 class: expected UpgradeComponent to have an inner class declaration
add "node_modules/angular/angular.js" and the Javascript file which contains your AngularJS service (in this case "src/app/angular-js-service.js") to the scripts [] array in angular.json
app.module.ts
add ApplicationRef to the import brackets of #angular/core
add import { UpgradeModule } from '#angular/upgrade/static'
add UpgradeModule to imports [] array of #NgModule
remove bootstrap section completely from #NgModule and replace it with this: entryComponents: [AppComponent]
add this to the providers [] array in #NgModule and make sure to replace myService with the correct name of your service:
{ provide: 'myService', useFactory: (i: any) => { return i.get('myService') }, deps: ['$injector'] }
replace the constructor of AppModule with this:
constructor ( public upgradeModule: UpgradeModule ) {}
add this to the AppModule class and make sure to replace ajsAppModule with the name of your AngularJS main app module:
ngDoBootstrap ( appRef: ApplicationRef ) {
this.upgradeModule.bootstrap(document.body, ['ajsAppModule'], { strictDi: true } )
appRef.bootstrap ( AppComponent )
}
app.component.ts
add Inject to the import brackets at #angular/core
in the AppComponent class change the constructor to this and make sure to replace myService with the name of your AngularJS service
constructor ( #Inject('myService') myService: any ) {
myService.doSomething()
}
I had this same error and I solved it in my app, however I cannot remember exactly why this was happening (sorry, it was a long time ago). I wasn't upgrading services, instead I was downgrading.
Here's my app.module.ts I've added comments to the parts that were critical to get this working, I hope there may be a hint for you here. Note that I used the Angular CLI to generate the app.
setAngularJSGlobal(angular);
// Configure the angularjs app (yours might be defined elsewhere)
const app = angular.module('app', [MyFormsModule, AngularMaterialModule]);
app.run(RunAddressAutocompleteConfig);
app.run(RunDynamicQueryConfig);
// Downgrade Angular AppComponent so AngularJS can render it after bootstrapping
// my app used an Angular component as the root
app.directive('appRoot', downgradeComponent({ component: AppComponent }));
// Downgrade Angular services
app.factory('api', downgradeInjectable(ApiService));
app.factory('dynamicQuery', downgradeInjectable(DynamicQueryService));
#NgModule({
declarations: [
AppComponent,
FormDirective,
FormPageComponent,
FormsListPageComponent,
RouterLinkPreserveQueryParamsDirective,
FormEmptyStatePageComponent,
],
imports: [BrowserModule, UpgradeModule, AppRoutingModule, HttpClientModule, CommonModule],
// This was absolutely necessary for bootstrapping my app in this way
// I encountered errors otherwise
providers: [
{
provide: '$scope',
useExisting: '$rootScope',
},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
entryComponents: [AppComponent],
})
export class AppModule implements DoBootstrap {
constructor(private readonly upgrade: UpgradeModule) {}
ngDoBootstrap(appRef: ApplicationRef) {
this.upgrade.bootstrap(document.body, [app.name], { strictDi: true });
appRef.bootstrap(AppComponent);
}
}
index.html
<body>
<app-root></app-root>
</body>
I am newbie to service worker concept so forgive me if I am overlooking something from documentation. I have an angular application already running in production and I am trying to introduce service worker using sw-precache.
To start with I am trying to precache all images/fonts and couple of js files and see if it works, so my precache config is like this -
{
"cacheId": "static-cache",
"importScripts": [
"sw-toolbox.js"
],
"stripPrefix": "dist/",
"verbose": true,
"staticFileGlobs": [
"dist/img/**.*",
"dist/javascripts/require.js",
"dist/stylesheets/**.*",
"dist/webfonts/**.{ttf, eot, woff}",
"sw-toolbox.js",
"service-worker.js"
]
}
Now I can see service worker registered and installed properly and cache storage shows all the urls with _sw-precache hashes.
But when I load the application and see in network tab all static content are still served from memory/disk, not from service worker and I am unable to debug why is it so. Am I missing something here -
UPDATE:
More information: I had wrong configurations since I have dynamic url and server side rendered html. Server side it's test.jsp which is giving me initial shell.
For now I have removed all other static files from cache and kept only show.css
So update config now is -
{
"importScripts": [
"sw-toolbox.js"
],
"stripPrefix": "dist/",
"verbose": true,
"staticFileGlobs": [
"dist/stylesheets/show.css"
],
"dynamicUrlToDependencies": {
"/developers": ["dist/stylesheets/show.css"]
},
"navigateFallback": "/developers"
}
Web root folder is named differently and it is -
- dashboard
-- img
-- javascripts
-- service-worker.js
-- sw-toolbox.js
- test.jsp
And I see /developers url as an entry in storage cache, but still it's not served from service worker for next refresh. I have tried all my energy to fix this, but I desperately need some clue here, what's missing in here. TIA.
Let me know if need more info.
It seems that whitespaces in your file extension list are not allowed. Your definition for webfonts should be:
"dist/webfonts/**.{ttf,eot,woff}",
I cloned the sw-precache repo and added a unit test where I compared two generated files with two diffrent staticFileGlobs, one with whitespace and one without.
it('should handle multiple file extensions', function(done) {
var config = {
logger: NOOP,
staticFileGlobs: [
'test/data/one/*.{txt,rmd}'
],
stripPrefix: 'test'
};
var configPrime = {
logger: NOOP,
staticFileGlobs: [
'test/data/one/*.{txt, rmd}'
],
};
generate(config, function(error, responseString) {
assert.ifError(error);
generate(configPrime, function(error, responseStringPrime) {
assert.ifError(error);
console.log('responseStringPrime',responseString);
assert.strictEqual(responseString, responseStringPrime);
done();
});
});
});
and it failed. The second config didn't include the .rmd file:
-var precacheConfig = [["/data/one/a.rmd","0cc175b9c0f1b6a831c399e269772661"],["/data/one/a.txt","933222b19ff3e7ea5f65517ea1f7d57e"],["/data/one/c.txt","fa1f726044eed39debea9998ab700388"]];
versus
+var precacheConfig = [["test/data/one/a.txt","933222b19ff3e7ea5f65517ea1f7d57e"],["test/data/one/c.txt","fa1f726044eed39debea9998ab700388"]];
From some time on I am getting
[Log] PositionError (mapController.js, line 141)
code: 2
message: ""
__proto__: PositionErrorPrototype
in Safari on OSX and iOS when I run my Leaflet.js based app and the example that it's based on.
When I started the project, this was not the case. It happens when I try to get the current location by calling
$cordovaGeolocation.getCurrentPosition().then(function (position) {
...
}
Any ideas? Is it reproducible?
Edit:
I figured it's returning PositionError.POSITION_UNAVAILABLE as defined in the specs.
I added options to the request { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true } hoping it would extend the timeout span to 5sec., but I keep getting the error immediately after request...
Safari 8.0.6 OSX 10.10.3 XCode 6.3.2
It works fine with Chrome, but I plan to deploy this on iOS & Android
test code:
describe('mysite', function(){
var init_url = 'http://localhost/mySite/#/home';
beforeEach(function(){
// driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.phantomjs()).build();
})
it('should click on toolbox and do stuff', function(){
browser.get(init_url);
browser.waitForAngular();
browser.getCurrentUrl().then(function(url){
console.log('current_url', url);
expect(init_url).toEqual(init_url);
})
expect(true).toBe(true);
browser.sleep(2000);
})
result 1st time run,
Using the selenium server at http://localhost:9515
data Zoom Pad
class active
mysite
should click on toolbox and do stuff
Finished in 3.94 seconds
1 test, 4 assertions, 0 failures
2nd time run, without any interruption, just up arrow and enter:
Stacktrace:
Error: Error while running testForAngular: Error Message => 'Detected a pag
e unload event; asynchronous script execution does not work across page loads.'
caused by Request => {"headers":{"Accept":"application/json; charset=utf-8","Co
nnection":"keep-alive","Content-Length":"689","Content-Type":"application/json;c
harset=UTF-8","Host":"localhost:9515"},"httpVersion":"1.1","method":"POST","post
":"{\"script\":\"return (function () {\\n var attempts = arguments[0];\\n var
callback = arguments[arguments.length - 1];\\n var check = function(n) {\\n
try {\\n if (window.angular && window.angular.resumeBootstrap) {\\n
callback([true, null]);\\n } else if (n < 1) {\\n if (window.angular
) {\\n callback([false, 'angular never provided resumeBootstrap']);\\n
} else {\\n callback([false, 'retries looking for angular exceed
third time
1) mysite should click on toolbox and do stuff
Message:
Error: ECONNREFUSED connect ECONNREFUSED
Stacktrace:
Error: ECONNREFUSED connect ECONNREFUSED
at ClientRequest.<anonymous> (K:\Users\Congwen\AppData\Roaming\npm\node_modu
les\protractor\node_modules\selenium-webdriver\http\index.js:127:16)
at ClientRequest.EventEmitter.emit (events.js:95:17)
at Socket.socketErrorListener (http.js:1547:9)
at Socket.EventEmitter.emit (events.js:95:17)
at net.js:441:14
and on third time the phantomjs webserver is down, and needs to be reconnected, and afterwards it goes back to result 1:
any clues?
config file used:
exports.config = {
seleniumAddress: 'http://localhost:9515',
specs: [
'./ptor-tests/mysite-test.js'
],
capabilities: {
browserName: 'phantomjs',
version: '',
platform: 'ANY'
},
//baseUrl: 'http://testapp.example.com/index.html',
rootElement: 'body',
allScriptsTimeout: 11000,
onPrepare: function () {},
jasmineNodeOpts: {
onComplete: function () {},
isVerbose: true,
showColors: true,
includeStackTrace: true,
defaultTimeoutInterval: 30000
}
};
also I noticed that sometimes there's no step 2 needed and it will go directly to ECONNECT error, and sometimes it gets stuck in step 2 for a number of tests and eventually will terminate phantomjs server.
This is an issue with Protractor that was resolved in version 0.17 and made better in 0.18.
It's a bug with a long tail, but the TL;DR is that Protractor's .get(url) function actually uses client-side JavaScript to make the location change; this is to ensure it properly bootstraps. An unfortunate side effect of that design is that for some reason, PhantomJS takes a few seconds to navigate over properly.
The bug was resolved by adding a longer timeout to the .get function.
Github Issue: https://github.com/angular/protractor/issues/85
Relevant changelog entries:
v0.18
(10aec0f) fix(pageload): increase wait timeout
The 300 ms wait caused problems when testing IE on Sauce Labs. It seems way too short. "browser.get()" invariably timed out. Increasing it solved our problem.
v0.17
(a0bd84b) fix(pageload): add a wait during protractor.get() to solve unload issues
Some systems would not wait for the browser unload event to finish before beginning the asynchronous script execution.
Closes #406. Closes #85.
I've run your test locally (with a different page, but otherwise the same code):
Happy testing!