In our instructions we have put together nine tips & tricks which are guaranteed to make web development easier for Angular beginners and professionals.

Overview

  • Tip 1: stylelint for validating SASS and CSS code
  • Tip 2: Prettier for prettier formatting
  • Tip 3: strict for a stricter validation of the source code
  • Tip 4: Configure proxies more easily with Angular
  • Tip 5: define central colors
  • Tip 6: work around problems with Internet Explorer
  • Tip 7: Simply install recommended plugins in Visual Studio Code
  • Tip 8: Apply changes to the Chrome Developer Tool
  • Tip 9: Firebase for easy hosting

Let’s get started!

Before starting, you first install an Angular 10 project with the corresponding standard configurations via Angular CLI. Angular CLI provides us with a webpack server for web development – the result can then be deployed on different servers.

Tip 1: stylelint for validating SASS and CSS code

In the standard configuration of Angular you will find the linting tool tslint.json for validating the TypeScript code – but there is no corresponding counterpart for SASS or CSS. In order to be able to line and validate SASS and CSS code, you install all the necessary npm modules of the linter stylelint: npm i -D stylelint stylelint-config-recommended-scss stylelint-scss stylelint-prettier

In the next step you create a .stylelintrc file in your project. With the command you stylelint-config-recommended-scss take over the standard configurations of SASS. stylelint-scss The purpose is that not only CSS, but also SASS code can be validated, stylelint-prettier the formatting is used – more on this in the next tip.

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": [
    "stylelint-scss",
    "stylelint-prettier"
  ],
  "rules": {
    "prettier/prettier": true,
    "no-empty-source": null,
    "selector-pseudo-element-no-unknown": [ true, {
      ignorePseudoElements: ["host","host-context","ng-deep"],
    }]
  }
}

Tip 2: Prettier for prettier formatting

Prettier is a popular formatting tool that ensures a uniform code format. Be it TypeScript, SASS or HTML code – Prettier takes care of the entire formatting of your project. You add the tool to the project via npm Install: npm i -D prettier You also create a .prettierrc file – the individual variables can be adjusted depending on the project requirements. “singleQuote“: true means, for example, that single quotes rather than double quotes can be used in the project.

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}

Now you have to define Prettier as your standard formatting tool in tslint.json. The corresponding npm Install command reads: npm i -D tslint-config-prettier You repeat the same in .stylelintrc: npm i -D stylint-prettier The previous formatting settings are now overwritten and Prettier is noted as the tool of choice.

Tip 3: strict for a stricter validation of the source code

In your Angular project you have the option of expanding the standard TypeScript configuration with strict and thus validating your source code more strictly.

{  
  "compileOnSave": false,  
  "compilerOptions": {  
   "baseUrl": "./",  
   "outDir": "./dist/out-tsc",  
   "sourceMap": true,  
   "declaration": false,  
   "downlevelIteration": true,  
   "experimentalDecorators": true,  
   "module": "esnext",  
   "moduleResolution": "node",  
   "importHelpers": true,  
   "target": "es2015",  
   "strict": true, 
   "noImplicitAny": true,  
   "noImplicitThis": true,  
   "alwaysStrict": true,  
   "strictBindCallApply": true,  
   "strictNullChecks": true,  
   "strictFunctionTypes": true,  
   "strictPropertyInitialization": true,  
   "incremental": true,
   "typeRoots": [  
    "node_modules/@types"  
   ],  
   "lib": [  
    "es2018",  
    "dom"  
   ]  
  },  
  "angularCompilerOptions": {  
   "fullTemplateTypeCheck": true,  
   "strictInjectionParameters": true  
  }  
 }

noImplicitAny means that the properties and parameters used must be explicitly assigned a data type. strictNullChecks requires a test close to zero. Finally, incremental it ensures that the TypeScript project is built incrementally.

The strict points listed below are a more detailed description of the short code. For existing projects, it is advisable to activate each property individually – this can reduce the number of compilation errors.

