Разделяйте Angular2 TypeScript файлы и файлы JavaScript в разные папки, возможно, 'dist'

Ответ 1

Возможно, поздно, но вот двухэтапное решение.

Шаг 1

Измените system.config.js, обновив 'app' до 'dist/app':

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

Теперь это будет выглядеть так:

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

Шаг 2

Создайте папку dist.

Измените tsconfig.json и добавьте:

"outDir": "dist"

Полученный tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

Запустите npm start, и вы должны увидеть все скомпилированные файлы .js и .map.js в папке dist.

Примечание. Пройдите другие ответы. Они также очень полезны и информативны.

Ответ 2

Мое решение немного отличается от приведенного выше. Я начинал с семени Angular2 Quickstart, определенного здесь: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

А потом изменилось только следующее:

• Добавлен "outDir": "../dist" в tsconfig.json
• Изменен атрибут baseDir внутри bs-config.json до "baseDir": ["dist", "src"]

Затем npm run start работает как раньше (даже html/css и другие файлы без копирования), но скомпилированные файлы .js и .map встроены в dist/app и не будут загрязнять ваш каталог src/app.

Обратите внимание, что я еще не тестировал, как это влияет на тестирование.

Ответ 3

Возможно, я опаздываю, но я это сделал.

Сначала сделайте что сказал рашел шань.

Затем создайте папку dist.

После создания папки перейдите в файл tsconfig.json и добавьте следующее:

"outDir": "dist"

Полученный tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Если вы запустите npm start и сохраните файл, вы должны увидеть все скомпилированные .js и .map.js в папке dist.

Ответ 4

Thanx raheel shan, ваш ответ дал начало,

Как @Adavo справедливо спросил выше в комментариях

К сожалению, мои файлы html/css не присутствует в папке dist. Как сделать, чтобы скопировать все html/css в dist folder?

Ответ на этот вопрос * предоставить полный путь к файлу HTML/CSS с помощью '/' (из корневого каталога) во всех файлах .ts и, главным образом, в свойстве "templateURL" @Component

после большого количества времени - я понял, что понял - без использования Gulp:) Yipppeee

Ответ 5

Итак, чтобы решить эту проблему:

К сожалению, мои файлы html/css отсутствуют в папке dist. Как сделать, чтобы скопировать все html/css в папку dist?

Сделайте шаги в ответах @raheel shan и @Lirianer.... тогда вы можете закончить с этим.

Я решил это для своих целей, используя npm-скрипты. Раздел сценариев в моем файле package.json приведен ниже. Решением является запуск onchnage (пакет npm - npm install --save onchange) одновременно с tsc и сервером. Затем используйте rsync для копирования активов, которые вы хотите переместить:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

Для тех из вас, кто находится в Windows, вы можете получить rsync через Cygwin или с помощью упакованных решений, таких как cwRsync.

Ответ 6

К сожалению, мои файлы html/css отсутствуют в папке dist. Как сделать, чтобы скопировать все html/css в папку dist?

Относительные пути в Angular 2 не так просты, потому что структура хочет быть гибкой с тем, как вы загружаете свои файлы (CommonJs, SystemJs и т.д.), в соответствии с Компонентно-относительные пути в Angular 2.

В статье объясняется module.id при использовании с CommonJs (проверьте ваш tsconfig.json), содержащий абсолютный корень модуля, и его можно использовать для построения относительного пути.

Таким образом, лучшей альтернативой может стать оставить файлы css/html с ts файлами и сконфигурировать ваш компонент, как показано ниже, при условии, что у вас есть только файлы сборки в отдельной папке с именем dist. ваши файлы css и html будут загружены без проблем с использованием относительных путей путем преобразования производного пути в исходный, который содержит их, - по существу удаление /dist/ или переименование его на /src/;)

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Если у вас есть отдельные папки для источника и сборки, вы можете это сделать:

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Ответ 7

Я попробовал @WillyC предложение и работал как шарм, просто отметьте, что вам нужно добавить зависимость onchange к вашему файлу package.json. Я добавил немного немного дополнительных скриптов, чтобы иметь чистую настройку при первом запуске, а также для удаления оставшихся html/css файлов (было бы неплохо, если бы это было так же возможно для TSC)

В любом случае, вот раздел моего package.json файла

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

