Life × Ex × Code

Posted on Edited on In

開發 Angular 就不能不知道 Angular CLI 這個超級好用的命令列工具，有了這個工具，原本渾沌的開發環境，頓時清晰，許多繁瑣的瑣事，一個命令就搞定！這邊是我自己的操作筆記，讓記憶力不佳的我，有個地方可以方便查詢。

Read more »

Posted on Edited on In
  1. angular.json 是 Angular CLI 的控制塔，它提供了 Angular workspace 和 project 的預設配置。
  2. 講解了一些 angular.json 的資料架構。
  3. 什麼是 Architect 和 Builders 與他們之間的關係。
  4. Angular CLI 是如何透過 Architect 解析命令的。
  5. 如何透過 assets 在打包專案時複製完整的資料。

Angular workspace root level 的一個文件，主要是提供 workspace 的配置與 project 的預設配置，供 Angular CLI 中 build 和 development tool 使用。

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

Read more »

Posted on Edited on In

引用 mat 樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<mat-form-field>
  <mat-label>Input</mat-label>
  <input matInput>
</mat-form-field>

<mat-form-field>
  <mat-label>Select</mat-label>
  <mat-select>
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Textarea</mat-label>
  <textarea matInput></textarea>
</mat-form-field>

Datepicker

changeEvent

1
<input (dateChange)="change()"/>
1
2
3
4
5
6
7
8
9
10
11
12
<mat-form-field appearance="fill">
  <mat-label>Input & change events</mat-label>
  <input matInput [matDatepicker]="picker"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<div class="example-events">
  <div *ngFor="let e of events">{{e}}</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Datepicker input and change events */
@Component({
  selector: 'datepicker-events-example',
  templateUrl: 'datepicker-events-example.html',
  styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
  events: string[] = [];

  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.events.push(`${type}: ${event.value}`);
  }
}

customer svg icon

1
2
3
4
5
6
7
import { HttpClientModule } from "@angular/common/http";
@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component } from '@angular/core';
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      "musicon",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/headphone.svg")
    );
  }
}
1
<mat-icon svgIcon="musicon"></mat-icon>

參考文章

Posted on Edited on In

這個資料夾通常是放 modules 常用到的 class 用來定義 interface type extend class ，為了方便使用所以特別拉出來

Read more »

Posted on Edited on In

11 升 12 所遇到的坑

cpu 附載過高問題

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// service/index.ts
server.engine(
	'html',
	ngExpressEngine({
		inlineCriticalCss:false,
		bootstrap: AppServerModule,
		providers: [
				{
					provide: APP_CONFIG,
					useValue: appConfig(),
				},
		],
	})
);
1
2
3
4
5
6
7
8
"optimization": {
	"scripts": true,
	"styles": {
		"minify": true,
		"inlineCritical": false
	},
	"fonts": true
},

https://0xdbe.github.io/AngularSecurity-DisableInlineCriticalCSS/

https://github.com/angular/angular-cli/issues/20864