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

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에서 작동했습니다.

---

현재 정답 :

팀은 distAngular CLI의 이후 버전에서 ( 기본적으로) 특정 파일을 출력 폴더 ( 기본적으로)에있는 그대로 복사하는 지원을 추가했습니다 (베타 17 또는 19 일 것입니다. 오랫동안 최종 1.x 릴리스에있었습니다).

다음 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`에 직접 넣는 것을 의미합니다)
          "출력": "."
        }
      ],
      ...
    }
  ]
  ...
}

.

---

.

[아카이브 전용] 원본 답변 (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.

An ideal solution would be in the webpack configuration, but I can't make heads or tails of how the angular-cli is managing that through angular-cli.json as of yet (beta.16).

So if anyone has a better answer that extends the webpack configuration for an angular-cli generated project I'd love to hear it.

---

For Angular 8 readers,

.htaccessneeds to be src/.htaccess . See, below,

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

Make sure you have placed the .htaccess file inside src directory of your project. (If you need a valid htaccess file, then you can find one in here - https://stackoverflow.com/a/57126352/767625)

That's it. This should now be copied when you hit ng build --prod=true.

Hope this helps someone.

Cheers,

---

There is a "scripts" section in angular-cli.json file. You can add all the third party javascript files there.

---

In my case I used Angular version 5, So I tried create file called Staticfile.txt when running ng build --prod command. make sure to give the file extension , otherwise it won't create the file.

참고URL : https://stackoverflow.com/questions/39538464/how-to-include-custom-files-with-angular-cli-build