각도 2 + Typecript 컴파일러 copy html 및 css 파일

각도 2 + Typecript 컴파일러 copy html 및 css 파일

Angul2에서 나는

"outDir": "dist/app"

tsconfig.json으로그 결과 /dist/app/폴더 및/또는 그 하위 폴더에 transpiled .js 및 .map 파일이 생성된다.그것은 모두 잘 된다.

내 components.ts 파일에서도 이렇게 참조된 html과 css를 사용했다.

@Component({
  selector: 'my-app', 
  templateUrl: 'app/appshell/app.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  ......
}

전체 프로젝트에 대해 참조된 html 및 css 파일도 복사할 수 있는 컴파일러를 만드는 방법이 있는가?예인 경우 tsconfig.json을 구성하는 방법은?

컴파일러 옵션을 https://www.typescriptlang.org/docs/handbook/compiler-options.html에서 찾아보았지만 html/css 파일 복사에 대한 정보는 찾지 못했다.

업데이트: 내 폴더 구조는 다음과 같음

Root
  |--app       // for ts
  |--dist/app  // for js

tsconfig.json

"outDir": "dist/app"

꾸러미json

{
  "name": "TestApp",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;",
    ......
}

그것은 html 파일을 복사하지 않는다.하지만 오류는 없다.

다시 업데이트:

리눅스 OS에 있는 사람들에게 베르나르도의 솔루션은 효과가 있다.윈도 OS에 있는 사람에게는 다음과 같은 것이 효과가 있어야 한다.

  "scripts": {
    "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }

OS 독립 솔루션의 경우 복사 파일 사용

npm install copyfiles --save-dev

그런 다음 패키지에 스크립트를 추가하십시오.json

"scripts": {
  "html": "copyfiles -u 1 app/**/*.html app/**/*.css dist/"
}

npm run html은 app/폴더에서 dist/app로 모든 css와 html 파일을 복사해야 한다.

편집: 앵글-cli를 지적하도록 내 대답을 수정하고 싶다.이 명령줄 툴링 유틸리티는 각진 팀이 지원하며, 무엇보다도 산들바람(ng build --prod)을 번들로 만든다.

아니오. TypeScript 컴파일러는 *.ts 파일용입니다.

다음과 같은 복사 방법을 사용하여 *.html 및 *.css와 같은 다른 파일을 복사해야 함cp예를 들어, npm 스크립트 또는 grunt-copy-copy 내의 shell 명령.

npm 스크립트 사용 예:

"scripts": {
  "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;"
}

그냥 뛰어.npm run html껍질 속에

그룬트 사용 예:

copy: {
      html: {
          src: ['**/*.html'],
          dest: 'dist',
          cwd: 'app',
          expand: true,
      }
}

베르나르도의 대답으로 나는 이것을 바꾸었다.

"find ./app -name '.propercp' -type f -exec cp --properties {} ./properties \\;"

이를 위하여

"cd app &&tsc &&find . \( -name '.cs' -or -name '*.css' \) -type f -execcp --recip {} ../field \;"

and is working good. Compile and copy html and css files in one instruction I also added this

"청결": "rm -dist"

in order to remove the whole directory 거리를 두다. Hope this help!

이 접근방식은 마이크로소프트가 제공한다:-
https://github.com/Microsoft/TypeScript-Node-Starter
"CopyStaticAssets" 파일을 확인하십시오.위의 해결책은 하나도 나에게 효과가 없었으니, 나 같은 사람에게 도움이 되었으면 좋겠어.

@yesh kumar, 링크를 공유해줘서 고마워.여기 내가 한 단계들이 있다.

• 인스톨셸즈
• 정적 자산 추가copyStaticAssets.ts파일

import * as shell from "shelljs";

shell.cp("-R", "lib/certs", "dist/");

• 설정하다ts-node copyStaticAssets.ts에package.json대본 섹션

  "scripts": {
    "build": "tsc && npm run copy-static-assets",
    "prod": "npm run build && npm run start",
    "copy-static-assets": "ts-node copyStaticAssets.ts"
   }

여기서의 자세한 답변의 대안으로 https://stackoverflow.com/a/40694657/986160은 ts 파일에 css와 html을 남겨두는 것이 될 수 있다.그런 다음 구성 요소의 js를 가리키는 경로가 있는 module.id을 사용할 수 있으며, 그에 따라 변환한 후에는 기본적으로 상대 경로를 사용할 수 있다 :)

자네 같은 경우는 아마 효과가 있을 것 같군.

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

다음 방법의 대안으로nodemon내 답변: 템플릿 파일을 보고 dist/폴더에 복사하는 방법package.jsoncss html의 간단한 복사본과 함께 .

, 안그래?Webpack각 4/5 생태계에서.

참조URL: https://stackoverflow.com/questions/38708200/angular-2-typescript-compiler-copy-html-and-css-files