Angular에서 타사 스크립트 및 CSS 작업

Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. 그러나 이것이 유일한 방법은 아닙니다. 때로는 하나의 library.js 또는 ui.css가 작동하고 응용 프로그램에 추가해야 하는 경우가 있습니다. 어떻게 할 수 있습니까?

Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브러리와 함께 작업하여 최종 번들로 병합하거나 단일 파일로 연기하는 데 도움이 됩니다.

Angular CLI에는 전역 CSS 및 JavaScript 파일을 초기화하는 고유한 방법이 있습니다. index.html의 가져오기 파일은 작동하지만 Angular 방식은 아닙니다.

Note: This example use @angular/core v12.2.0

시나리오

우리는 Angular 애플리케이션을 구축하고 있지만 다른 팀에서 만든 외부 웹 구성 요소를 사용하려고 합니다. web-component 디렉토리. 대부분의 라이브러리는 node_modules에 있지만 단순성을 위해 예제에서는 외부 디렉토리external/button-upload에 있는 파일을 사용합니다.

버튼 업로드.css

.fancy-uploader {
  background-color: red;
  color: whitesmoke;
  border: 1px solid gray;
}

버튼 업로드.js

class ButtonUpload extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
    <div class="fancy-uploader">
      <label for="avatar">Image Uploader:</label>
      <input type="file"
           id="avatar" name="avatar"
           accept="image/png, image/jpeg">
    </div>
    `;
  }

}

window.customElements.define("button-upload", ButtonUpload);

다음으로 이러한 파일을 앱에 추가하지만, 그 전에 angular.json에 대한 개요를 제공하겠습니다.

Angular.json

Angular CLI는 angular.json을 사용하여 빌드, 제공, 테스트 및 현지화를 위한 프로젝트 관리 및 구성을 돕습니다.

The focus is how to use the third party with Angular CLI, so I don't explain every single option in angular.json

Angular.json은 프로젝트 노드의 모든 애플리케이션 또는 라이브러리를 구성합니다. architect> build > options 및 styles의 scripts 섹션에서 작업하여 스타일과 CSS를 추가합니다.

"architect": {
        "build":{
            "options":{
                "styles":[],
                "scripts":[]
            }
    }
}

번들 파일

Angular.json은 최종script.js 및 styles.css에 대해 이 섹션에서 선언된 스타일과 스크립트를 취하고 index.html에 주입합니다.

스타일 배열에 button-upload.css 파일을 추가하고 스크립트에 button-upload.js를 추가합니다.

   "styles": [
              "external/button-upload/button-upload.css"
            ],
   "scripts": [
              "external/button-upload/button-upload.js"
   ]

Remember add CUSTOM_ELEMENTS_SCHEMA in the @NgModule to use custom elements. Read more

ng build를 실행하여 모든 css 파일을 styles.css의 스크립트 파일 및 스타일에 병합합니다.

> ng build
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.437835c56f488f70355e.js      | main          | 101.96 kB
polyfills.fc6cfcbe5c3a0e94edad.js | polyfills     |  33.11 kB
runtime.df8927e5b1e564860c37.js   | runtime       |   1.03 kB
scripts.5cf64c63898afa29a094.js   | scripts       | 370 bytes
styles.de2e542873613fb23f4a.css   | styles        |  73 bytes

또한 이러한 파일을 index.html에 삽입하십시오.

개별 번들

모든 것이 작동하지만 때때로 우리는 글로벌 CSS 및 JavaScript 파일의 코드를 자신의 번들 파일로 분할하려고 합니다.

스크립트를 사용하면 다음 옵션을 사용하여 개체 구성이 있는 파일을 추가할 수 있습니다.

입력: 파일 경로(CSS 또는 JS),
주입: 인덱스 파일에 기본적으로 추가하려면 true로 설정합니다.
bundleName: 번들 파일의 이름을 변경합니다.

"styles": [
      "src/styles.css",
      {
          "input": "external/button-upload/button-upload.css",
            "inject": true,
            "bundleName": "upload-button-css"
      }
     ],
"scripts": [
             {
                "input": "external/button-upload/button-upload.js",
                "inject": true,
                "bundleName": "upload-button-js"
              }

]

Old versions like 8 uses lazy instead inject.

빌드는 번들 이름을 사용하여 각 객체에 대한 새 파일을 생성합니다.

PS C:\Users\dany.paredes\Desktop\labs\learn-ng-script> ng build
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files                        | Names             |      Size
main.437835c56f488f70355e.js               | main              | 101.96 kB
polyfills.fc6cfcbe5c3a0e94edad.js          | polyfills         |  33.11 kB
runtime.df8927e5b1e564860c37.js            | runtime           |   1.03 kB
upload-button-js.5cf64c63898afa29a094.js   | upload-button-js  | 370 bytes
upload-button-css.de2e542873613fb23f4a.css | upload-button-css |  73 bytes
styles.31d6cfe0d16ae931b73c.css            | styles            |   0 bytes

주입 옵션은 index.html에 upload-button-css 및 upload-button-js 번들을 주입합니다.

결론

우리는 전역 styles.css, script.js에서 외부 JavaScript 및 CSS 파일로 작업하고 자신의 번들 파일로 분할합니다.

The source code Github