convert angular-cli project to angular project? (with no cli) - angularjs

Is there a way I can turn my existing angular-cli into an angular project(with no cli)?
I want to do try something in my app, I get cros problem when i try to use form authentication even my server allow cors. so I don't want to use localhost 4200.

If you are using
Angular 1 : you can convert by adding all dependencies file paths in the index.html
Angular 2 : You should use transpiler(like babel ..) to convert your typescript code to javascript code and give those java script file paths in the index.html to work.(recommended to use angular-cli)
If you are facing CORS issue, for development workaround you can add CORS plugin to the chrome

Related

Monaco Editor - Web Workers cannot be loaded in production build

I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.

Angular2 (Typescript) with STS

How to make Angular2 code written in typescript run in spring-tool-suite?
I can run the Angular 2 code written in javascript in spring-tool-suite, but in case of typescript, I am facing a lot of problems in the form of:
1. NOT FOUND errors
I am attaching a screen shot for the error
The errors you are getting (404 on javascript files) points that the backend (web server) is not configured correctly.
Potential Fix
Give webpack a go so that you only need to load a single bundle.js instead of having to over configure a web server backend.

issue with running Angle - Bootstrap Admin app (angular-meteor version): TypeError: $browser.addPollFn is not a function angular-cookies.js:60

just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files

Cannot install gulp-angular

I am using gulp-angular for the first time, and am following this blog: http://www.angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/
When I run through the install questions, it just bombs out, on Karma.
I'm on ubuntu 14 in a Vagrant box, node v0.10.37, npm 2.7.5
Any pointers would be greatly appreciated.
fluent#vagrant-ubuntu-trusty-64:~/fluent/client$ yo gulp-angular myapp
.
.
? Which version of Angular do you want? 1.3.x (latest)
? Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after) angular-animate.js (enable animation features), angular-cookies.js (handle cookie management), angular-touch.js (for mobile development), angular-sanitize.js (to securely parse and manipulate HTML)
? Would you need jQuery or perhaps Zepto? None (Angular will use its own jqLite)
? Would you like to use a REST resource library? None, $http is enough!
? Would you like to use a router ? ngRoute, the official router
? Which UI framework do you want? Bootstrap, the most popular HTML, CSS, and JS framework
? How do you want to implements your Bootstrap components? Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
? Which JS preprocessor do you want? None, I like to code in standard JavaScript.
? Which html template engine would you want? None, I like to code in standard HTML.
Template processing error on file karma.conf.js
events.js:72
throw er; // Unhandled 'error' event
^
AssertionError: Trying to copy from a source that does not exist: /usr/lib/node_modules/generator-gulp-angular/app/templates/karma.conf.js
at EditionInterface.exports._copySingle (/usr/lib/node_modules/generator- gulp-angular/node_modules/yeoman-generator/node_modules/mem-fs- editor/actions/copy.js:44:3)
Some additional information, not really sure what to make of this, there is a _karma.conf.js file
myapp#vagrant-ubuntu-trusty-64:/usr/lib/node_modules/generator-gulp-angular/app/templates$ ls
_bower.json e2e gulp _.jshintrc _package.json src tslint.json
coffeelint.json _.gitignore _gulpfile.js _karma.conf.js protractor.conf.js _tsd.json
EDIT
I have had to use sudo for all npm commands. Is this normal?
EDIT 2
https://github.com/Swiip/generator-gulp-angular/issues/470
As per the github issue, deleting the reference to karma.conf.js from app/files.json did the job.
I guess there will be an official fix at some point.

Integrating youtube-direct-lite with angularjs app

I was unable to find any open source video recorder that can be integrated with an angularjs app. I came across Youtube-direct-lite but I have no idea how to integrate this with an angular app. I am trying to host my own instance of youtube-direct-lite
I have already configured the config.js as been told in this doc. Should I just copy paste all the js, css files to my project and use the index.html as a partial to display the recorder?
about configuring direct lite:
in config.js enter your developer-key and client-id.
then read the README file
download nodejs console
browse to the folder with the source in it
run this command : node r.js -o app.build.js
and it'll build the minified source for you, then copy and paste that source into your website and use the index.html & admin.html as the
and i'll work just fine.
about angular with direct lite:
I've seen so far only one implementation for it that is in youtube/dev/demos
http://www.youtube.com/yt/dev/demos.html#/upload
if you opened the sources, you'll find that it is uses angular, and it applies ytdirectlite, but I don't know how to use it and I still cannot find the opensource for it.

Resources