Angular 5.0의 마법

아니아니, Angular를 아시나요? 많은 분들이 Angular 1을 아직 잘 모르시는 가운데, Angular5가 나왔습니다. 오늘은 Angular 5가 이전 버전에 비해 어떤 변화가 있었는지 소개해드리고자 합니다.

Build Optimizer

5.0.0부터 CLI를 통해 실행되는 제품 빌드는 기본적으로 빌드 최적화 프로그램을 사용합니다.

빌드 최적화 도구는 Angular 애플리케이션에 대한 이해를 바탕으로 빌드된 패키지를 더 작게 만들 수 있는 CLI 도구입니다.

옵티마이저 구축에는 두 가지 주요 작업이 있습니다. 먼저, 기존 도구가 이를 사용하여 "트리 흔들기"의 최적화 효과를 향상하고 애플리케이션에서 불필요한 부분을 제거할 수 있도록 애플리케이션의 특정 부분을 순수로 표시합니다.

두 번째로, 빌드 최적화 프로그램은 앱에서 Angular 데코레이터 코드를 제거합니다. 데코레이터는 컴파일러에서만 사용되며 런타임 중에는 사용되지 않으며 삭제할 수 있습니다. 위의 최적화는 모두 생성된 JS 패키지의 크기를 줄이고 애플리케이션 시작 속도를 높일 수 있습니다.

Angular 범용 상태 전송 API 및 DOM 지원

이를 통해 서버와 클라이언트 간에 애플리케이션 상태를 더 쉽게 공유할 수 있습니다.

Angular Universal은 개발자가 서버 측 렌더링(SSR)을 수행할 수 있도록 돕는 프로젝트입니다. 서버 측 렌더링으로 생성된 HTML은 JS를 지원하지 않는 스파이더 및 크롤러에 적합하며 사용자 인식 성능을 향상시키는 데에도 도움이 됩니다.

5.0.0에서 개발팀은 ServerTransferStateModule과 해당 BrowserTransferStateModule을 추가했습니다. 이 모듈은 개발자가 서버 측 렌더링으로 생성된 콘텐츠에 관련 정보를 추가한 다음 반복 생성을 방지하기 위해 클라이언트에 보내는 데 도움이 될 수 있습니다. 이는 HTTP를 통해 데이터를 검색하는 시나리오에 유용합니다. 서버에서 클라이언트로 상태를 전송함으로써 개발자는 두 번째 HTTP 요청을 할 필요가 없습니다. 상태 이전에 대한 문서는 몇 주 후에 공개될 예정입니다.

Angular Universal 팀은 플랫폼 서버 Domino도 플랫폼 서버에 추가했습니다. Domino는 서버 측 환경에서 더 많은 기본 DOM 작업을 지원하므로 서버 측이 아닌 타사 JS 및 구성 요소 라이브러리에 대한 지원이 향상될 수 있습니다.

컴파일러 개선

증분 컴파일을 지원하기 위해 Angular 컴파일러를 개선했습니다. 결과적으로 특히 제품 빌드와 AOT 빌드의 경우 재구축이 가속화되고 그 효과가 더욱 분명해집니다. 또한 공백을 제거하여 패키지 크기를 줄이기 위해 데코레이터를 개선했습니다.

TypeScript 변환

이제 Angular 컴파일러의 기본 작업 메커니즘은 TypeScript 변환이므로 증분 재구축이 훨씬 빨라집니다. TypeScript 변환은 표준 TypeScript 컴파일 파이프라인을 살펴볼 수 있게 해주는 TypeScript 2.3의 새로운 기능입니다.

AOT 태그가 열린 상태에서 ng Serve를 실행하여 위 메커니즘을 사용할 수 있습니다.

ng Serve --aot

모든 분들이 꼭 드셔보시길 권합니다. 이 구성은 향후 CLI의 기본값이 됩니다. 많은 프로젝트에는 수천 개의 구성요소와 관련된 성능 문제가 있으며, 우리는 모든 규모의 프로젝트가 이러한 개선을 통해 이점을 얻을 수 있기를 바랍니다.

새로운 컴파일러 파이프라인은 https://angular.io의 증분 AOT 빌드를 수행할 때 빌드 시간을 95% 절약합니다(개발 시스템에서 40초 이상에서 2초 미만으로 테스트됨).

우리의 목표는 개발자가 AOT 컴파일을 개발에 사용할 수 있을 만큼 빠르게 AOT 컴파일을 만드는 것입니다. 이제 2초 미만으로 분할되었으므로 향후 CLI에서는 AOT가 기본적으로 활성화될 수 있습니다.

이 변환으로의 전환 단계로 더 이상 genDir이 필요하지 않으며 outDir도 변경되었습니다. 이제 패키지에 대해 생성된 모든 파일을 node_modules에 입력하겠습니다.

공백 유지

과거 컴파일러는 템플릿에 탭, 줄 바꿈 및 공백을 충실히 재현하고 포함했습니다. 이제 구성요소 및 애플리케이션에 공백을 포함할지 여부를 선택할 수 있습니다.

이 구성은 각 구성 요소의 데코레이터에서 지정할 수 있으며 현재 기본값은 true입니다.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

또는 tsconfig.json에서 전역적으로 구성할 수도 있습니다. 여기서 기본값도 true입니다.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

일반적인 규칙은 구성 요소 수준 구성이 애플리케이션 수준 구성보다 우선 적용되어야 한다는 것입니다. 개발팀은 기본적으로 개발자의 공간을 절약하기 위해 향후 기본값을 false로 변경할 계획입니다. e03b848252eb9375d56be284e690e873 태그에 대해 걱정하지 마세요. 컴파일러가 해당 태그를 지능적으로 처리합니다.

