Posts

Showing posts with the label Angular Cli

Angular Cli Exclude Files/directory For `ng Test --code-coverage`

Answer : With the latest CLI, inside angular.json "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "./karma.conf.js", "codeCoverageExclude": ["src/testing/**/*"], Updated September 2019 With Angular CLI 6, angular-cli.json has been renamed to angular.json which contains the configuration. In angular.json , codeCoverage expects a boolean value, which sets whether code-coverage should be done with every test run or not. To exclude files from code coverage, there is a property codeCoverageExclude which accepts an array of files to be excluded from code coverage. angular.json "test": { "codeCoverageExclude": ...

Angular 7 & Stripe Error TS2304: Cannot Find Name 'Stripe'

Answer : The issue is resolved by including a reference to the @types/stripe-v3 package in the compilerOptions.types array of your tsconfig.app.json file in the src directory of your Angular project. { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [ "stripe-v3" ] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } This solution was posted by bjornharvold in this thread. Angular imports types based on values of compilerOptions.types and compilerOptions.typeRoots from the typescript configuration file. TS compilerOptions docs reference By default Angular projects created using angular cli will have two typescript configuration files. tsconfig.json in the root of the project tsconfig.app.json in /src directory If both types and typeRoots are undefined angular will import all the typings from...

Angular-cli : Using Ng Lint

Answer : Updated answer for Angular CLI v6.x, 7.x, 8.x : ng lint <project-name> --fix where <project-name> is "name:" from package.json -- answer for Angular CLI v1.x -- ng lint -fix -- Original answer below -- To have tslint autofix many errors run the following in the root of your code. Obviously it can only autofix simpler issues like let -> const, "" -> ' etc. npx tslint src/**/*.ts --fix Yesterday I did this to auto-fix hundreds of let -> const issues in our fairly large code bases. Just reviewing the changes before committing took long enough, manually fixing them all would have taken over a day. For Angular 6.0+ you can run ng lint with autofix like so: ng lint <project> --fix where <project> is the name you gave to your project when running ng new . Learn more here: https://github.com/angular/angular-cli/wiki/lint The functionality you are asking about is partially available these days in VS...

Cache Busting Index.html In A .Net Core Angular 5 Website

Answer : Here's what I ended up with after combining a bunch of answers. My goal was to never cache index.html. While I was in there, and since Angular nicely cache-busts the js and css files, I had it cache all other assets for a year. Just make sure you're using a cache-busting mechanism for assets, like images, that you're managing outside of Angular. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // ... app.UseStaticFiles(); if (env.IsDevelopment()) { // no caching app.UseSpaStaticFiles(); } else { app.UseSpaStaticFiles(new StaticFileOptions { OnPrepareResponse = context => { context.Context.Response.Headers.Add("Cache-Control", "max-age=31536000"); context.Context.Response.Headers.Add("Expires", "31536000"); } }); } // ... app.UseSpa(spa => { spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions ...

Cannot Find Module 'glob'

Answer : There's already an issue reporting this error message. The workaround until the next release is to install glob for the project ( npm install --save glob ) Regarding the commands, according to their repository under Generating and serving an Angular2 project via a development server the commands are as follow ng new ponyracer : This command will create a project named ponyracer (a folder named ponyracer with all the set up in it). ng serve : This command will run the live reload server to serve the application so you can see it in your browser. PS : If you test the solution suggested in the issue it would be nice of you to report if it worked or not. PS2 : I tested now (I fixed my error) and I cannot reproduce your error. I'm using node v5.5.0 and npm v3.7.3. Can you specify which node and npm versions are you using? I had the same error on Windows 10, D:\Code\AngularJS>ng new greetings-ac Cannot find module 'glob' Error: Cannot find m...

Angular Cli - How To Disable Auto Reload When Ng Serve

Answer : Just do ng serve --live-reload false or ng serve --no-live-reload It used to not work, this PR solved it. serve your application with this command: ng serve --live-reload=false if you want to run your application in prod mode , use following command ng serve --source-map=false --aot --prod --live-reload=false I think you only want to disable the rebuild on change option Just try: $ ng serve --watch=true|false

Angular CLI Ng Command Not Found On Mac Os

Image
Answer : After days of googling and getting no help neither on here nor from @Angular github which is pretty much useless, was finally able to resolve the issue and get my angular ng command not found issue resolved following these steps: 1. Instal nvm Issue these 3 commands to install nvm. (Angular documented steps https://angular.io/guide/setup-local to setup your environment did not work for me). So I installed nvm like so: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash export NVM_DIR="/Users/your-user-name/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" After this, make sure you restart terminal and you should be able to issue nvm --version to see version of installed nvm. 2. Install node using nvm nvm install stable nvm install node 3. Finally, install angular npm install -g @angular/cli 4. Restart terminal Restart terminal and you should be able to use ng version to s...

Angular 4 CLI Too Slow After Ng Serve And When Updating

Answer : i solved my problem. What happened is that our components and other resources are all imported in app.module.ts . Because of this, the page loads all the resources every time the page loads. My solution was to apply Lazy Loading to load only those resources that are specific to the routes that i am accessing and it did fix up the loading issue. You have this problem is because your dev PC have not enough memory to handle the build as nodejs is consuming a lot of memory when you run expensive npm tasks. And the bigger your project the more memory is required to complete the task. The problem can get even worse if you want to run ng serve + ng t + ng whatewer at the same time. Check the Task manager -> Perfomrmance tab then run ng serve and you will see what I am talking about. I had struggled by the same problem until I put another 8gb RAM in my dev PC. So yes it is normal.