strict(of rules) stringently enforcedMore (Definitions, Synonyms, Translation)

Tip 4: Configure proxies more easily with Angular

Angular offers the option to configure a proxy, which makes it a lot easier for you to make requests against your backend. In our example, we have executed a http.getrequest in our app.component.ts that /api/statusgoes against:

@Component({
       selector: 'app-root',
       templateUrl : './app.component.html' ,
       styleUrls: ['./app.component.scss']
   })
   export class AppComponent implements OnInit {
       public status$: Observable<string> | null = null;
       constructor(private http: HttpClient) {}
 
       public ngOnInit(): void {
           this.status$ = this.http.get<string('/api/status').pipe(       
               map((json: any) => json.status),
               catchError(() => of('error'))
           );
       }
   }

To assign a proxy to the server, we create the proxy.conf.json file. All inquiries that /api go against will be forwarded to our express server on port 3000 in the future:

{  
 "/api": {  
  "target": "http://127.0.0.1:3000",  
  "secure": false,  
  "changeOrigin": true,  
  "logLevel": "debug"  
 }  
}

Finally we just have to record in angular.json where the proxy file can be found:

"serve": {  
      "builder": "@angular-devkit/build-angular:dev-server",  
      "options": {  
       "browserTarget": "project:build",  
       "proxyConfig": "src/proxy.conf.json"
      },  
      "configurations": {  
       "production": {  
        "browserTarget": "project:build:production"  
       },  
       "es5": {  
        "browserTarget": "project:build:es5"  
       }  
      }  
     },  
     "extract-i18n": {  
      "builder": "@angular-devkit/build-angular:extract-i18n",  
      "options": {  
       "browserTarget": "project:build"  
      }  
     },

Tip 5: define central colors

In projects, it is often necessary to determine central colors, for example to implement a customer’s UI. In our color.scss we have defined the colors red and green:

$color-green: green;  
$color-red: red;

To use these in our app.component.scss, we import them with @import:

The problem here is: If you want to use the colors in different places and in different components, the path has to be adjusted again and again, depending on which level you are on. This additional work can be avoided by creating alias paths in your angular.json. Here we have stored a stylePreprocessorOptions accordingly and integrated our theme:

