angular-cli 빌드에 사용자 지정 파일을 포함하는 방법은 무엇입니까?

RE : Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

빌드 할 때 "dist"루트에 "src / assets"의 파일을 포함하도록 angular-cli에 어떻게 지시합니까?

Windows 호스트에 배포하고 IIS에 모든 것을 인덱싱하도록 라우팅하도록 "web.config"파일을 포함해야합니다. 우리는이 RC4 이전을하고 있었지만 모든 업데이트를 통해 균열을 겪었습니다 (어떻게했는지 기억이 나지 않습니다).

나는 GitHub repo 문서를 샅샅이 뒤졌지만 이 주제와 관련하여 아무 것도 찾지 못했습니다. 내가 잘못된 장소에있는 것일까 요?

에서 TOC , 거기에 "빌드에 추가 파일 추가"총알 점이지만, 그 부분이 존재하지 않는 나타납니다.

angular-cli.json의 "assets"속성은 angular-cli webpack 빌드에 사용자 지정 파일을 포함하도록 구성 할 수 있습니다. 따라서 "assets"속성 값을 배열로 구성합니다. 예를 들면 :

"assets": ["assets", "config.json",".htaccess"],

위의 구성은 angular-cli webpack 빌드 중에 config.jsn 및 .htaccess를 dist 폴더에 복사합니다. 위의 설정은 angular-cli 버전 1.0.0-beta.18에서 작동했습니다.

현재 정답 :

팀은 특정 파일을있는 그대로 출력 폴더에 복사하기위한 지원을 추가했습니다 (dist Angular CLI의 이후 버전에서 기본적으로) (베타 17 또는 19 일 것입니다.

배열에 추가하기 만하면됩니다. angular-cli.json 과 같이 .

{
  ...
  "앱"[
    {
       "root": "src",
       "자산": [
         "자산",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(경로는 src폴더에 상대적입니다. )

나는 개인적으로 그것을 사용하고 잘 작동합니다.

베타 24, 나는 한 기능이 추가 확인 모든 만드는 각도 CLI에 assets파일을 실행하면 폴더가 웹팩 dev에 서버에서 제공됩니다 ng test그냥가 ng serve.

또한 단위 테스트 ( ng test)에 사용되는 웹팩 개발 서버에서 자산 파일 제공을 지원합니다 .
(테스트를 위해 JSON 파일이 필요하거나 콘솔에서 404 경고를 보는 것을 싫어하는 경우). 전체를 실행하기 때문에
이미 제공 ng e2e됩니다 ng serve.

또한 폴더에서 원하는 파일을 필터링하고 출력 폴더 이름을 소스 폴더와 다르게 지정하는 것과 같은 고급 기능도 있습니다.

{
  ...
  "앱"[
    {
      "root": "src",
      "자산": [
        "자산",
        "web.config":
        {
          //이 폴더의 내용 복사
          "입력": "../",
          //이 와일드 카드와 일치합니다.
          "glob": "* .config",
          // 그리고`dist` 아래의이 폴더에 넣습니다 ( '.'는`dist`에 직접 넣는 것을 의미합니다)
          "출력": "."
        }
      ],
      ...
    }
  ]
  ...
}

공식 문서 : Angular Guide-Workspace configuration을 참조 할 수도 있습니다 .

.

[아카이브 전용] 원본 답변 (2016 년 10 월 6 일) :

안타깝게도 현재 지원되지 않습니다 (베타 -16 기준). 나는 팀 (web.config 파일)에 정확한 우려를 제기했지만 곧 발생하지 않는 것 같습니다 (CLI를 포크하지 않는 한).

전체 토론 및 가능한 향후 세부 정보를 보려면 이 문제 를 따르십시오 .

JSON 파일의 경우 ./src/assets/. 이 폴더는있는 그대로에 복사됩니다 ./dist/assets/. 이것이 현재 동작입니다.

systemJS 초기에는 직접 ./public/복사 된 다른 폴더가 ./dist/있었지만 Webpack 버전에서는 사라졌습니다. 위에서 언급 한 문제에 대해 설명합니다.

한 가지 해결책은 (내 생각에는 약간의 해킹 main.ts이지만) 웹팩 빌드 출력에 포함하려는 추가 파일이 필요한 파일에 변수를 선언하는 것 입니다.

전의:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

웹팩이이 변수 선언문을 발견 하면 빌드 출력의 일부로 main.ts원시 web.config파일을 내 보냅니다 .

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

이상적인 솔루션은 webpack 구성에 있지만 angular-cli가 angular-cli.json아직 (베타 .16) 을 통해이를 관리하는 방법에 대해 앞뒤를 만들 수 없습니다 .

따라서 angular-cli 생성 프로젝트에 대한 웹팩 구성을 확장하는 더 나은 답변이 있다면 듣고 싶습니다.

Angular 8 리더의 경우

.htaccess이어야합니다 src/.htaccess. 아래를 참조하십시오.

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

프로젝트의 디렉토리 .htaccess안에 파일 을 배치했는지 확인하십시오 src.

그것을 넣을 파일 angular.json은angular-cli.json

(유효한 htaccess파일 이 필요한 경우 여기에서 찾을 수 있습니다-https: //stackoverflow.com/a/57126352/767625 )

그게 다야. 이제 눌렀을 때 복사되어야합니다.ng build --prod=true .

이것이 누군가를 돕기를 바랍니다.

건배,

angular-cli.json 파일에 "스크립트"섹션이 있습니다. 여기에 모든 타사 javascript 파일을 추가 할 수 있습니다.

제 경우에는 Angular 버전 5를 사용 했기 때문에 ng build --prod 명령을 실행할 때 Staticfile.txt 라는 파일을 만들려고했습니다 . 파일 확장자를 지정해야합니다. 그렇지 않으면 파일이 생성되지 않습니다.

angular.json을 수정합니다.
자산 배열에 항목 추가 :

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}