향상된 데코레이터 지원

이제 Lambda 및 객체 리터럴 useValue, useFactory 및 데이터 데코레이터에서 표현식 낮추기를 지원합니다. 이를 통해 런타임 시 평가할 수 있는 데코레이터에서만 낮출 수 있는 값을 사용할 수 있습니다.

이제 명명된 함수 대신 Lambda 함수를 사용할 수 있습니다. 즉, 코드를 실행해도 d.ts나 외부 API에는 영향을 미치지 않습니다.

Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

useValue의 일부로 표현식도 저하됩니다.

Component({

공급자: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]

})

export 클래스 MyClass {}

국제화된 숫자, 날짜 및 통화 파이프

우리는 새로운 숫자, 날짜 및 통화 파이프를 사용하면 브라우저 간 국제화가 더욱 편리해지며 i18n 폴리필을 사용할 필요가 없습니다.

在以前版本的Angular中，我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此，很多开发者都在使用腻子脚本（polyfill），而结果也不好。很多人反馈说一些常见的格式（如货币）不能做到开箱即用。

而在5.0.0中，我们把这个管道更新成了自己的实现，依赖CLDR提供广泛的地区支持，而且可配置。以下是我们对v4和v5所做的比较：a document comparing the pipe behavior between v4 and v5。

如果你还没条件使用新管理，可以导入DeprecatedI18NPipesModule以降级到旧的行为。

StaticInjector代替ReflectiveInjector

为了消除对更多腻子脚本（polyfill）的依赖，我们用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect，为开发者减少了应用大小。

以前

ReflectiveInjector.resolveAndCreate(providers);

以后

Injector.create(providers);

提升Zone的速度

一方面提升了Zone的速度，另一方面也可以在特别关注性能的应用中绕过它。

若要绕过它，启动应用时加上noop：

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

这里有一个完整的例子：the example ng-component-state project。

exportAs

组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。Angular Material项目已经在其前缀迁移项目中用上了，对其他组件作者肯定也有用。

示例

@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
  .
  .
  .
}

HttpClient

v4.3在@angular/common中推出过HttpClient，用于在Angular中发送请求，它小巧易用。HttpClient受到了开发者的广泛赞誉，因此我们推荐在所有应用中使用它，放弃之前的@angular/http library。

要升级HttpClient，需要在每个模块的@angular/common/http中把HttpModule替换为HttpClientModule，注入HttpClient服务，删除所有map(res => res.json())。

CLI v1.5

从Angluar CLI v1.5开始，已经开始支持Angluar v5.0.0，默认生成v5项目。

在这次小版本升级中，我们默认打开了构建优化器，让开发者拿到更小的包。

我们还修改了使用.tsconfig文件的方式，以更严格地遵守TypeScript标准。此前，如果检测到延迟加载的路由，而且你在tsconfig.json中手工指定了一组files或include，那这些路由会自动化处理。而如今，根据TypeScript规范，我们不再这么干了。默认情况下，CLI对TypeScript的配置中没有files或include，因此多数开发者不会受影响。

Angular表单添加updateOn Blur/Submit

这样可以根据blur或submit来运行验证和更新值的逻辑了，不必再单纯依赖input事件。

表单对应用很重要，如果有服务端验证，或者验证或更新值会触发较慢的操作，你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了，也可以在表单层面设置。

此外，你现在可以直接在选项中指定asyncValidators，而不是通过第三个参数指定。

模板驱动的表单

以前

<input name="firstName" ngmodel=""/>

以后

<input name="firstName" ngmodel=""/>

或者

<form [ngFormOptions]="{updateOn:&#39;submit&#39;}">

反应式表单

以前

new FormGroup(value);
new FormControl(value, [], [myValidator])

以后

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用，因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用，以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。

不再这样:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

现在这样:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

此外，RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本，让包大小有明显减小。如果你没使用Angular CLI，那还是应该指向这个新版本。相关文档在此：Build and Treeshaking。

新的路由器生成周期事件

我们给路由器添加了新的生命周期事件，让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时，在一个特定的路由器出口上展示加载动画，或者测量性能。

新的事件（按顺序）是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一个使用这些事件启动和停止加载动画的示例：

class MyComponent {
  constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }
}

如何更新

다음은 전체 프로세스와 업데이트하기 전에 해야 할 일, 애플리케이션 업데이트 단계, 향후 Angular 버전을 준비하는 단계를 알려주는 Angular 업데이트 가이드입니다.

우리는 이전에 더 이상 사용되지 않는 많은 API(예: OpaqueToken)를 삭제했으며 더 이상 사용되지 않는 새로운 항목도 발표했습니다. 이러한 변경 사항은 위 가이드에 자세히 설명되어 있습니다.

알려진 문제

현재 소스 맵과 관련된 알려진 문제가 있습니다. 일부 소스 맵은 "정의되지 않은 소스" 오류를 보고합니다.

공식 소개는 다음과 같습니다: Angular 5.0.0 - 오각형 도넛의 출시를 발표하게 되어 기쁘게 생각합니다! 이것은 새로운 기능을 포함하고 많은 버그를 수정한 또 다른 주요 버전입니다. 이는 Angular를 더 작고, 더 빠르고, 더 사용하기 좋게 만들고자 하는 우리의 일관된 목표를 다시 한 번 반영합니다. 우리는 또한 가능한 한 빨리 새 버전에 익숙해지기를 바랍니다. 버전이 우리에게 적응하지 않으면 버전에 적응해야 합니다.

관련 읽기:

Angular에서 APP_INITIALIZER의 역할 이해

Angular2 패키지로 Android 앱 환경을 구축하는 방법

AngularJs 양식 확인 방법

위 내용은 Angular 5.0의 마법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!