"styles": [  
        "src/styles.scss"  
       ],  
       "stylePreprocessorOptions": {  
        "includePaths": ["node_modules", "src/theme"]  
       },  
       "scripts": []  
      },  
      "configurations": {  
       "production": {  
        "fileReplacements": [  
         {  
          "replace": "src/environments/environment.ts",  
          "with": "src/environments/environment.prod.ts"

This makes it possible to simply import the colors using ./colors, regardless of the directory depth you are currently working in.

@import '../theme/colors';  
 .success {  
  color: $color-green;  
 }  
 .error {  
  color: $color-red;  
 }

Tip 6: work around problems with Internet Explorer

Perhaps you know the problem: Since the introduction of differential loading in Angular 10, Internet Explorer 11 has only displayed a blank page on ng serve. The reason for this is that the target in tsconfig.json has been adapted to version es2015, with which Internet Explorer simply cannot do anything.

{  
  "compileOnSave": false,  
  "compilerOptions": {  
   "baseUrl": "./",  
   "outDir": "./dist/out-tsc",  
   "noImplicitAny": true,  
   "noImplicitReturns": true,  
   "noImplicitThis": true,  
   "noFallthroughCasesInSwitch": true,  
   "strictNullChecks": true,  
   "sourceMap": true,  
   "declaration": false,  
   "downlevelIteration": true,  
   "experimentalDecorators": true,  
   "module": "esnext",  
   "moduleResolution": "node",  
   "importHelpers": true,  
   "target": "es2015",
   "typeRoots": [  
    "node_modules/@types"  
   ],  
   "lib": [  
    "es2018",  
    "dom"  
   ],

You can work around this problem as follows: You create a tsconfig.es5.json and set your target back to es5. The command ./tsconfig.app.json is inherited from your TypeScript configuration.

{  
  "extends": "./tsconfig.app.json",  
  "compilerOptions": {  
   "target": "es5"  
  }  
 }

Now you have to change the call accordingly in package.json – here we recommend running the server that compiles with es5 on a different port.

{  
 "name": "project",  
 "version": "0.0.0",  
 "scripts": {  
  " ng " : " ng " ,  
  "start": "npm run develop",  
  "develop": "ng serve",  
  "develop:es5": "ng serve --port=4210 --configuration es5",  
  "build": "ng build",  
  "test": "ng test",  
  "lint": "ng lint",  
  "e2e": "ng e2e"  
 },  
}

This port needs the configuration es5, which you define in angular.json as follows:

"es5": {"tsConfig": "./tsconfig.es5.json"}  
      }  
     },  
     "serve": {  
      "builder": "@angular-devkit/build-angular:dev-server",  
      "options": {  
       "browserTarget": "project:build",  
       "proxyConfig": "src/proxy.conf.json"  
      },  
      "configurations": {  
       "production": {  
        "browserTarget": "project:build:production"  
       },  
       "es5": {"browserTarget": "project:build:es5"}  
      }  
     },

After you have carried out all the steps, two different servers are noted for your website: One for es2015 and one for es5 – Internet Explorer can work with the latter version and the website is displayed correctly in the browser.

Visual Studio Code is the code editor of choice for most web developers. You can define the configuration for your project in the .vscode folder. This includes, on the one hand, the settings.json file, which contains all configurations that work across projects on each individual project computer. For .formatOnSave example, you could use to specify that formatting takes place automatically when saving, in our case by Prettier.

Prettierpleasing by delicacy or grace; not imposingMore (Definitions, Synonyms, Translation)

Visual Studio Code Angular Plugin
{  
 "editor.tabSize": 2,  
 "editor.wordWrapColumn": 120,  
 "editor.formatOnSave": true,  
 "editor.minimap.enabled": false  
}

Another possibility is to share the recommended Visual Studio Code plugins within the team via extensions.json. Here you can see a recommendations array with the different IDs for the plugins.

{  
 "recommendations": [  
  " angular.ng-template " ,  
  "ms-vscode.vscode-typescript-tslint-plugin",  
  "esbenp.prettier-vscode",  
  "ms-vsliveshare.vsliveshare",  
  "ms-vsliveshare.vsliveshare-audio",  
  " quicktype.quicktype " ,  
  "glen-84.sass-lint",  
  "shinnn.stylelint",  
  "ms-vscode.vscode-typescript-next"  
 ]  
}

Instead of copying every line for the installation, you can switch to the extensions and display all recommended plugins for the project there. This works either via the @recommended command or via “Show Recommended Extensions” in the selection list.

The extensions can be installed by clicking on the corresponding button and shared within your team.

Tip 8: Apply changes to the Chrome Developer Tool

Changes that you make within the Chrome Developer Tools can be transferred directly to your local project. To do this, simply add the project via Sources è Filesystem è + Add folder to workspace.

Chrome Developer Tool

In our example we select “success” and the code is displayed accordingly. The Chrome Developer Tool detects a bug with the color – if we fix it in Elements, the changes are only temporary.

Chrome Developer Tool

If we make the changes in Sources again, they remain permanent and are adopted in the local project.

Chrome Developer Tool

Tip 9: Firebase for easy hosting

For example, if you want to make your local Angular app available to a customer, you can use the hosting provider Firebase Registration for this is free of charge.

In Visual Studio Code it is possible to add the Firebase component to your Angular project in the terminal with the following command: project$ ng add @angular/fire This installs the firebaserc file or the firebase.json, for example.

Firebase

You will also be asked which project you would like to update as part of Firebase. project$ ng deploy Use the command in the command line to deploy your entire application to Firebase. At the end of the command line, you will see a URL that you can use to view the hosted website.

Firebase also offers authentication and database options as well as file storage for larger files.

Contact us to learn more about our angular development services and how we can help you achieve your business and technology goals.

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like