Для удаления rsync обратите внимание на флаг --delete в команде rsync watchassets script

Ответ 8

Angular2 TypeScript файлы и файлы JavaScript в другую папку

Вот моя конфигурация для Angular 2 последней версии V2.1.1, и она работает очень хорошо!

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

Ответ 9

Вдохновленный @Nagyl, я разработал свой собственный путь, и я считаю, что стоит поделиться:

1) Установите cpx

npm install cpx

2) Обновите bs-config.json и измените baseDir с "src" на "dist"

"baseDir":"dist"

3) Обновите tsconfig.json и добавьте outDir в конец компилятораОпции:

"outDir": "../dist"

4) Обновить пакет .json: 4.1) добавьте новую команду в конец скриптов:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) измените строку "start", чтобы включить команду "cpx":

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Ответ 10

Вы можете передать файлы .ts в браузере, как plunker делает в своем шаблоне angular 2 ts.

Просто запустите редактор, выберите новый, затем параметр AngularJS и 2.0.x(TS) (в самом низу). Но весь смысл использования webpack (или любого другого инструмента для связывания) заключается в локальном перераспределении файлов.

Ответ 11

Я попробовал несколько из вышеупомянутых вариантов, и, наконец, это то, на чем я остановился: Peep - расширение для Visual Studio Code.

Как установить:

• Просмотр → Расширения
• Peep
• Установить
• Reload
• Вид → Командный поддон
• Peep None
• изменить .vscode/settings.json по мере необходимости (мой показан ниже)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

01/25/2017 - обновления: angular -cli из коробки, позаботится об этом. и монтажные работы, и теперь.

Ответ 12

Я попробовал решения, перечисленные здесь. Они хороши, но не идеальны для меня. Я хочу простое решение. Я не хочу жестко закодировать информацию о пути во всех моих файлах компонентов. Я не хочу устанавливать больше пакетов npm, чтобы позаботиться об этом.

Итак, я придумал самую легкую альтернативу. Это не прямой ответ на этот вопрос, но он очень хорошо работает для меня.

Я просто настраиваю параметры рабочего пространства, чтобы файлы js в /app не отображались. Они все еще там. Они просто скрыты от моего рабочего пространства. Для меня это достаточно.

Я использую Sublime Text, поэтому вот что у меня есть для моих настроек проекта:

"file_exclude_patterns": ["app/*.js"]

Я уверен, что многие другие редакторы имеют схожие функции.

UPDATE:

Просто используйте Angular CLI. Все заботится автоматически.

Ответ 13

Для Angular 4 с файлами из quickstart все, что мне нужно было сделать, это следующее (сочетание ранее заявленных ответов, но несколько разных значений):

• В tsconfig.json(add): "outDir": "../dist"
• В bs-config.json(изменение): "baseDir": ["dist", "src"],
• В bs-config.e2e.json(change): "baseDir": ["dist", "src"],

Нет изменений в systemjs.config.js.

Ответ 14

Я попробовал предложение @raheel, и это сработало для меня. Я изменил структуру в соответствии с моими потребностями.

Я использую следующую структуру

Чтобы получить это, я изменил только два файла: 1. systemjs.config.js и 2.tsconfig.json

В systemjs.config.js я изменился на

map: { // previously it was app: 'app', app: 'app/js', ...

и в tsconfig.json мне нужно добавить "outDir": "app/js"

Ответ 15

Я работаю с Angular 2.4. Мне нужен был дополнительный шаг, чтобы заставить его работать. Это была ссылка на systemJs для файла main.js в index.html это, от:

System.import('main.js'). catch (function (err) {console.error(err); });

в

System.import( 'расстояние/main.js'). Улов (функция (ERR) { console.error(ERR); });

Ответ 16

Добавление сверху того, что сказал рашел-чан. Я должен был внести дополнительные изменения в index.html, чтобы теперь отразить корректный файл javascript.

Вот резюме с моей стороны.

tsconfig.json

Перед

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

После:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  },
  "exclude": [ 
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

systemjs.config.js

До:

'app': 'app',

После:

'app': 'dist/app', //'app

index.html

До:

System.import('main.js').catch(function(err){ console.error(err); });

После:

System.import('dist/main.js').catch(function(err){ console.error(err); });