{"id":330857,"date":"2022-03-20T15:00:21","date_gmt":"2022-03-20T15:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=330857"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=330857","title":{"rendered":"<span>Angular \u0431\u0435\u0437 CLI \u0422\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 SPA \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u0430\u043a \u0438 CLI \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular, \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442 angular-cli \u0438 \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0430\u0447\u0430\u044e\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u0434\u0443\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0435 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c, \u0432 \u043e\u0431\u0449\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u042f \u0437\u0430\u0434\u0430\u043b\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0438, \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u044d\u0442\u043e \u0432 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>Webpack v5<\/p>\n<\/li>\n<li>\n<p>Angular v13<\/p>\n<\/li>\n<li>\n<p>NodeJS v14<\/p>\n<\/li>\n<li>\n<p>NPM v8<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b:<\/p>\n<ul>\n<li>\n<p>javascript, typescript<\/p>\n<\/li>\n<li>\n<p>webpack, webpack-cli<\/p>\n<\/li>\n<li>\n<p>html, css<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0443\u0442\u044c \u043a \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/strong><\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">mkdir angular-no-cli<\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c package.json \u0438 typescript<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">cd .\/angular-no-cli npm init npm i -D typescript npx tsc --init<\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c angular-\u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432  \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">mkdir src\/app mkdir src\/assets touch webpack.config.js touch src\/index.css touch src\/index.html touch src\/main.ts touch src\/app\/app.component.css touch src\/app\/app.component.html touch src\/app\/app.component.ts touch src\/app\/app.module.ts<\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D webpack webpack-cli webpack-dev-server npm i @angular\/platform-browser @angular\/platform-browser-dynamic @angular\/common @angular\/core rxjs zone.jse.js npm i -D ts-loader<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u044d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack<\/p>\n<\/td>\n<td>\n<p>\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack-cli<\/p>\n<\/td>\n<td>\n<p>CLI \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f webpack<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack-dev-server<\/p>\n<\/td>\n<td>\n<p>development \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/platform-browser<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435  <\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/platform-browser-dynamic<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 JIT \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/common<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: http-\u043a\u043b\u0438\u0435\u043d\u0442, \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u0430\u0439\u043f\u044b, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438.\u0442.\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/core<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, DI \u0438.\u0442.\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>rxjs<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0430\u044f Subscriber-Observer \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 angular  <\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>zone.js<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>ts-loader<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 .ts \u0444\u0430\u0439\u043b\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<ol start=\"5\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f webpack<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js const path = require(\"path\"); module.exports = {     mode: \"development\",     devtool: false,     context: path.resolve(__dirname),     entry: {         app: path.resolve(__dirname, \"src\/main.ts\"),     },     stats: 'normal',     output: {         clean: true,         path: path.resolve(__dirname, \"dist\"),         filename: \"[name].js\"     },     resolve: {         extensions: [\".ts\", \".js\"]     },     \/\/ \u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e ts \u0444\u0430\u0439\u043b\u044b     module: {         rules: [             {                 test: \/\\.(js|ts)$\/,                 loader: \"ts-loader\",                 exclude: \/node_modules\/             },         ]     } }<\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f tsconfig.json<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"json\">{     \"compilerOptions\": {         \"target\": \"es2016\",         \"lib\": [\"es2020\", \"dom\"],         \"experimentalDecorators\": true,         \"emitDecoratorMetadata\": true,         \"module\": \"ES2020\",         \"moduleResolution\": \"node\",         \"esModuleInterop\": true,         \"forceConsistentCasingInFileNames\": true,         \"strict\": true,         \"skipLibCheck\": true     } }<\/code><\/pre>\n<ol start=\"7\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/ src\/main.ts import \"zone.js\/dist\/zone\"; import {platformBrowserDynamic} from '@angular\/platform-browser-dynamic'; import {AppModule} from '.\/app\/app.module';  platformBrowserDynamic()     .bootstrapModule(AppModule)     .catch(err => console.error(err));<\/code><\/pre>\n<pre><code>&lt;!--src\/index.html--> &lt;html lang=\"ru\"> &lt;head>     &lt;base href=\"\/\">     &lt;title>Angular no cli&lt;\/title>     &lt;meta charset=\"utf-8\">     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> &lt;\/head> &lt;body> &lt;app-root>&lt;\/app-root> &lt;\/body> &lt;\/html><\/code><\/pre>\n<pre><code>&lt;!--src\/app\/app.component.html--> &lt;main>Angular no CLI&lt;\/main><\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.component.ts import {Component} from \"@angular\/core\";  @Component({     selector: \"app-root\",     templateUrl: \".\/app.component.html\",     styleUrls: [\"app.component.css\"] }) export class AppComponent { }<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ src\/main.ts import {NgModule} from \"@angular\/core\"; import {AppComponent} from \".\/app.component\"; import {BrowserModule} from \"@angular\/platform-browser\";  @NgModule({     declarations: [AppComponent],     imports: [BrowserModule],     providers: [],     bootstrap: [AppComponent] }) export class AppModule {}<\/code><\/pre>\n<ol start=\"8\">\n<li>\n<p>\u041f\u043e\u043f\u043e\u0440\u0431\u0443\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npx webpack<\/code><\/pre>\n<p>\u00a0<em>\u0412\u0438\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 dist\/app.js<\/em><\/p>\n<ol start=\"9\">\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 dev-server, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e webpack \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js devServer: {     static: {         directory: path.resolve(__dirname, \"dist\")     },     port: 4200,     hot: true,     open: false }<\/code><\/pre>\n<ol start=\"10\">\n<li>\n<p>\u00a0\u041e\u0442\u043b\u0438\u0447\u043d\u043e,\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npx webpack serve<\/code><\/pre>\n<p><em>\u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0430\u0448\u0435\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u0438, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043c\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u043f\u0440\u043e index.html, \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c<\/em><\/p>\n<ol start=\"11\">\n<li>\n<p>\u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430\u0448 src\/index.html, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043f\u0430\u043b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e dist, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f  html-webpack-plugin, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e webpack<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D html-webpack-plugin<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');  plugins: [     new HtmlWebpackPlugin({         filename: path.resolve(__dirname, \"dist\", \"index.html\"),         template: path.resolve(__dirname, \"src\/index.html\")     }) ]<\/code><\/pre>\n<ol start=\"12\">\n<li>\n<p>\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432 dist \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f index.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c app.js. <\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c dev-server \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043c<\/p>\n<\/li>\n<\/ol>\n<p>\u00a0<em>GET http:\/\/localhost:4200\/app.component.html 404 (Not Found)<\/em>  <\/p>\n<ol start=\"15\">\n<li>\n<p>\u042d\u0442\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 app.component.ts \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 templateUrl: &#171;.\/app.component.html&#187;. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, @angular\/core \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTTP \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ol>\n<p><em>\u0422\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441, \u0430 \u0432\u0435\u0434\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CLI \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 html \u0444\u0430\u0439\u043b\u043e\u0432  \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043f\u043e\u0441\u043b\u0435 ng build. \u0422\u0430\u043a \u0438 \u0435\u0441\u0442\u044c, \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 angular, \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0438\u0436\u0435.<\/em><\/p>\n<ol start=\"16\">\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 dist. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0440\u0443\u043a\u0430\u043c\u0438, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043b\u0430\u0433\u0438\u043d.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D copy-webpack-plugin<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/webpack.config.js const CopyPlugin = require(\"copy-webpack-plugin\");  new CopyPlugin({     patterns: [         {             from: \"**\/*.html\",             to: path.resolve(__dirname, \"dist\", \"[name].html\"),             context: \"src\/app\/\"         }     ] })<\/code><\/pre>\n<p><em>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 html \u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 src\/app \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c c \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u0432 dist.<\/em><\/p>\n<ol start=\"17\">\n<li>\n<p>\u041e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u043e\u0448\u0438\u0431\u043a\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f app.component.css \u0444\u0430\u0439\u043b\u0430, \u043c\u044b css \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u043a\u0430 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.component.ts \/\/styleUrls: [\"app.component.css\"]<\/code><\/pre>\n<ol start=\"18\">\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u0445\u043e\u0436\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0441\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0438\u0434\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI, \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>3rdpartylicenses.txt &#8212; \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/p>\n<\/li>\n<li>\n<p>favicon.ico &#8212; \u0438\u043a\u043e\u043d\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>index.html &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 html \u0444\u0430\u0439\u043b<\/p>\n<\/li>\n<li>\n<p>main.js &#8212; \u043a\u043e\u0434 \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438 \u043d\u0430\u0448 \u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>polyfills.js &#8212; \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b <\/p>\n<\/li>\n<li>\n<p>runtime.js  &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<ol start=\"19\">\n<li>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0434\u0435\u043b\u0438\u043c runtime.js, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0432 \u043d\u0430\u0448 webpack.config<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js optimization: {     runtimeChunk: 'single' }<\/code><\/pre>\n<ol start=\"20\">\n<li>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 app.js \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438 venod \u0447\u0430\u0441\u0442\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js optimization: {     runtimeChunk: 'single',     splitChunks: {         chunks: \"all\",         maxAsyncRequests: Infinity,         minSize: 0,         name: \"vendor\"     } }<\/code><\/pre>\n<ol start=\"21\">\n<li>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u0441\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e javascript \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 index.html \u0433\u0434\u0435 \u043e\u043d\u0438 \u0432\u0441\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f, \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0432 javascript \u043a\u043e\u0434, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c webpack \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0433\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f, \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u043c\u043e\u0433\u043e Angular.<\/p>\n<ol>\n<li>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 ng build \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u0435\u0431\u0430\u0433\u0430 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 angular-cli. <em>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0437\u0434\u0435\u0441\u044c \u044f \u0432\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0448\u0443 \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0435\u0442.<\/em><\/p>\n<pre><code class=\"bash\">npm install -g @angular\/cli ng new my-first-project cd my-first-project node --inspect-brk .\\node_modules\\@angular\\cli\\bin\\ng build<\/code><\/pre>\n<\/li>\n<li>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043b\u043e\u0433\u0433\u0435\u0440\u044b <\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 angular.json<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441 \u043a\u0440\u0430\u0441\u043d\u043e\u0440\u0435\u0447\u0438\u0432\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c validateAndRun  <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const command = new description.impl(context, description, logger); const result = await command.validateAndRun(parsedOptions); <\/code><\/pre>\n<ol start=\"5\">\n<li>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 &#8212; \u0437\u0430\u043f\u0443\u0441\u043a \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443, \u0442\u0443\u0442 @angular\/cli \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442  \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043f\u0430\u043a\u0435\u0442\u0443 @angular-devkit, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c webpack.config  <\/p>\n<pre><code class=\"javascript\"> buildWebpackBrowser(options, context); \/\/options - \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 angular.json \/\/context - \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0443\u0442\u0438\u043b\u0438\u0442\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 angular<\/code><\/pre>\n<\/li>\n<li>\n<p>\u00a0\u041e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043b\u044f tsconfig  <\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0448 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0439, \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435, \u043a\u0430\u0436\u0434\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0448\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<\/li>\n<\/ul>\n<ol start=\"7\">\n<li>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0440\u043d\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e<\/p>\n<pre><code class=\"javascript\">\/\/config - \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack const { config, projectRoot, projectSourceRoot, i18n } =     await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(adjustedOptions, context, (wco) => [         configs_1.getCommonConfig(wco),         configs_1.getBrowserConfig(wco),         configs_1.getStylesConfig(wco),         configs_1.getTypeScriptConfig(wco),         wco.buildOptions.webWorkerTsConfig ? configs_1.getWorkerConfig(wco) : {},     ], { differentialLoadingNeeded });<\/code><\/pre>\n<\/li>\n<li>\n<p>\u0422\u0430\u043c \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438, \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0435\u043c \u0432 module.rules \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 html, javascript \u0438\u043b\u0438 typescript \u0444\u0430\u0439\u043b\u043e\u0432<\/p>\n<\/li>\n<\/ol>\n<pre><code>module: { rules: [   {\/\/*1     test: \/\\.?(svg|html)$\/,     resourceQuery: \/\\?ngResource\/,     type: \"asset\/source\"     },     {\/\/*2         test: \"\/\\.[cm]?[tj]sx?$\/\",         resolve: {             fullySpecified\": false         },         exclude: [\"\/[\/\\\\](?:core-js|@babel|tslib|web-animations-js|web-streams-polyfill)[\/\\\\]\/\"],         use: [{             loader: \"...\/@angular-devkit\/build-angular\/src\/babel\/webpack-loader.js\",             options: {                 cacheDirectory: \"...\/angular\/cache\/babel-webpack\",                 scriptTarget: 4,                 aot: true,                 optimize: true             }         }]     },     {\/\/*3         test: \"\/\\.[cm]?tsx?$\/\",         loader: \"..\/@ngtools\/webpack\/src\/ivy\/index.js\",         exclude: [\"\/[\/\\\\](?:css-loader|mini-css-extract-plugin|webpack-dev-server|webpack)[\/\\\\]\/\"]     }   ] }<\/code><\/pre>\n<p>\u041d\u0430\u0448\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432:<\/p>\n<p><em>1 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b, \u043f\u043e\u043f\u0430\u0432\u0448\u0438\u0435 \u043f\u043e\u0434 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 &#171;.html?ngResource&#187;. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 raw-loader<\/em><\/p>\n<p><em>2 \u0438 3 &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 javascript \u0438 typescript \u0444\u0430\u0439\u043b\u044b. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 @angular-devkit\/build-angular \u0438 @ngtools\/webpack. \u042d\u0442\u043e \u0442\u043e \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0437\u043d\u0430\u0435\u043c \u043e \u043d\u0438\u0445 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435<\/em><\/p>\n<ol start=\"24\">\n<li>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm repo @ngtools\/webpack npm repo @angular-devkit\/build-angular<\/code><\/pre>\n<p><em>\u041e\u0431\u0430 \u0432\u0435\u0434\u0443\u0442 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u0443\u044e \u0440\u0435\u043f\u0443 angular-cli, \u0442\u0430\u043c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 packages. <\/em><\/p>\n<p><em>build-angular &#8212; \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u043b\u043e\u0430\u0434\u0435\u0440\u043e\u043c \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u0434\u043b\u044f webpack, \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0442\u0430\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435: &#171;This package contains\u00a0Architect builders\u00a0used to build and test Angular applications and libraries.&#187;<\/em><\/p>\n<p><em>ngtools\/webpack &#8212; \u0442\u0430\u0436\u043a\u0435 \u0432\u0438\u0434\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043d\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u0442\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b README, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u0431\u0430\u0437\u0435 Angular-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430\u0448 \u0441\u043b\u0443\u0447\u0430\u0439. \u0412\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c babel-loader \u0441 Linker Ivy \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u0438 AngularWebpackPlugin.<\/em><\/p>\n<ol start=\"25\">\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e\u0442 \u0432 README<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\"># \u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430 \u0441 peerDependency, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0447\u0435\u0442  # \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e typescript, \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438  # \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 --legacy-peer-deps npm i -D @ngtools\/webpack babel-loader @angular\/compiler-cli @angular\/compiler @angular-devkit\/build-angular  # \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0443\u0434\u0430\u043b\u0438\u0442\u044c, \u0442.\u043a. \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a npm rm ts-loader <\/code><\/pre>\n<ol start=\"26\">\n<li>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043f\u043e\u043b\u044f module.rules \u0438 plugins \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const AngularWebpackPlugin = require('@ngtools\/webpack').AngularWebpackPlugin;  module: {     rules: [         {             test: \/\\.?(svg|html)$\/,             resourceQuery: \/\\?ngResource\/,             type: \"asset\/source\"         },         {             test: \/\\.[cm]?[tj]sx?$\/,             exclude: \/\\\/node_modules\\\/\/,             use: [                 {                     loader: 'babel-loader',                     options: {                         cacheDirectory: true,                         compact: true,                         plugins: [\"@angular\/compiler-cli\/linker\/babel\"],                     },                 },                 {                     loader: \"@angular-devkit\/build-angular\/src\/babel\/webpack-loader\",                     options: {                         aot: true,                         optimize: true,                         scriptTarget: 7                     }                 },                 {                     loader: '@ngtools\/webpack',                 },             ],         },     }],     plugins: [         new AngularWebpackPlugin({             tsconfig: path.resolve(__dirname, \"tsconfig.json\"),             jitMode: false,             directTemplateLoading: true         })     ]<\/code><\/pre>\n<ol start=\"27\">\n<li>\n<p>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 html \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043a\u043e\u043c\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0441\u0430\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0430\u043c \u0435\u0449\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0430 \u0432\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043d\u0435\u0442,<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/* new CopyPlugin({     patterns: [         {             from: \"**!\/!*.html\",             to: path.resolve(__dirname, \"dist\", \"[name].html\"),             context: \"src\/app\/\"         }     ] }),*\/<\/code><\/pre>\n<ol start=\"28\">\n<li>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c dev-server, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u043d\u0430\u0434\u043e<\/p>\n<\/li>\n<li>\n<p>\u00a0\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438, css \u0444\u0430\u0439\u043b\u044b \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u0430  <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"css\">\/*\u0444\u0430\u0439\u043b app.component.css*\/ main {     color: red; }  \/* \u0444\u0430\u0439\u043b index.css *\/ html {     background: lightcyan; }<\/code><\/pre>\n<ol start=\"30\">\n<li>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438  <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D css-loader mini-css-extract-plugin postcss-loader<\/code><\/pre>\n<ol start=\"31\">\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 app.component.ts<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/\u0444\u0430\u0439\u043b app.component.ts styleUrls: [\"app.component.css\"]<\/code><\/pre>\n<ol start=\"32\">\n<li>\n<p>\u00a0\u0415\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e webback, \u0434\u043e\u0431\u0430\u0432\u0438\u043c mini-css-extract-plugin, \u0447\u0442\u043e\u0431\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c entry, \u0442\u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const MiniCssExtractPlugin = require('mini-css-extract-plugin');  entry: {     index: [\".\/src\/main.ts\", \".\/src\/index.css\"] }, module: [     rules: {         test: \/\\.(css)$\/,         exclude: \/\\\/node_modules\\\/\/,         oneOf: [             {                 resourceQuery: {                     not: [\/\\?ngResource\/]                 },                 use: [MiniCssExtractPlugin.loader, \"css-loader\", \"postcss-loader\"]             },             {                 type: \"asset\/source\",                 loader: \"postcss-loader\"             }         ]     } ], plugins: [     new MiniCssExtractPlugin({         filename: '[name].css',     }), ]<\/code><\/pre>\n<ol start=\"33\">\n<li>\n<p>\u00a0\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c dev-server, \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0441\u0442\u0430\u043b\u0430 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430, \u0430 \u0444\u043e\u043d &#8212; \u0433\u043e\u043b\u0443\u0431\u043e\u0433\u043e, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c<\/p>\n<\/li>\n<li>\n<p>\u00a0\u00a0\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u044e\u0431\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0434\u043e\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0432 \u043d\u0430\u0448\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435  <\/p>\n<\/li>\n<\/ol>\n<pre><code>&lt;!-- app.component.html--> &lt;!-- \u0423 \u043c\u0435\u043d\u044f \u044d\u0442\u043e waiter.svg, \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u044f \u0435\u0433\u043e \u0432 src\/assets\/waiter.svg --> &lt;img src=\"\/assets\/waiter.svg\" alt=\"waiter\"><\/code><\/pre>\n<ol start=\"35\">\n<li>\n<p>\u00a0\u0420\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c CopyPlugin \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043d\u0430\u0448\u0438 assets \u0432 dist <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">new CopyPlugin({     patterns: [         {             context: \"src\/assets\/\",             from: \"**\/*\",             to: \"assets\/\",         }     ] })<\/code><\/pre>\n<ol start=\"36\">\n<li>\n<p>\u0421\u043d\u043e\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c dev-server, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0438\u0434\u0438\u043c \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0447\u0430\u0441\u0442\u044c webpack \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0432\u0435\u0441 production \u0441\u0431\u043e\u0440\u043e\u043a vendor \u0447\u0430\u0441\u0442\u0438, ng-cli \u0438 \u043d\u0430\u0448\u0435\u0439  <\/p>\n<\/li>\n<\/ol>\n<p><em>\u0421\u0431\u043e\u0440\u043a\u0430 ng cli &#8212;  100 \u041a\u0431\u0430\u0439\u0442 (main.js + polifills.js)<\/em><\/p>\n<p><em>\u041d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 &#8212; 357 \u041a\u0431\u0430\u0439\u0442 (app.js + vendor.js)<\/em><\/p>\n<ol start=\"38\">\n<li>\n<p>\u0417\u0430\u043c\u0435\u0442\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430, \u043d\u043e \u0440\u0430\u0437 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b, \u0434\u0435\u043b\u043e \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e Angular CLI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e \u0441\u0435\u0431\u0435<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">optimization: {     minimize: true,     minimizer: [         new JavaScriptOptimizerPlugin({             advanced: true,             define: {ngDevMode: false, ngI18nClosureMode: false, ngJitMode: false},             keepNames: false,             removeLicenses: true,             sourcemap: false,             target: 7         }),         new TransferSizePlugin(),         new CssOptimizerPlugin({             esbuild: {                 alwaysUseWasm: false,                 initialized: false             }         })     ]<\/code><\/pre>\n<p><em>JavaScriptOptimizerPlugin &#8212; \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e terser-plugin<\/em><\/p>\n<p><em>TransferSizePlugin &#8212; \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0441 \u0430\u0441\u0441\u0435\u0442\u0430<\/em><\/p>\n<p><em>CssOptimizerPlugin &#8212; \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438\u0437 css<\/em><\/p>\n<ol start=\"39\">\n<li>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0432\u0435\u0441 \u0441\u0431\u043e\u0440\u043a\u0438  \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c\u0441\u044f, \u0443 \u043c\u0435\u043d\u044f \u043e\u043d \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0434\u043e        150 \u041a\u0431\u0430\u0439\u0442<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0434\u0440\u043e\u0431\u0438\u043c \u043d\u0430\u0448 vendor \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 \u0441 \u043a\u043e\u0434\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432 webpack config<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">optimization: {     minimize: true,     runtimeChunk: 'single',     splitChunks: {         chunks: \"all\",         maxAsyncRequests: Infinity,         minSize: 0,         cacheGroups: {             defaultVendors: {                 test: \/[\\\\\/]node_modules[\\\\\/]\/,                 name(module) {                     const name = module.context.match(\/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/)[1];                     return `${name.replace('@', '')}`;                 }             },         }     } }<\/code><\/pre>\n<ol start=\"41\">\n<li>\n<p>\u00a0\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c dev-server \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c prod \u0438 dev \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u0437\u0430\u043c\u0435\u043d\u0438\u043c\u00a0\u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack \u043d\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">module.exports = (env) => {} mode: env.production ? \"production\" : \"development\", devtool: env.production ? false : \"eval\", output: {     clean: true,     path: path.resolve(__dirname, \"dist\"),     filename: env.production ? \"[name].[chunkhash].js\" : \"[name].js\" },<\/code><\/pre>\n<ol start=\"43\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 package.json  <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"json\">\"start\": \"webpack serve --env development \", \"build\": \"webpack --progress --env production\", \"build:dev\": \"webpack --progress\"<\/code><\/pre>\n<ol start=\"44\">\n<li>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435  <\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/github.com\/ivanobivan\/angular-no-cli-2\" rel=\"noopener noreferrer nofollow\"><strong>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043a\u043e\u0434\u043e\u043c<\/strong><\/a><\/p>\n<p><strong>\u0412\u044b\u0432\u043e\u0434\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438 &#8212; \u0434\u043e\u043b\u0433\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0434\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0437\u0430\u0447\u0435\u043c \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043f\u0430\u043a\u0435\u0442  <\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ng update, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e angular<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0427\u0442\u043e \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c:<\/strong><\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e SPA, \u043d\u043e \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u0441 lazy-loading \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 API, \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c webpack.externals \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 webpack<\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0435 \u0432\u043e\u0448\u043b\u043e \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b:<\/strong><\/p>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Angular \u044f \u0443\u0433\u043b\u0443\u0431\u0438\u043b\u0441\u044f \u0432 \u0441\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b, \u0443\u0437\u043d\u0430\u043b \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Ivy \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 AOT \u0440\u0435\u0436\u0438\u043c \u0438 \u043d\u0430 \u0447\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043e\u043d \u0432\u043b\u0438\u044f\u0435\u0442, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 ngcc, ngtsc, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041e\u0431\u044a\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0443 \u0447\u0430\u0441\u0442\u044c \u044f \u043d\u0435 \u0441\u0442\u0430\u043b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u043e \u043c\u043e\u0433 \u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e, \u0435\u0441\u043b\u0438 \u044d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u043d\u044b \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0441\u043e\u0437\u0434\u0430\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0431\u0430\u0437\u0435.<\/p>\n<p><strong>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/strong><\/p>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/strong><\/p>\n<p><a href=\"https:\/\/webpack.js.org\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e webpack<\/a><\/p>\n<p><a href=\"https:\/\/www.typescriptlang.org\/docs\/\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e typescript<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/docs\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e angular <\/a> <\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=S0o-4yc2n-8&amp;ab_channel=AngularConnect\" rel=\"noopener noreferrer nofollow\">How Angular works  <\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=anphffaCZrQ&amp;ab_channel=AngularConnect\" rel=\"noopener noreferrer nofollow\">Deep Dive into the Angular Compiler  <\/a><\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/419995\/\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 Ivy \u2014 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Angular <\/a> <\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/aot-compiler\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 AOT<\/a>  <\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Ivy Linker<\/a>  <\/p>\n<p><a href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/packages\/compiler\/design\/architecture.md\" rel=\"noopener noreferrer nofollow\">\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0434\u0432\u0438\u0436\u043a\u0430 Ivy<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/656529\/\"> https:\/\/habr.com\/ru\/post\/656529\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 SPA \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u0430\u043a \u0438 CLI \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular, \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442 angular-cli \u0438 \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0430\u0447\u0430\u044e\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u0434\u0443\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0435 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c, \u0432 \u043e\u0431\u0449\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u042f \u0437\u0430\u0434\u0430\u043b\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0438, \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u044d\u0442\u043e \u0432 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438:<\/p>\n<ul>\n<li>\n<p>Webpack v5<\/p>\n<\/li>\n<li>\n<p>Angular v13<\/p>\n<\/li>\n<li>\n<p>NodeJS v14<\/p>\n<\/li>\n<li>\n<p>NPM v8<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b:<\/p>\n<ul>\n<li>\n<p>javascript, typescript<\/p>\n<\/li>\n<li>\n<p>webpack, webpack-cli<\/p>\n<\/li>\n<li>\n<p>html, css<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0443\u0442\u044c \u043a \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/strong><\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">mkdir angular-no-cli<\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c package.json \u0438 typescript<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">cd .\/angular-no-cli npm init npm i -D typescript npx tsc --init<\/code><\/pre>\n<ol start=\"3\">\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c angular-\u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432  \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">mkdir src\/app mkdir src\/assets touch webpack.config.js touch src\/index.css touch src\/index.html touch src\/main.ts touch src\/app\/app.component.css touch src\/app\/app.component.html touch src\/app\/app.component.ts touch src\/app\/app.module.ts<\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D webpack webpack-cli webpack-dev-server npm i @angular\/platform-browser @angular\/platform-browser-dynamic @angular\/common @angular\/core rxjs zone.jse.js npm i -D ts-loader<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u044d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack<\/p>\n<\/td>\n<td>\n<p>\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack-cli<\/p>\n<\/td>\n<td>\n<p>CLI \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f webpack<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>webpack-dev-server<\/p>\n<\/td>\n<td>\n<p>development \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/platform-browser<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435  <\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/platform-browser-dynamic<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 JIT \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/common<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: http-\u043a\u043b\u0438\u0435\u043d\u0442, \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u0430\u0439\u043f\u044b, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438.\u0442.\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p><a class=\"mention\" href=\"\/users\/angular\">@angular<\/a>\/core<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, DI \u0438.\u0442.\u0434.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>rxjs<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0430\u044f Subscriber-Observer \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 angular  <\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>zone.js<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"229\" width=\"229\">\n<p>ts-loader<\/p>\n<\/td>\n<td>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 .ts \u0444\u0430\u0439\u043b\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<ol start=\"5\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f webpack<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js const path = require(\"path\"); module.exports = {     mode: \"development\",     devtool: false,     context: path.resolve(__dirname),     entry: {         app: path.resolve(__dirname, \"src\/main.ts\"),     },     stats: 'normal',     output: {         clean: true,         path: path.resolve(__dirname, \"dist\"),         filename: \"[name].js\"     },     resolve: {         extensions: [\".ts\", \".js\"]     },     \/\/ \u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e ts \u0444\u0430\u0439\u043b\u044b     module: {         rules: [             {                 test: \/\\.(js|ts)$\/,                 loader: \"ts-loader\",                 exclude: \/node_modules\/             },         ]     } }<\/code><\/pre>\n<ol start=\"6\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f tsconfig.json<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"json\">{     \"compilerOptions\": {         \"target\": \"es2016\",         \"lib\": [\"es2020\", \"dom\"],         \"experimentalDecorators\": true,         \"emitDecoratorMetadata\": true,         \"module\": \"ES2020\",         \"moduleResolution\": \"node\",         \"esModuleInterop\": true,         \"forceConsistentCasingInFileNames\": true,         \"strict\": true,         \"skipLibCheck\": true     } }<\/code><\/pre>\n<ol start=\"7\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/ src\/main.ts import \"zone.js\/dist\/zone\"; import {platformBrowserDynamic} from '@angular\/platform-browser-dynamic'; import {AppModule} from '.\/app\/app.module';  platformBrowserDynamic()     .bootstrapModule(AppModule)     .catch(err => console.error(err));<\/code><\/pre>\n<pre><code>&lt;!--src\/index.html--> &lt;html lang=\"ru\"> &lt;head>     &lt;base href=\"\/\">     &lt;title>Angular no cli&lt;\/title>     &lt;meta charset=\"utf-8\">     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> &lt;\/head> &lt;body> &lt;app-root>&lt;\/app-root> &lt;\/body> &lt;\/html><\/code><\/pre>\n<pre><code>&lt;!--src\/app\/app.component.html--> &lt;main>Angular no CLI&lt;\/main><\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.component.ts import {Component} from \"@angular\/core\";  @Component({     selector: \"app-root\",     templateUrl: \".\/app.component.html\",     styleUrls: [\"app.component.css\"] }) export class AppComponent { }<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ src\/main.ts import {NgModule} from \"@angular\/core\"; import {AppComponent} from \".\/app.component\"; import {BrowserModule} from \"@angular\/platform-browser\";  @NgModule({     declarations: [AppComponent],     imports: [BrowserModule],     providers: [],     bootstrap: [AppComponent] }) export class AppModule {}<\/code><\/pre>\n<ol start=\"8\">\n<li>\n<p>\u041f\u043e\u043f\u043e\u0440\u0431\u0443\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npx webpack<\/code><\/pre>\n<p>\u00a0<em>\u0412\u0438\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 dist\/app.js<\/em><\/p>\n<ol start=\"9\">\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 dev-server, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e webpack \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js devServer: {     static: {         directory: path.resolve(__dirname, \"dist\")     },     port: 4200,     hot: true,     open: false }<\/code><\/pre>\n<ol start=\"10\">\n<li>\n<p>\u00a0\u041e\u0442\u043b\u0438\u0447\u043d\u043e,\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npx webpack serve<\/code><\/pre>\n<p><em>\u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0430\u0448\u0435\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u0438, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043c\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u043f\u0440\u043e index.html, \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c<\/em><\/p>\n<ol start=\"11\">\n<li>\n<p>\u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430\u0448 src\/index.html, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043f\u0430\u043b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e dist, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f  html-webpack-plugin, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e webpack<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D html-webpack-plugin<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');  plugins: [     new HtmlWebpackPlugin({         filename: path.resolve(__dirname, \"dist\", \"index.html\"),         template: path.resolve(__dirname, \"src\/index.html\")     }) ]<\/code><\/pre>\n<ol start=\"12\">\n<li>\n<p>\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432 dist \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f index.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c app.js. <\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c dev-server \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043c<\/p>\n<\/li>\n<\/ol>\n<p>\u00a0<em>GET http:\/\/localhost:4200\/app.component.html 404 (Not Found)<\/em>  <\/p>\n<ol start=\"15\">\n<li>\n<p>\u042d\u0442\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 app.component.ts \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 templateUrl: &#171;.\/app.component.html&#187;. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, @angular\/core \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTTP \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ol>\n<p><em>\u0422\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441, \u0430 \u0432\u0435\u0434\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CLI \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 html \u0444\u0430\u0439\u043b\u043e\u0432  \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043f\u043e\u0441\u043b\u0435 ng build. \u0422\u0430\u043a \u0438 \u0435\u0441\u0442\u044c, \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 angular, \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0438\u0436\u0435.<\/em><\/p>\n<ol start=\"16\">\n<li>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 dist. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0440\u0443\u043a\u0430\u043c\u0438, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043b\u0430\u0433\u0438\u043d.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm i -D copy-webpack-plugin<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/webpack.config.js const CopyPlugin = require(\"copy-webpack-plugin\");  new CopyPlugin({     patterns: [         {             from: \"**\/*.html\",             to: path.resolve(__dirname, \"dist\", \"[name].html\"),             context: \"src\/app\/\"         }     ] })<\/code><\/pre>\n<p><em>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 html \u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 src\/app \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c c \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u0432 dist.<\/em><\/p>\n<ol start=\"17\">\n<li>\n<p>\u041e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u043e\u0448\u0438\u0431\u043a\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f app.component.css \u0444\u0430\u0439\u043b\u0430, \u043c\u044b css \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u043a\u0430 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.component.ts \/\/styleUrls: [\"app.component.css\"]<\/code><\/pre>\n<ol start=\"18\">\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u0445\u043e\u0436\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0441\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0438\u0434\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI, \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>3rdpartylicenses.txt &#8212; \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/p>\n<\/li>\n<li>\n<p>favicon.ico &#8212; \u0438\u043a\u043e\u043d\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>index.html &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 html \u0444\u0430\u0439\u043b<\/p>\n<\/li>\n<li>\n<p>main.js &#8212; \u043a\u043e\u0434 \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438 \u043d\u0430\u0448 \u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>polyfills.js &#8212; \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b <\/p>\n<\/li>\n<li>\n<p>runtime.js  &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<ol start=\"19\">\n<li>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0434\u0435\u043b\u0438\u043c runtime.js, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0432 \u043d\u0430\u0448 webpack.config<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js optimization: {     runtimeChunk: 'single' }<\/code><\/pre>\n<ol start=\"20\">\n<li>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 app.js \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438 venod \u0447\u0430\u0441\u0442\u0438<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/\/webpack.config.js optimization: {     runtimeChunk: 'single',     splitChunks: {         chunks: \"all\",         maxAsyncRequests: Infinity,         minSize: 0,         name: \"vendor\"     } }<\/code><\/pre>\n<ol start=\"21\">\n<li>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u0441\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e javascript \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 index.html \u0433\u0434\u0435 \u043e\u043d\u0438 \u0432\u0441\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f, \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0432 javascript \u043a\u043e\u0434, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c webpack \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0433\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f, \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u043c\u043e\u0433\u043e Angular.<\/p>\n<ol>\n<li>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 ng build \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u0435\u0431\u0430\u0433\u0430 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 angular-cli. <em>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0437\u0434\u0435\u0441\u044c \u044f \u0432\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0448\u0443 \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0435\u0442.<\/em><\/p>\n<pre><code class=\"bash\">npm install -g @angular\/cli ng new my-first-project cd my-first-project node --inspect-brk .\\node_modules\\@angular\\cli\\bin\\ng build<\/code><\/pre>\n<\/li>\n<li>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043b\u043e\u0433\u0433\u0435\u0440\u044b <\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 angular.json<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441 \u043a\u0440\u0430\u0441\u043d\u043e\u0440\u0435\u0447\u0438\u0432\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c validateAndRun  <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const command = new description.impl(context, description, logger); const result = await command.validateAndRun(parsedOptions); <\/code><\/pre>\n<ol start=\"5\">\n<li>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 &#8212; \u0437\u0430\u043f\u0443\u0441\u043a \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443, \u0442\u0443\u0442 @angular\/cli \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442  \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043f\u0430\u043a\u0435\u0442\u0443 @angular-devkit, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c webpack.config  <\/p>\n<pre><code class=\"javascript\"> buildWebpackBrowser(options, context); \/\/options - \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 angular.json \/\/context - \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0443\u0442\u0438\u043b\u0438\u0442\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 angular<\/code><\/pre>\n<\/li>\n<li>\n<p>\u00a0\u041e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043b\u044f tsconfig  <\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0448 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-330857","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=330857"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330857\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=330857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=330857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=330857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}