My friend developed a basic Registration page using Angular.js and bootstrap in Visual studio. He sent me the 'log' folder which contains all the dependencies and files related to the project.
I don't have visual studio and want to work on the project without the use of visual studio.
When I try to Open up the 'index.html' page, its showing everything except the registration form itself.
How do I run the page without using Visual Studio?
You don't need Visual studio to run an Angular app. It's all Javascript and you can run it locally. What I suspect is that your code requires a local server running. If I am correct, then your question is really, how do I get a localserver running?
It's been answered before here: How to create a localhost server to run an AngularJS project
Long and short, install node.
Then
Install: npm install -g http-server
Then
run http-server -o
Check console for errors. Check if angular and other files are loaded.
Related
i'm trying to create typescript app in Visual Studio 2022. I'm choosing "React standalone template" that uses typescript. After choosing it - console that install all the files needed appear.
After what i see empty project:
Empty Project
If i press on button "Show all files" i can see files related to Typescript project:
Hidden files
But when i try to include them to project - nothing happens though and they still look like hidden files (but i can see that files are added in csproj file). When i do "npm start" - project load localhost site correctly. Is there any way to include those files to see them in a correct way included to my project?
I tried resetting Visual studio settings, installed Typescript SDK Kit, reloaded project and VS, reloaded my PC, deleted project and created new one instead. Node.js and NPM are installed on my PC. What else can be the issue? I've found youtube video about Angular standalone template in VS and everything seems to be added to project by default, so i believe this is not expected behaviour that files are unloaded on my environment
I'm making a React application and I'm currently using Visual Studio to run the program and VSCode to edit the code.
When I used to save changes on VSCode, it automatically refreshed the browser with the changes I did. But recently it stopped working and now I have to make a manual reload (F5).
Here's what I've tried so far without success:
Updated both programs to their latest version.
Deleting the file and downloading it again from Gitlab.
In Visual Studio: Tools > Options > Environment > Documents cheked the boxes to detect changes outside enviroment.
Delete and generate again the .vs folder
Tried on a different browser
Tried making changes in Visual Studio
And so on ...
I tried with a similar app I built and that one was working fine and using the same properties.
There's currently two of us working on the project, but this issue only happens to me.
I recommend running the React from VSCode, using npm start / yarn start from command line in the directory.
Try changing something and see if the browser automatically reloads.
I inherited an AngularJs application that was built using WebStorm, NodeJs, Npm, Grunt etc.
The app is set up in such a way, that I have to run grunt serve to initialize a local server that hits the API and return data. If I simply run it as Localhost (through either WebStorm or VS), it does not pass validation to return my data through the API.
My question is; Is it possible to link grunt serve to IE in Visual Studio, in the same way you would run an application in Debugging (F5) mode?
I enjoy using Visual Studio, and like debugging and stepping through my code with IE, as this allows me to set breakpoints in my JavaScript and C#.
I would suggest that Grunt Launcher will help you:
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Although I did not manage to link "grunt serve" to IE in Visual Studio, I was able to debug using IE, by running my project in Debug mode (F5).
I simply copied the path with token created when running "grunt serve", and used this as my path in Local Host when debugging in Visual Studio. This way it connects to the API, and is validated.
I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)
First of all, I am very beginner in using node.js / angualar.js /protractor.js and jasmine.js stuff and I am not from web dev corner at all.
But for now, I just want to create some protractor test for an angular app and this is actually working quite fine. But I am wondering if it's possible to get VS2013 intellisense working?
I would really appreciate if VS would suggest functions of objects like 'browser.xxx'.
I am really stuck with that, looking forward for some hints!
thx Florian
Ill just give an answer to myself! To get Visual Studio 2013 intellisense and debugging working for angular protractor tests, follow these steps:
Install node.js
Install protractor (global) („npm install -g protractor“; „webdriver-manager update“)
Install Visual Studio 2013 node.js Tools
Install Visual Studio 2013 TypeScript Tools
Create a new project „Typescript\Node.js\Blank Node.js Console Application“
Add your „conf.ts“ and „spec.ts“ files to the project
Right click on „conf.ts“ and select „Set as node.js startup file“
In „Project properties“ set your „Node.exe path“ to your protractor executeable file, eg. „C:\Users\myUser\AppData\Roaming\npm\protractor.cmd“
Download typescript DefinitelyTyped definitions from git hub:
https://github.com/borisyankov/DefinitelyTyped
In your VS2013 project folder „Scripts\Typing“ create the subfolders „jasmine“, „protractor“ and „selenium-webdriver“
Add the typing definition files "angular-protractor\angular-protractor.d.ts", "jasmine\jasmine.d.ts" and "selenium-webdriver\selenium-webdriver.d.ts" into the appropriate project folders you created in the step above.
Write your protractor test and enjoy code highlighting
Start webdriver-manger „webdriver-manager start“
Hit „F5“ to start debugging
Enjoy!
Florian