カテゴリー
【Angular12対応】Angular12でWebpack5をサクッと使ってみよう
※ 当ページには【広告/PR】を含む場合があります。
2021/08/09
2022/08/10
Webpack5@angular-builders
Angular12で変わったこと
🌿 レンダリングエンジンはIvyが推奨
🔐 TypeScriptでもProdモード＆strictモードがデフォルト
🧨 Webpack5をサポート
🚀 インラインSassが利用可能
💫 インラインクリティカルCSSも利用可能
IvyAngularのwebpack.config.jsはどこ問題
ng ejectAngular12の動作可能な最小プロジェクトを作る
npm init
{
"name": "micro-angular",
"version": "0.0.1",
"private": true,
"license": "UNLICENSED"
}
$ yarn add webpack webpack-cli ts-loader typescript -D
$ yarn add \
@angular/core \
@angular/common \
@angular/compiler \
@angular/platform-browser-dynamic \
@angular/platform-browser \
zone.js -S
rxjswebpackビルド
{
...
"scripts": {
"build": "webpack"
},
...
}
$ yarn webpack --version
webpack 5.49.0
webpack-cli 4.7.2
webpack.config.js
module.exports = {
entry: {
main: './src/main.ts',
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.ts$/i,
use: ["ts-loader"],
},
],
}
};
tsconfig.json
{
"include": ["src/**/*"],
"compilerOptions": {
"experimentalDecorators": true
}
}
srcmain.ts
import 'zone.js/dist/zone';
import { NgModule, Component } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";
@Component({
selector: "app-component",
template: "<div>最小構成!</div>",
})
export class AppComponent {
constructor() {}
}
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {}
}
platformBrowserDynamic().bootstrapModule(AppModule);
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Micro Angular12</title>
<link rel="shortcut icon" href="#" />
</head>
<body>
<app-component></app-component>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
yarn builddist/main.js起動テスト
$ http-server -p [Webサーバーのポート番号]
Nullish Coalescingオペレータ
??nullundefined
{{age !== null && age !== undefined ? age : calculateAge() }}
{{ age ?? calculateAge() }}
...
@Component({
selector: "app-component",
template: `<div>{{ title ?? sayHello() }}</div>`
})
export class AppComponent {
title: string;
constructor() {}
sayHello(): string {
return 'Angular12、こんにちは!';
}
}
...
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー