타이프 라이터 + 2 각도 컴파일러 복사 HTML과 CSS 파일 Angular2에서

Question

나는 tsconfig.json에서

"outDir": "dist/app" 

있을 것입니다. 결과적으로 변환 된 .js 및 .map 파일은/dist/app/folder 및/또는 하위 폴더에 생성됩니다. 그게 다 잘된거야. 내 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 파일을 복사하는 데는 아무 것도 발견하지 못했습니다.

업데이트 : 내 폴더 구조 그것은 HTML 파일을 복사하지 않습니다이

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

tsconfig.json

"outDir": "dist/app" 

package.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 \\;", 
    ...... 
} 

같다. 그래도 오류는 없습니다. 다시

업데이트 : 리눅스 OS에있는 사람들을 위해

는 베르나르도의 솔루션은 작업입니다. Windows OS 사용자의 경우 다음이 작동해야합니다.

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

Answer 1

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

* .html 및 * .css와 같은 다른 파일은 npm 스크립트 내에 cp 쉘 명령 또는 grunt-contrib-copy과 같은 복사 방법을 사용하여 복사해야합니다.

예 사용 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, 
     } 
} 

Answer 2

나는이

"html": "cd app && tsc && find . \(-name '.html' -or -name '*.css' \) -type f -exec cp --parents {} ../dist \\;"

이

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

을 변경하고 좋은 노력하고 있습니다. 하나의 명령으로 html과 css 파일을 컴파일하고 복사하기 dist 디렉토리를 제거하기 위해이 파일을

"clean": "rm -rf dist"

에 추가했습니다. 희망이 도움이!

Answer 3

나의 상세한 대답 대신에 https://stackoverflow.com/a/40694657/986160 을 tss 파일과 함께 css 및 html로 남겨 둘 수 있습니다. 그런 다음 모듈을 사용할 수 있습니다.

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

Answer 4

의 경우 : 경로가 구성 요소의 JS 가리키는 그에 맞게 변환 한 후 기본적으로 내가 그런 일이 작동합니다 생각 상대 경로 : 귀하의 경우를 들어

를 사용할 수있을 것이다 아이디 OS 독립적 인 솔루션은 package.json에 다음 스크립트를 추가 copyfiles

npm install copyfiles --save-dev 

를 사용

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

,

이제 실행 NPM HTML은/DIST 앱/폴더에서 모든 CSS와 HTML 파일을 복사해야합니다 응용 프로그램/

편집 : 내가 좋아하는 것이 angular-cli을 지적하는 내 대답을 수정합니다. 이 명령 행 툴링 유틸리티는 앵귤러 팀이 지원하며 다른 것들 중에서도 번들 (ng build --prod) 번들을 만듭니다.