Angular 2 along with Typescript compiler duplicates HTML and CSS documents

Question

Angular 2 along with Typescript compiler duplicates HTML and CSS documents

When working with Angular2, I usually set the following configuration in my tsconfig.json file:

"outDir": "dist/app"

This setup allows for the transpiled .js and .map files to be generated within the /dist/app/ folder or its subfolders. This typically works without any issues.

In my component.ts files, I often reference HTML and CSS files like this:

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

Is there a way to configure the compiler to also copy these referenced HTML and CSS files for the entire project? If so, how would I adjust my tsconfig.json?

I have reviewed the compiler options listed here https://www.typescriptlang.org/docs/handbook/compiler-options.html, but did not find any information regarding copying html/css files.

Update: My project's folder structure is as follows:

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

tsconfig.json contains:

"outDir": "dist/app"

And package.json includes:

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

However, despite this setup, the HTML files are not being copied over. Strangely, no error messages are displayed either.

Another Update:

If you're using a Linux OS, Bernardo's solution may work fine. However, for those on Windows OS, the following script should do the trick:

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

typescript angular

Answer 1

Answer №1

If you're looking for a solution that works across different operating systems, consider using copyfiles

npm install copyfiles --save-dev

Next, include the following script in your package.json file:

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

After adding this script, running npm run html will copy all CSS and HTML files from the app/ folder to dist/app/ directory.

UPDATE: I also wanted to mention angular-cli. This command line tool provided by the Angular team simplifies bundling processes (ng build --prod), among other functionalities.

Answer 2

If you're looking for a solution that works across different operating systems, consider using copyfiles

npm install copyfiles --save-dev

Next, include the following script in your package.json file:

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

After adding this script, running npm run html will copy all CSS and HTML files from the app/ folder to dist/app/ directory.

UPDATE: I also wanted to mention angular-cli. This command line tool provided by the Angular team simplifies bundling processes (ng build --prod), among other functionalities.

Answer 3

Answer №2

Unfortunately, the TypeScript compiler only works with *.ts files.

If you need to include other file types like *.html and *.css in your project, you'll have to manually copy them using a method such as the cp shell command within an npm script or a tool like grunt-contrib-copy.

Here's an example using an npm script:

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

To execute this script, simply run npm run html in the terminal.

Alternatively, you can also use grunt for copying files. Here's an example configuration:

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

Answer 4

Unfortunately, the TypeScript compiler only works with *.ts files.

If you need to include other file types like *.html and *.css in your project, you'll have to manually copy them using a method such as the cp shell command within an npm script or a tool like grunt-contrib-copy.

Here's an example using an npm script:

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

To execute this script, simply run npm run html in the terminal.

Alternatively, you can also use grunt for copying files. Here's an example configuration:

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

Answer 5

Answer №3

For those struggling with this issue, Microsoft offers a helpful solution:-
https://github.com/Microsoft/TypeScript-Node-Starter
Be sure to take a look at the "copyStaticAssets" file. If previous solutions have not worked for you, give this a try - it might just be the answer you've been searching for.

Answer 6

For those struggling with this issue, Microsoft offers a helpful solution:-
https://github.com/Microsoft/TypeScript-Node-Starter
Be sure to take a look at the "copyStaticAssets" file. If previous solutions have not worked for you, give this a try - it might just be the answer you've been searching for.

Answer 7

Answer №4

After reading Bernardo's response, I made a modification to the code snippet:

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

. The updated code now compiles and copies both HTML and CSS files in a single step. Additionally, I included

"clean": "rm -rf dist"

to completely delete the 'dist' directory. This tweak seems to be working well. Hope this explanation is helpful!

Answer 8

After reading Bernardo's response, I made a modification to the code snippet:

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

. The updated code now compiles and copies both HTML and CSS files in a single step. Additionally, I included

"clean": "rm -rf dist"

to completely delete the 'dist' directory. This tweak seems to be working well. Hope this explanation is helpful!

Answer 9

Answer №5

@yesh kumar, Thank you for providing the link. Below are the steps I followed:

Installed shelljs
Added static assets to the copyStaticAssets.ts file

import * as shell from "shelljs";

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

Configured ts-node copyStaticAssets.ts in the script section of package.json

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

Answer 10

@yesh kumar, Thank you for providing the link. Below are the steps I followed:

Installed shelljs
Added static assets to the copyStaticAssets.ts file

import * as shell from "shelljs";

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

Configured ts-node copyStaticAssets.ts in the script section of package.json

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

Answer 11

Answer №6

To explore a different approach from my in-depth response here: , you could consider keeping your css and html files together with the ts files. By utilizing module.id, which points to the js file of the component, and adjusting it accordingly, you can make use of relative paths effectively :)

For your specific scenario, you might want to try something along these lines:

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

Answer 12

To explore a different approach from my in-depth response here: , you could consider keeping your css and html files together with the ts files. By utilizing module.id, which points to the js file of the component, and adjusting it accordingly, you can make use of relative paths effectively :)

For your specific scenario, you might want to try something along these lines:

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

Answer 13

Answer №7

Instead of relying on nodemon like I suggested in my previous response found here: Watching template files and moving them to the dist/ folder, you can now use Webpack within the Angular 4/5 ecosystem for a more efficient solution.

Answer 14

Instead of relying on nodemon like I suggested in my previous response found here: Watching template files and moving them to the dist/ folder, you can now use Webpack within the Angular 4/5 ecosystem for a more efficient solution.

Angular 2 along with Typescript compiler duplicates HTML and CSS documents

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Unable to direct XHR requests even though the URL is functional in the browser

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

Capturing authorization issues in Firebase using ngrx effects

Access the document within the Angular Material File Selection feature

Something seems to be off with the app while running `docker-compose up

The web server is now serving Index.html instead of main.js for AngularJS 2

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

The Angular HttpErrorResponse is a class used for handling

Employ the VSTS node API to retrieve all commits within a specified branch

run a function once ngFor has completed rendering the data

Error in Angular 2 Router: Consistently redirecting to the homepage

Defining the type of a React hook object in TypeScript when calling it

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

How can I transform this imperative reducer into a more declarative format using Ramda?

Error: Unable to establish connection - Asp.Net Core and Angular 10

Difficulty with navigation buttons on multiple Bootstrap carousels implemented using ngFor in a single page

Is there a way to verify if a user taps outside a component in react-native?

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

Is it possible to reset the attributes of a container's children using a renderer?

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located