Отдельные файлы Angular2 TypeScript и файлы JavaScript в разные папки, возможно, " dist‘

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

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

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

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

Я тоже могу опоздать, но я сделал это.

сначала что сказал рахил Шан.

затем создать 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.

Thanx raheel shan, ваш ответ дал фору,

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

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

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

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

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

относительные пути в Angular 2 не так просты, потому что фреймворк хочет быть гибким с тем, как вы загружаете свои файлы (CommonJs, SystemJs,.. так далее) согласно компонент-относительные пути в угловой 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',
...
});

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

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

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

я решил это для своих целей с помощью сценариев npm. Раздел скрипты в моем пакете.файл 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.

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

в любом случае, вот часть моего package.json file

{
  ...
  "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 флаг из watchassets скрипт

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"
    }
}

systemjs.конфиг.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

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

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

npm install cpx

2) Обновление BS-config.json и изменить baseDir от "src"до " dist"

"baseDir":"dist"

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

"outDir": "../dist"

4) пакет обновления.формат JSON: 4.1) добавьте новую команду в конец скриптов:

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

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

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

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

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

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

установка:

• Вид -> Расширения
• Пип
• установить
• перезагрузка
• View - > Command Pallet
• Peep None
• изменить .vscode / настройки.json по мере необходимости (мой показан ниже)

-

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

25.01.2017-обновления:угловые-интерфейс командной строки из коробки, заботится об этом. а монтажные работы и сейчас.

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

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

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

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

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

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

обновление:

просто используйте угловой CLI. Все происходит автоматически.

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

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

никаких изменений в systemjs.конфиг.js.

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

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

для этого я изменил только два файла 1. systemjs.конфиг.js и 2.tsconfig.json

в systemjs.конфиг.js я изменил на

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

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

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

добавляя поверх того, что сказал рахил Шан. Мне пришлось внести дополнительные изменения в индекс.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.конфиг.js

перед:

'app': 'app',

после:

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

.HTML-код

перед:

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

после:

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