Angular on Time Friend

Angular Path Alias Configuration

Thu, 27 Dec 2018 22:17:36 +0000

Angular CLI has webpack built-in, so path aliases can be configured. The configuration method is almost the same.

Configure Path Alias

Find the tsconfig.json file in your project root directory.

Note: If your configuration doesn’t take effect, check if your baseUrl is configured correctly.

{
 "compilerOptions": {
 "baseUrl": "./src/", 
 "paths": {
 "@app/*": ["app/*"],
 "@services/*": ["app/services/*"]
 }
 }
}

Before Configuration

import { Api } from '../../../../../services/api.service';
import { xxx } from '../../../../../services/api.xxx';

After Configuration

import { Api } from '@services/api.service';
import { xxx } from '@services/api.xxx';

Some development tips, hope this helps you.

Recommended: An Angular Electron Project Template Ready to Use

Thu, 20 Dec 2018 19:02:36 +0000

The official Angular website does provide an official Angular template for Electron. But the version is 2.0, which is really too old. I doubt anyone will maintain it anymore. Yet it’s still listed on the official site. This misleads many beginners — at least it made me think there wasn’t a newer, usable Electron template for quickly creating projects.

Angular-electron

Here I recommend a highly complete template that’s ready to use out of the box:

Angular 7 + Electron Main Process and Renderer Process Communication

Wed, 19 Dec 2018 19:02:36 +0000

Process Types in Electron

In Electron, there are two types of processes: the main process and the renderer process.

The renderer process can be understood as the view layer — the process that displays pages, which we’re very familiar with. Here you can use Node.js API capabilities as well as perform browser operations we’re already used to. But when you need to invoke operations that only the main process can handle, you need a communication mechanism to tell the main process what you want to do.

Building an Angular 7 + Electron Desktop App from Scratch

Tue, 18 Dec 2018 19:02:36 +0000

What is Electron?

Electron is a library for building desktop applications with JavaScript, HTML, and CSS. These applications can be packaged to run on Mac, Windows, and Linux, and can also be published to the Mac and Windows App Stores. This means that as long as you have front-end development skills, you can easily build cross-platform desktop applications.

Electron’s Main Process and Renderer Process

Electron has two types of processes: the main process and the renderer process. Some modules can only run on one or the other, while others have no restrictions. The main process acts more as a behind-the-scenes role, while renderer processes are the individual windows of the application.

Angular Template Safe Navigation Operator ( ?. )

Sun, 25 Nov 2018 22:17:36 +0000

This is very practical and frequently used operator in Angular development. React and Vue don’t have this feature natively.

In our daily development, when accessing property paths.

If for some reason the path contains null or undefined, and we continue to access properties, the entire program will crash, preventing the program from continuing to run.

Here’s an example:

var obj ={
 a:1,
 b:{ // Sometimes, this property might not exist
 c:2,
 d:3 
 }
}
obj.a // Normal access
obj.b // If this property sometimes doesn't exist, accessing it will only return undefined, won't cause an error
obj.b.c // When property b doesn't exist, accessing properties on undefined will definitely cause the program to crash

Safe navigation solves the above problem. We just need to change the . before uncertain properties to ?. to avoid errors. When no value is found, it will default to empty.