When I upgraded my Angular app from 11 to 12, I encountered the following issues:
The development section of file angular.json disappeared
Visual Studio Code breakpoints would no longer be hit
Production warning from ng serve
How can I fix this?
Here is what happened: the Angular website has an upgrade helper that assists developers with determining the given upgrade steps for their combination of versions and libraries. It's missing a step. It’s rather simple what happened:
Visual Studio Code is unable to debug with breakpoints, because the upgrade forced my app into a production-only configuration. The upgrade scripts removed my development section from my angular.json file.
Run the following to complete the missed step:
ng update #angular/cli --migrate-only --from=11.2.0
Related
I made a new project in asp.netcore version 3.1 and react in visual studio. I get the following when I run the project:
I tried to delete node_modules and ran npm install, but it did not work. I have also tried to clone my friends github repo (which works on his computer) to mine computer to check if it is possible to run, but it does not work. Hoping for an answer as soon as possible.
I have done several projects in aspnet core and jquery. But it does not work to run a project in react, why do I get this error?
tldr; How do I configure my CRA project so that the yarn start yields a build compatible with an older browser?
Not sure what I'm doing wrong, but I'm essentially using TypeScript with CRA, and would like to run the development version on an older Chrome. To be precise, it's Chrome 53 running on a Smart TV. As I'm developing an app to run on a TV, and would like to test on the one I have available, running the a build compatible with that TV is crucial.
When I run the current development version on the TV, the browser complains about a syntax error. Probably because of the advanced JS features contained in the build (arrow functions, const, ...).
So the first thing I did was to update tsconfig.json to target es3 instead of what it currently sits at: es5. I was not expecting this to make a difference as ES5 should clearly run well on Chrome 53.
Then, I tried customising the browserlist in package.json to include that version of Chrome, or even copying the production setting to the development ones, but to no avail. When I inspect the JavaScript generated on my desktop, it still contains ES6 features.
Clearly, I'm very unfamiliar as to how TypeScript and CRA (hear Babel) work together. I tried to inspect CRA's source code, and to eject the application to explain my attempts do not work, but I'm lost.
(Noting that the project was created from the CRA's TypeScript template a few days ago, so it's really up to date.)
Well, it turns out that the problem is easier than it appeared. The NPM cache needs to be cleared after modifying package.json. I'll admit that I did not notice the mention of this in the documentation.
When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.
Supported browsers
I am currently pretty lost where to start searching for the error that I am facing. The same AngularJS project that my colleagues have been working on for quite a while on Macs cannot be compiled correctly on my Windows machine. No idea if windows and mac has anything to do with the error but just in case I am adding this information.
I've checked out the project with SourceTree and opend it with WebStorm.
First npm install then gulp dev in the terminal of WebStorm and my angularJs-project is beeing compiled without any errors. When then the browser windows with //localhost is beeing opened, the page shows shortly the loading anymation and then stays blank.
In the attached screenshot you can see the output of the console. Any ideas?
AngularJS Version: 1.7.2
NPM Version: 5.6.0
Gulp:
CLI version 3.9.1
Local version 3.9.1
What could make the difference that the project is running perfectly on other machines but not on mine?
[Edit]:
I have now reanimated my old macbook, checked out the exact same project with source tree, installed webstorm, ran npm install, then doing this to set up gulp and then running gulp dev: The App runs just fine.
On my Windows Laptop I've started all over, deinstalled WebStorm, deinstalled node.js and did the whole set up as described above. Only difference that I need to install node.js manually on Windows to use npm.... same error as described before.
I have an Angular 1.4 application written using Typescript, making use of various typings e.g. angular-ui-bootstrap, angular-block-ui.
This application builds on my local machine.
However, when using a TFS build controller I receive numerous errors with messages along the lines of "Duplciate identifier 'angular'".
Now obviously each typings file will declare a namespace e.g. "angular.sanitize". The error will occur if the angular namespace has already been declared in another typings file.
I do not really understand why the errors do not occur on my development machine but do on the build server. I am using TFS 2010 for source control.
I have figured this out.
The build server had a different version of Typescript installed. Once I made this the same as my development machine all issues went away and my build worked.
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