Shawn Shawn - 4 months ago 402
TypeScript Question

Typescript compiler copy html and css files

In Angular2 I would have

"outDir": "dist/app"


in tsconfig.json. As a result the transpiled .js and .map files are generated in /dist/app/ folder and/or its sub folders. That works all fine.

In my components.ts files I also used referenced html and css like this

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


Is there any way to make compiler to also copy the referenced html and css files for the whole project?
If yes, how would I configure my tsconfig.json?

I looked into the compiler options here https://www.typescriptlang.org/docs/handbook/compiler-options.html but didn't find anything about copying html/css files.

Update:
My folder structure is like this

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 \\;",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",

"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",

"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
},
"repository": {}
}


It doesn't copy html files. There is no error though.
This is what the console looked like.

D:\Root>npm start

> TestApp@1.0.0 start D:\Root
> tsc && concurrently "tsc -w" "lite-server"

[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lit
e-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1] files: [ './**/*.{html,htm,css,js}' ],
[1] watchOptions: { ignored: 'node_modules' },
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] --------------------------------------
[1] Local: http://localhost:3000
[1] External: http://192.168.1.127:3000
[1] --------------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://192.168.1.127:3001
[1] --------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.08.01 23:48:01 304 GET /index.html
[1] [BS] File changed: dist\app\shared\services\menu.service.js
[1] 16.08.01 23:48:01 304 GET /app/public/css/styles.css
[1] 16.08.01 23:48:01 304 GET /app/systemjs.config.js
.....

Answer

No, the TypeScript compiler is just for *.ts file.

You have to copy other files like *.html and *.css using a copy method like cp shell command inside a npm script or grunt-contrib-copy for example.

Example using npm script:

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

Just run npm run html in the shell.

Example using grunt:

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