I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
Related
I would like to know if there is a way to take the build files from an angular app and add it as part of another angular dist folder and launch that app inside a div in the parent app.
Basically the micro frontend architecture.
I have looking at options like using window object and customising the main.ts or the index.html, but none of them seem to help.
Does this other HTML page have angular included if so you can simply use the ng-include directive.
If not your best bet is iframe which is suboptimal
I have a module in angular 5 which is embedded in an application written in ext-js.
The application provides the flexibility to navigate between different modules. When the angular application is loaded for the first time, it works fine but when I navigate to angular again, I get the Zone already loaded error.
I have already tried the following things:
removed zone.js from script tag in the index.html file.
tried removing CommonChunksPlugin webpackJsonp conflict.(i used ng eject to get the webpack.config.js file and added custom output.jsonpFunction function.But the angular part of the application fails to load after that)
I am not comfortable with changing the build process(approach 2) at this stage as the application is very close to production.
Is there any other way I can fix this issue and what is the real cause of this issue?
I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.
AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.
There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.
I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.
Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.
Here is an example of my problem:
Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.
If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.
The documentation explains how to use autocomplete:
https://material.angular.io/components/autocomplete/overview
There is also a working example of the component:
https://stackblitz.com/angular/ggmpnaqqqxk
In the documentation it shows that you can use the component like this:
<mat-autocomplete>
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.
They can't just use the <mat-autocomplete> component in an existing HTML page.
Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.
It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.
There is even a working example:
https://codepen.io/anon/pen/goLrpJ
It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.
How do I create an Angular 5 application that can be used as a component library with existing HTML?
Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.
Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.
Please forgive me for my little knowledge about this, but I have just started using Ionic to develop a hybrid app. Ideally i wanted to use my own javascript and so far it doesn't seem to work. Is this a conflict with Angular? I want my own external JS file so I can handle what happens with inputs and don't want to use Angular. Any info would be appreciated.
As to what doesn't work, i'm trying to use innerHTML to replace a value on page load and it seems to load in before the DOM so I get an error in the console. Tried moving the placement of the external js file reference but still doesn't work.
You probably should not be using innerHTML. Angular has this built in using data-binding:
<div>{{aVariableTiedTo$Scope}}</div>
Where aVariableTiedTo$Scope is a property defined in your controller on your $scope object.
Trying to write first angular app using node.js, express, and jade. So I know it must be something very simple but I have been stuck for a while.
I included angular js ( route using the CDN in the head section of the jade(html) template.
As indicated bellow:
link(href='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js')
link(href='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js')
I also tried switching from the angular.js in the CDN to a plain include in my own server, without any positive results to my problem.
I use the directive ng-app='myApp' in the html tag of the template (also tried in the body tag after the head includes).
I also include myApp in the head section of the jade (or html) template using:
script(src='/webapp/js/myApp.js')
The code in myApp.js looks like this:
var myApp=angular.module('myApp', [
'ngRoute'
]).config(['$routeProvider', function($routeProvider) {
...
}]);
I keep getting the console error:
ReferenceError: Can't find variable: angular
globalcode - myApp.js:2
The error means that angular isn't loaded, it doesn't know what angular is.
When learning a new technology stack you should approach each piece individually. You can learn the basics of Angular using plnkr.co as the basis for testing those bits of code quickly and easily here's a very simple plnkr to get you started:
http://plnkr.co/edit/WU6y8ka0udXHzZvCeZPc
You can use the find external libraries button on the right side to add in commonly used libraries.
Once you understand how to work with Angular by itself in isolation you can scratch that off the list of possible problems.
Angular needs to be loaded before your script that references angular is loaded so the next step would be using the debug panel (F12) to see the network calls and figure out why angular isn't being loaded.
To test your back-end manually you can use the POSTMan chrome plugin (or curl if you're into that) to test out the server side response to various requests in isolation from the angular code.