source

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

ittop 2023. 5. 7. 11:52
반응형

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

Re: Angular22.0.0, Angular-cliv1.0.0-beta.11-webpack.8

angular-cli가 빌드될 때 "dist"의 루트에 "src/assets"의 파일을 포함하도록 하려면 어떻게 해야 합니까?

Windows 호스트에 배포하고 "web.config" 파일을 포함하여 IIS에 모든 항목을 인덱스로 라우팅하도록 지시해야 합니다.우리는 RC4 이전에 이 작업을 하고 있었지만, 모든 업데이트와 함께 균열을 뚫고 떨어졌습니다(어떻게 했는지 기억이 안 나요).

GitHub 보고서를 살펴보았지만 이 주제와 관련하여 유용한 내용을 찾지 못했습니다.제가 잘못된 곳에 있는 게 아닐까요?

ToC에는 "빌드에 추가 파일 추가"라는 글머리 기호가 있지만 해당 섹션이 없는 것 같습니다.

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

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

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

갱신하다

이에 대한 최신 설명서는 https://angular.io/guide/workspace-config#assets-configuration 에서 찾을 수 있습니다.

아래로부터의 주목할 만한 변경 사항

  • 구성 은 " 이구호출다니됩일파이"입니다.angular.json
  • 는 이제 경가이프루로상트않습대가 아닌 입니다.src

팀은 특정 했습니다.dist(기본적으로 )는 Angular CLI의 최신 버전(베타 17 또는 19일 것 - 오랫동안 최종 1.x 릴리스)에서 사용되었습니다.

다의배열추됩니다면가에 있는 됩니다.angular-cli.json 예:

{..."계속" [{"root": "src","filename": ["스캐너","web.config"],...
}]...}

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

제가 개인적으로 사용하는데 작동이 잘 됩니다.

베타 24 기준으로, 저는Angular CLI에 모든 것을 확인하는 기능이 추가되었습니다. assets파일 및 폴더는 실행 시 웹 팩 개발 서버에서 제공 ng test뿐만 아니라. ng serve.

테스트에 합니다.ng test).
(테스트를 위해 JSON 파일이 필요하거나 콘솔에 404개의 경고가 표시되는 것을 싫어하는 경우).
이미 제공된 제품입니다.ng e2e그것은 만원이기 때문에.ng serve.

또한 폴더에서 원하는 파일을 필터링하고 출력 폴더 이름을 원본 폴더와 다르게 지정하는 등 고급 기능도 제공합니다.

{..."계속" [{"root": "src","filename": ["스캐너","web.config":
{이 폴더의 내용 복사"input": "..../",이 와일드카드와 일치합니다."filename": "*.config",그리고 이 폴더의 dist('.'는 dist에 직접 넣는 것을 의미함) 아래에 넣습니다."출력": "."}],...
}]...}

공식 문서를 참조할 수도 있습니다.각도 가이드 - 작업 공간 구성.


.

[보관 전용] 원본 답변(2016년 10월 6일):

안타깝게도 현재(베타-16 이후) 지원되지 않습니다.팀(web.config 파일)에 정확한 문제를 제기했지만, CLI 등을 포킹하지 않는 한 곧 발생할 것 같지 않습니다.

문제에 따라 전체 토론 및 향후 가능한 세부 정보를 확인하십시오.

추신.

JSON 파일의 경우, 당신은 그것을 넣을 수 있습니다../src/assets/ 이는폴있복그사다로 복사됩니다../dist/assets/이것이 현재 동작입니다.

system 스의이버전전JS 에 또 다른 JS 있다니또../public/ ./dist/직접적으로, 그러나 이것은 위에서 언급한 문제가 논의하는 웹 팩 버전에서 사라졌습니다.

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)

바로 그겁니다.이 이이것당칠때합복니다야어사되신제이은▁you합다▁when를 눌렀을 때 .ng build --prod=true.

이것이 누군가에게 도움이 되기를 바랍니다.

건배.

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

EX:

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.

이상적인 해결책은 웹 팩 구성에 있을 것이지만 각진 CLI가 어떻게 이를 관리하는지 이해할 수 없습니다.angular-cli.json아직(16일) 현재

그래서 만약 Angular-cli 생성 프로젝트의 웹팩 구성을 확장하는 더 나은 답변을 가진 사람이 있다면 저는 그것을 듣고 싶습니다.

angular-cli.json 파일에 "scripts" 섹션이 있습니다.거기에 서드파티 자바스크립트 파일을 모두 추가할 수 있습니다.

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

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

저의 경우 Angular version 5를 사용했기 때문에 Static file이라는 파일을 만들어 보았습니다.ng build --message 명령을 실행할 때 txt. 파일 확장자를 지정해야 합니다. 그렇지 않으면 파일이 생성되지 않습니다.

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

반응형