角2 +打字稿編譯器複製HTML和CSS文件

在Angular2我會角2 +打字稿編譯器複製HTML和CSS文件

"outDir": "dist/app"

在tsconfig.json

。因此，轉換後的.js和.map文件將在/ dist/app /文件夾和/或其子文件夾中生成。這一切都很好。

在我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"

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

它不會複製HTML文件。雖然沒有錯誤。再次

更新：

對於那些誰是在Linux操作系統上，貝爾納多的解決方案是一個正在運行的。對於那些在Windows操作系統上的人，下面應該工作。

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

來源

2016-08-01 Shawn

只是爲了向您展示您可能沒有考慮過的生態系統，它很容易將現在的JS包裝爲TypeScript + React + FreeStyle（https://medium.com/@basarat/css-modules-are-not- the-solution-1235696863d6） – basarat

不，TypeScript編譯器僅用於* .ts文件。

例如，您必須使用複製方法複製其他文件，例如* .html和* .css，如cp shell命令在npm腳本內或grunt-contrib-copy內。

例使用NPM腳本：

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

只要運行在shell npm run html。

示例使用咕嚕：

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

來源

2016-08-01 21:32:12

感謝您的回覆。 npm遞歸cp腳本的語法是什麼？ '「html」：「cp -R app/*。html dist/app /」，「不起作用。 – Shawn

@Shawn我已經更新了npm html腳本。現在它會複製所有保存目錄結構的* .html文件。請測試它。 –

Bernardo，我試過你的代碼。它沒有複製html文件。我更新了我的帖子，讓你看看我做了什麼。也許我錯過了什麼。 – Shawn

從貝爾納的答案，我改變了這種

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

這個

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

和工作良好。在一條指令中編譯和複製html和css文件我還添加了這個

"clean": "rm -rf dist"

以刪除整個目錄 dist。希望這個幫助！

來源

2016-10-11 19:50:14 vicmac

作爲我的詳細答案在這裏的替代：https://stackoverflow.com/a/40694657/986160 可能會離開你的CSS和HTML與ts文件。然後你可以使用模塊。ID，這將有路徑指向組件的JS和相應的轉換之後，你基本上可以使用相對路徑:)

對於你的情況，我認爲這樣的事情會工作：

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

來源

2016-11-19 15:44:29

對於OS獨立的解決方案，使用copyfiles

npm install copyfiles --save-dev

然後添加一個腳本的package.json

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

現在故宮運行HTML應該從應用程序/文件夾複製所有CSS和HTML文件到dist /應用/

編輯：我想修改我的回答指出angular-cli。這個命令行工具實用工具由角度團隊支持，並且使得捆綁成爲一件輕而易舉的事情（ng build --prod）等等。

來源

2016-12-29 22:02:29

我不得不添加-u 1以不包含主文件夾（src），因爲目標文件夾名稱不同（dist） –

角2 +打字稿編譯器複製HTML和CSS文件

回答

相關問題