I've got rc7 installed and my module and component works.
However I want to use it on a webpage and make my modules and components only bootstrap if the current page has the selector to be bootstrapped with.
I am using one module and declare my components. But I can't bootstrap at least one. As far as I understand I should be fine using one module for the whole website and dynamically bootstrapping components if the page has the element that needs the components bootstrapped.
Currently I get errors if I don't boostrap anything in my module and I also get errors if I bootstrap a component and the selector doesn't exist on the page. Is there a way of avoiding these errors? Or am I using wrong stuff? Should I be using something else for this purpose instead of modules and components?
You need to check yourself (document.querySelector(...)) if the page contains a matching selector before you call platformBrowserDynamic().bootstrapModule(AppModule);
Related
We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
Is it possible to integrate Angular js directive inside Angular 7 component at the runtime. The Angular js is a separate project module with its own folder stucture.This folder structure includes directives as well. Can these angular js directives be imported into Angular 7 application by providing the directive's file path and used in Angular 7 component template. Kindly suggest if there is a way to do this.
This is NOT recommended. The architectures and life cycles of both are very different and you are just increasing the chances of errors, time and effort by doing so.
To answer your question: Yes, there is a way to do it as you can manipulate the DOM using any JS lib/framework and by using your ng7's #ViewChild/templateRefs to gain control of the element, but you will face issues while updating data to/from Angular7.
I'd highly suggest you make a new ng2+ component and import the code from your old project and work on it to make it into an Angular2+ component.
I'm adapting one angular 1 project to use the webpack module bundle system. Almost everything is working as expected, but one material component doesnt get applied well. It is the md-input-container.
What I think it is the cause of the problem: I'm using ng-cache-loader to load the html templates. So, I think, in someway the tags are not processed or so. Because I put the md-input-container in the main index.html (which is not loaded by ng-cache-loader) and it works.
Also, I'm using lazy loading of modules and states with ocLazyLoad and ui-router-extras future state, maybe this has something to do with the problem...
At first I thought it was only css problems, but I have confirmed its not.
(Posted on behalf of the OP).
This weird fix solved the problem.
I am facing a unique scenario, when an experience is set up on a component using Target, the page breaks. Issue is because the components for which an experience has been set up is loaded through ajax using AEM's internal javascript libraries. AS the angular app is already instantiated the dynamically injected components are not compiled and all the angularJS syntax shows up on the page when it breaks. Angular Bootsrapping is also not possible as the dom is injected by AEM's internal javscript, not sure when to call bootstrap method.
Please let me know how to resolve this issue if anyone has faced it before.
I don't have experience with Angular apps, but I can tell you that the use-case you are describing it's not supported with AEM (others have complained). The main problem is the one that you described - the Target client-library (mbox.js) loads the content asynchronously (using mboxUpdate() ) calls.
However, I don't know if this is necessarily an AEM issue - are you able to use targeted content with mbox.js and Angular without AEM?
What version of AEM are you using?
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.