{"id":296177,"date":"2019-12-21T15:00:10","date_gmt":"2019-12-21T15:00:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=296177"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=296177","title":{"rendered":"\u0421\u0442\u0440\u043e\u0433\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Angular"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/481444\/\">\n<h1 id=\"kak-sozdat-i-nastroit-angular-proekt-s-nulya\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Angular \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0443\u043b\u044f<\/h1>\n<p>  <\/p>\n<h3 id=\"korotkoe-vstuplenie\">\u041a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u044d\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0442\u0430\u0439\u043f\u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0431\u043e\u043b\u044c\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0439\u0442\u0435 \u044d\u0442\u0443 \u0447\u0430\u0441\u0442\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h3 id=\"podgotovka-okruzheniya-dlya-razrabotki\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<h4 id=\"git\">Git<\/h4>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u043e <strong><a href=\"https:\/\/git-scm.com\/downloads\" rel=\"nofollow\">Git<\/a><\/strong>. \u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 Git \u043d\u0430 \u0441\u0432\u043e\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u042d\u0442\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0438 \u0442\u043e\u0433\u0434\u0430 \u043b\u044e\u0431\u043e\u0439 \u0447\u043b\u0435\u043d \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0430\u0432\u0442\u043e\u0440\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0414\u043b\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b $ git config --global user.name \"John Doe\" $ git config --global user.email johndoe@example.com  \/\/ \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 $ git config user.name \"John Doe\" $ git config user.email johndoe@example.com<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"nodejs-i-nvm\">NodeJs \u0438 NVM<\/h4>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Angular \u044d\u0442\u043e <strong><a href=\"https:\/\/nodejs.org\" rel=\"nofollow\">NodeJs<\/a><\/strong>. \u041b\u0443\u0447\u0448\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c NodeJs \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong><a href=\"https:\/\/github.com\/nvm-sh\/nvm\" rel=\"nofollow\">Node Version Manager<\/a><\/strong>. \u042d\u0442\u043e \u0434\u0430\u0441\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438 \u0434\u0430\u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430 MacOs \u043f\u0435\u0440\u0435\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <strong>.zshrc<\/strong> \u0432 \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ touch ~\/.zshrc<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 <strong>\u043e\u0434\u043d\u0443<\/strong> \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f NVM. \u0412\u0435\u0440\u0441\u0438\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" rel=\"nofollow\">\u0442\u0443\u0442<\/a>. <\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ curl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.35.1\/install.sh | bash $ wget -qO- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.35.1\/install.sh | bash<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e <strong>LTS<\/strong> \u0432\u0435\u0440\u0441\u0438\u044e <strong>NodeJs<\/strong>.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ nvm install 'lts\/*'<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0435\u0435 \u043a\u0430\u043a <strong>default<\/strong>.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ nvm use 'lts\/*' $ nvm alias default 'lts\/*'<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430 MacOs \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 <strong>~\/.zshrc<\/strong> \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 <strong>nvm use<\/strong> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <strong>.nvmrc<\/strong> \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0439 nvm \u043a\u0430\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e nodejs \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043c\u0430\u043d\u0443\u0430\u043b.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\"># place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() {   local node_version=\"$(nvm version)\"   local nvmrc_path=\"$(nvm_find_nvmrc)\"    if [ -n \"$nvmrc_path\" ]; then     local nvmrc_node_version=$(nvm version \"$(cat \"${nvmrc_path}\")\")      if [ \"$nvmrc_node_version\" = \"N\/A\" ]; then       nvm install     elif [ \"$nvmrc_node_version\" != \"$node_version\" ]; then       nvm use     fi   elif [ \"$node_version\" != \"$(nvm version default)\" ]; then     echo \"Reverting to nvm default version\"     nvm use default   fi } add-zsh-hook chpwd load-nvmrc load-nvmrc<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"ustanovka-cli-i-sozdanie-proekta\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 CLI \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>  <\/p>\n<ol>\n<li>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 <strong>CLI<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 npm.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm install -g @angular\/cli<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 <strong>\u043f\u0443\u0441\u0442\u043e\u0439 Angular \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ cd ~\/Projects $ ng new --create-application false --new-project-root apps project-name<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0435\u0439 <strong>apps<\/strong> \u0434\u043b\u044f \u043d\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u043c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f <strong>\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/strong>.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0438 \u0441\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0438\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <strong>\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/strong>.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ cd project-name $ ng generate application --routing true --style scss website $ git add . $ git commit -m 'website application created'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e <strong>website<\/strong>.<\/p>\n<p>  <\/p>\n<h3 id=\"sozdanie-bibliotek\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h3>\n<p>  <\/p>\n<p>\u042f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0430\u043f\u043a\u0435 <strong>libs<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 <strong>angular.json<\/strong> \u0444\u0430\u0439\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"newProjectRoot\": \"apps\",<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"newProjectRoot\": \"libs\",<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ ng generate library @group-name\/lib-name<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <strong>group-name<\/strong> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u043e \u0434\u043e\u043c\u0435\u043d\u0443 \u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u043c\u0443 \u0442\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 npm, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e <a href=\"https:\/\/www.npmjs.com\/settings\/misticwonder\/packages\" rel=\"nofollow\">\u0442\u0443\u0442<\/a> \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c <strong>group-name<\/strong>. \u042d\u0442\u043e \u043a\u0430\u043a namespace \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"@angular\/common\" \"@angular\/compiler\" \"@angular\/core\" \"@angular\/forms\"<\/code><\/pre>\n<p>  <\/p>\n<p>\u042f \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 npm \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445. \u0410 \u043f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443.<\/p>\n<p>  <\/p>\n<p>\u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c <strong>angular.json<\/strong> \u043a \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e: <code>\"newProjectRoot\": \"apps\"<\/code><\/p>\n<p>  <\/p>\n<h3 id=\"dopolnitelnaya-konfiguraciya\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f<\/h3>\n<p>  <\/p>\n<h4 id=\"nodejs-version\">NodeJs version<\/h4>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 <strong>.nvmrc<\/strong> \u0444\u0430\u0439\u043b \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c <code>lts\/*<\/code> \u0432 \u043d\u0435\u043c. \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e node, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>12.13.1<\/code>. \u042d\u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u043c\u043e\u0438\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>$ nvm use<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ touch .nvmrc $ echo \"lts\/*\" &gt; .nvmrc<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"strogie-proverki-na-null-i-undefined\">\u0421\u0442\u0440\u043e\u0433\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 null \u0438 undefined<\/h4>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432 <code>tsconfig.json<\/code> \u0447\u0442\u043e\u0431 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 null \u0438 undefined. \u042d\u0442\u043e \u0437\u0430\u0449\u0438\u0442\u0438\u0442 \u0432\u0430\u0441 \u043e\u0442 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443 undefined \u0438\u043b\u0438 null \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"compilerOptions\": {     \"strictNullChecks\": true, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438 <strong>\u043b\u0443\u0447\u0448\u0435<\/strong>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/* Strict Type-Checking Options *\/ \"strict\": true,                           \/* Enable all strict type-checking options. *\/ \/\/ \"noImplicitAny\": true,                 \/* Raise error on expressions and declarations with an implied 'any' type. *\/ \/\/ \"strictNullChecks\": true,              \/* Enable strict null checks. *\/ \/\/ \"strictFunctionTypes\": true,           \/* Enable strict checking of function types. *\/ \/\/ \"strictBindCallApply\": true,           \/* Enable strict 'bind', 'call', and 'apply' methods on functions. *\/ \/\/ \"strictPropertyInitialization\": true,  \/* Enable strict checking of property initialization in classes. *\/ \/\/ \"noImplicitThis\": true,                \/* Raise error on 'this' expressions with an implied 'any' type. *\/ \/\/ \"alwaysStrict\": true,                  \/* Parse in strict mode and emit \"use strict\" for each source file. *\/  \/* Additional Checks *\/ \"noUnusedLocals\": true,                   \/* Report errors on unused locals. *\/ \"noUnusedParameters\": true,               \/* Report errors on unused parameters. *\/ \"noImplicitReturns\": true,                \/* Report error when not all code paths in function return a value. *\/ \"noFallthroughCasesInSwitch\": true,       \/* Report errors for fallthrough cases in switch statement. *\/<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0444\u0438\u043a\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm run build<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"strogie-pravila-tslint\">\u0421\u0442\u0440\u043e\u0433\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 TsLint<\/h4>\n<p>  <\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 <strong>\u0432\u0441\u0435 tslint \u043f\u0440\u0430\u0432\u0438\u043b\u0430<\/strong> \u043d\u0430 \u0441\u0430\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0432 <strong>tslint.json<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"extends\": \"tslint:recommended\",<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"extends\": \"tslint:all\",<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"no-implicit-dependencies\": false, \"no-submodule-imports\": false, \"completed-docs\": false, \"prefer-function-over-method\": false, \"file-name-casing\": [   true,   \"kebab-case\" ], \"no-object-literal-type-assertion\": [   true,   {     \"allow-arguments\": true   } ], \"no-floating-promises\": false, \"promise-function-async\": false, \"no-unsafe-any\": false, \"no-any\": false, \"comment-format\": [   true,   \"check-space\" ], \"newline-per-chained-call\": false, \"typedef\": [   true,   \"call-signature\",   \"arrow-call-signature\",   \"parameter\",   \"arrow-parameter\",   \"property-declaration\",   \"object-destructuring\",   \"array-destructuring\" ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439\u0442\u0435 \u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u043c \u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f. \u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 <strong>\u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 tslint \u0432 \u0441\u0432\u043e\u0435\u0439 IDE<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0444\u0438\u043a\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm run lint<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"lint-scss-s-pomoschyu-stylelint\">Lint SCSS \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e stylelint<\/h4>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 <strong>stylelint<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0430\u0448\u0435\u0433\u043e s\u0441ss \u043a\u043e\u0434\u0430<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm install stylelint stylelint-config-standard --save-dev $ touch .stylelintrc<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 <strong>.stylelintrc<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">{   \"extends\": \"stylelint-config-standard\",   \"rules\": {} }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 stylelint \u0432 package.json<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {     \"lint-all-scss\": \"stylelint \\\"**\/*.scss\\\"\",     \"lint-all-scss-fix\": \"npm run lint-all-scss -- --fix\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442. \u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 <strong>\u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 stylelint \u0432 \u0441\u0432\u043e\u0435\u0439 IDE<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm run lint-all-scss-fix<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"prettier\">Prettier<\/h4>\n<p>  <\/p>\n<p>Prettier \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0414\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 Prettier \u0432\u044b\u0434\u0430\u0435\u0442 \u0432\u0430\u043c \u043d\u0435 \u0442\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0430\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e\u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043e\u0442 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm install --save-dev --save-exact prettier<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <strong>.prettierrc<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">{   \"printWidth\": 120,   \"tabWidth\": 2,   \"arrowParens\": \"always\",   \"bracketSpacing\": true,   \"endOfLine\": \"lf\",   \"semi\": true,   \"singleQuote\": true,   \"quoteProps\": \"consistent\",   \"trailingComma\": \"all\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0444\u0430\u0439\u043b <strong>.prettierignore<\/strong> \u0441 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0438 \u043f\u0430\u043f\u043a\u0430\u043c\u0438<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">karma.conf.js protractor.conf.js ng-package.json package.json tsconfig.lib.json tsconfig.app.json tsconfig.spec.json tslint.json tsconfig.json browserslist .gitkeep favicon.ico<\/code><\/pre>\n<p>  <\/p>\n<p>Add scripts for running prettier in package.json<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {     \"prettier\": \"prettier --write \\\"{apps,libs}\/**\/*\\\"\",     \"prettier:check\": \"prettier --check \\\"{apps,libs}\/**\/*\\\"\" },<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 prettier \u0447\u0442\u043e\u0431 \u043f\u043e\u0444\u0438\u043a\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm run prettier<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"hooks\">HOOKS<\/h4>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043b\u0438\u043d\u0442\u0435\u0440\u044b, \u0444\u043e\u0440\u043c\u0430\u0442\u0442\u0435\u0440\u044b \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c git \u0445\u0443\u043a\u0438. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li><strong>husky<\/strong> \u2014 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0443\u043a\u0438<\/li>\n<li><strong>pretty-quick<\/strong> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 prettier \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$ npm i husky pretty-quick -D<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0445\u0443\u043a\u043e\u0432. \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>tools<\/strong> \u0434\u043b\u044f shell \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u041c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c 3 \u0445\u0443\u043a\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li><strong>pre-commit<\/strong> \u2014 \u0425\u0443\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u043c. \u0412 \u044d\u0442\u043e\u043c \u0445\u0443\u0434\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c prettier \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445.<\/li>\n<li><strong>commit-msg<\/strong> \u2014 \u0425\u0443\u043a \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u043c\u043c\u0438\u0442\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u044f \u0432\u0435\u0442\u043a\u0438 \u043a \u0442\u0435\u043a\u0441\u0442\u0443 \u043a\u043e\u043c\u043c\u0438\u0442\u0430.<\/li>\n<li><strong>pre-push<\/strong> \u2014 \u0425\u0443\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 git push. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Husky \u0432 <strong>package.json<\/strong>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"husky\": {     \"hooks\": {         \"pre-commit\": \"pretty-quick --staged\",         \"commit-msg\": \"node .\/tools\/commit-msg.js\",         \"pre-push\": \".\/tools\/pre-push.sh\"     } },<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 <code>.\/tools\/commit-msg.js<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const fs = require('fs'); const { execSync } = require('child_process');  const message = fs.readFileSync(process.env.HUSKY_GIT_PARAMS, 'utf8').trim(); const currentBranch = getCurrentBranch();  fs.writeFileSync(process.env.HUSKY_GIT_PARAMS, `${currentBranch}: ${message}`); process.exit(0);  function getCurrentBranch() {   const branches = execSync('git branch', { encoding: 'utf8' });   return branches     .split('\\n')     .find((b) =&gt; b.charAt(0) === '*')     .trim()     .substring(2); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 <code>.\/tools\/pre-push.sh<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">#!\/usr\/bin\/env bash  npm run lint-all-scss || exit npm run lint || exit<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 e2e \u043a pre-push \u0441\u043a\u0440\u0438\u043f\u0442\u0443.<\/p>\n<p>  <\/p>\n<h3 id=\"coming-soon\">COMING SOON\u2026<\/h3>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0432 \u0441\u0435\u0440\u0438\u0438 \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Angular. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 continuous integration \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Travis \u0438 Docker<\/li>\n<li>Server side rendering<\/li>\n<li>\u041f\u0435\u0440\u0435\u0432\u043e\u0434\u044b<\/li>\n<li>\u0422\u0435\u0441\u0442\u044b<\/li>\n<li>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/li>\n<li>\u041c\u043e\u043d\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 Nrwl.Nx <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c, \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u0422\u0430\u043a\u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432 <a href=\"https:\/\/github.com\/misticwonder\/mw-angular\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014 \u2014<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0443 \u043d\u0430 <a href=\"https:\/\/medium.com\/most-wanted-experts\" rel=\"nofollow\">Medium<\/a>, <a href=\"https:\/\/t.me\/most_wanted_experts\" rel=\"nofollow\">Telegram<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/twitter.com\/MostWantedXpert\" rel=\"nofollow\">Twitter<\/a>.<\/p>\n<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <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\/481444\/\"> https:\/\/habr.com\/ru\/post\/481444\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/481444\/\">\n<h1 id=\"kak-sozdat-i-nastroit-angular-proekt-s-nulya\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Angular \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0443\u043b\u044f<\/h1>\n<p>  <\/p>\n<h3 id=\"korotkoe-vstuplenie\">\u041a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u044d\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0442\u0430\u0439\u043f\u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0431\u043e\u043b\u044c\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0439\u0442\u0435 \u044d\u0442\u0443 \u0447\u0430\u0441\u0442\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u043e\u0433\u043e \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430.<\/p>\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-296177","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/296177","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=296177"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/296177\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=296177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=296177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=296177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}