The angular material dialog is not working in production build - angular-material

I am using angular 10 and angular material 10.
the angular material dialogue is not working in the production build (ng serve --prod and ng build --prod) but It is working fine local dev environment (ng serve)
I have already added the component in the entryComponents and bootstrap
It is not throwing any kind of error in the console. what I can see is the card is loaded and no components inside the dialog are available,
You can see the below screenshot, which is loading the card but not any component inside it.

After a lot of research I found, the problem is with the IVY engine. For some people changing the below can solve the problem.
tsconfig.json
"angularCompilerOptions": {
"enableIvy": true
},
If you want to use the Ivy engine. the problem will be resolved if you update the Angular 10 project to Angular 11.

Related

Vaadin / load reactjs build

We develop a reactjs application which works fine, but one of our customer wants to load this application inside their vaadin environment.
I thought sending them the reactjs build will be enough but for some reason they cannot load it : they use vaadin 14 and try to load the build script via #JsModule annotation and put a vaadin div component with the correct id (in order for reactjs to bootstrap it) but they say they hava this error :
Uncaught Error: Minified React error #200; visit
https://reactjs.org/docs/error-decoder.html?invariant=200 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings
I dont know what's is going on here.
Thanks
If you follow that link, you'll see that the full error message is:
Target container is not a DOM element.
It seems likely that when the script ran, the target Div did not exist yet. Using #JsModule means that the Vaadin application will include that module into its Javascript build, and run it as soon as the Vaadin application bootstraps in the browser. At that point in time there isn't anything related to the Vaadin application in the DOM yet.
One thing you could try is to change your script to expose a function (for example using a window global) to render the React application into the Div, rather than have the script render the React application immediately when the script runs. On the Vaadin side, your customer could then call that function as soon as the target Div has been added to the DOM, for example using executeJs in the components onAttach method.

Meteor 1.6.1.1 - searching for WYSIWYG

I am searching for an WYSIWYG editor for my Meteor project.
It's Meteor version 1.6.1.1 with Angular 5.
I have already tried [Froala][1].
Which was working fine local, but after creating a Docker container it showed multiple errors (https://github.com/froala/meteor-froala/issues/27).
So I am looking for either fixing this problem, or another simple/lightweight WYSIWYG editor working with Meteor 1.6.1.1 and Angular 5.
Thank you ;)
I will suggest The CKEditor - https://ckeditor.com. I recommend version 4, since I worked with it and I can say that it works very well with Meteor. Put the code (CK Editor library) in the public folder of your project, after that you can simply use it everywhere. It has a download page (https://ckeditor.com/ckeditor-4/download) were you can built your editor, add everything that you need and remove the things that you don't need, so it's pretty nice to use it.
Initializing it is that simple:
HTML: <textarea id="ck_editor" rows="5">
JS: CKEDITOR.replace('ck_editor');
To get the text content:
CKEDITOR.instances.ck_editor.getData()
P.S.: I worked with this editor in Meteor 1.5 and I haven't tested it with 1.6, but it should work in the same way. Also I deployed the project on a docker container, without any problems.
I would suggest TinyMCE.
I would recommend self-hosted and you can install it via NPM:
npm install tinymce
Once you have required the packages see the docs

What is the path context for vaadin application

i have prepared my ever first vaadin application by installing plugin and created vaadin project.
After build success and deployed to wildFly when try to run the application using below
localhost:port/myapp/ and localhost:port//myapp/MyUIServlet also did not work
Proj ENV details:
Servlet API 3.0
Vaadin 7.7.13
i am very new to vaadin framework, can some one please help me..?
i got solution to this,
it works with http:localhost/myapp/VAADIN
i can see sample vaadin application page.

Add Angular App to Existing MVC Project

I have an MVC project in an Area of a larger solution. I would like to add an Angular App inside that area and add it to my MVC project. This is not a .Net Core Mvc project. How would i tell my project to use webpackdevmiddleware? I.E.
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions{
HotModuleReplacement = true
});
Since i would be adding the Mvc app in an area and my folder structure looks like so.
Where should i run my ng new command?
IE
C:\Project\Areas\Mvc ng new AngularApp
or
how do i set the directory so that the app is created in my MVC folder?
would it be easier to just create an angular .net core app instead? Inside the areas folder?
If anyone is trying to figure out how to do this i found a guide that works HERE.
This particular example uses a gulp task to pull in the necessary node_modules and transpile your app into javascript. I am on the lookout at the moment for an example that does the same thing using webpack. Essentially you add a tsconfig.json, a package.json, a gulpfile.js, and then a tsconfig.js as well as your app files in typescript. This does not use the angular cli at all.

iOS Phonegap Infinite Dialog error when running application?

I'm having an issue developing a phonegap app for iOS. I just copied all the html / css / javascript markup into a phonegap application. I'm using xcode3 on a Mac with 10.6.8
When I go to run the application, I get these dialogs once it loads and install:
gap:["Network Status","getConnectionInfo","Network Status0",true]
usePolling: gap_callbackServer
getPort: gap_callbackServer:
getToken: gap_callbackServer:
Then is stays forever at gap_poll:
While I'm getting these dialogs, I can see the app's home screen all loaded in the background.
This application was successfully built, deployed and is currently on the App Marketplace for Android, never had problems like this developing for it.
What could be causing this?
More than likely you are using the Android version of phonegap.js. Each platform has it's own phonegap.js so you have to make sure you are using the right one. I know it is confusing but we are working on it.
Just change the script tag from:
<script type="text/javascript" src="cordova.2.0.0.js"></script>
to:
<script type="text/javascript" src="phonegap.js"></script>
Another solution that I found was to just use "phonegap.js" (and I don't even have that file included) and when I added my .zip file to build it seemed to automatically add the correct version for me. I noticed the phonegap getting started app didn't include an version of the .js file and that gave me the idea.
Main reason is for using the cordova.js which mainly for Android. I've searched the cordova-1.8.1.js for iOS, bad-luck for me.
And finally I create phonegap-1.8.1 project for iOS from terminal then tried to create another project with phonegap-2.1.0 from template and found the cordova-2.1.0.js. This JS then used for phonegap-1.8.1 project ...
I've got my success, now my application is running successfully on iOS 6(new version iPAD)

Resources