将Angular2 TypeScript文件和JavaScript文件分离到不同的文件夹中，可能是“ dist”文件夹

82

我正在使用angular.io网站上的5分钟快速入门，该网站包含这样的文件结构：

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.json是这样的代码块：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

还有package.json：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

我将sourceMap从true更改为false，因此在代码编辑器中，不会再次生成映射文件，但仍会生成js文件。

我只想处理ts文件，而不想获取js和js.map文件的早午餐，我应该怎么做才能将所有ts文件放入我的常规开发文件夹中，例如app文件夹以及所有js和js。映射文件到一个文件夹称为dist？

一个很好的例子可能是angular2-webpack-quickstart。但是我不知道他们是怎么做到的？

任何建议如何做到这一点，当然都不是手动的。

谢谢，

javascript  json  angular 
— 马新瑞
source
您必须将打字稿编译为js，这就是浏览器如何读取它的格式：index.html中的“ register”，defaultExtension：“ js”
— Sari Yono
angular2-webpack-starter是非常最新的，它目前处于beta 1版本。建议您更加熟悉git（尤其是git pull）。
— 蒂姆·麦克纳马拉
@TimMcNamara我抓住了angular2-webpack-starter并像一个月前一样开始开发，但是它已经设置为另一个远程私有github url，因此在这种情况下，我应该如何了解angular2-webpack-starter，我应该更新一部分吗？谢谢。
— 马新瑞
您只需将当前的package.json替换为此处的链接，node_modules然后删除npm install所有链接，即可使所有内容保持最新状态
— Tim McNamara
做山说什么raheel。除了在system.config.js它应该是“应用程序”：“DIST /应用程序” //，而不是仅仅“DIST”
— 马丁·克雷默

Answers:

97

可能要晚了，但这是一个两步解决方案。

步骤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文件夹。

注意：进行其他回答。它们也非常有用和有用。

— 穆罕默德·拉海尔
source
17
我试过了，它有效。不幸的是，我的html / css文件不在dist文件夹中。为了将所有html / css复制到dist文件夹中，该怎么做？谢谢
— Adavo
我尝试了一下，不久后在dist文件夹中创建了一个应用程序目录。
— cccvandermeer '16
3
您如何处理@angular等必需的node_modules？您每次构建时都必须将所有这些复制到dist目录中吗？
— 杰里米·莫里茨
4
致未来的读者：以下是问题的html/css files is not present in the dist folder答案...
— Ben Winding
不需要提交“ dist”文件夹，对吗？我将其从Visual Studio项目中排除，并希望确保正确。
— 布赖恩
20

我的解决方案与以上有所不同。我从此处定义的Angular2快速入门种子开始：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目录。

请注意，我尚未测试这如何影响测试。

— 纳吉
source
这是最简单，最干净的解决方案
— JeffG
这是最好的！
— Windchill
有用！但是，是否有人像我这样遇到问题，使用Chrome DevTools调试应用程序？我的.ts文件为空白。
— Aquiles
出色的解决方案。真的很容易而且很干净！
— 婴儿床'17
17

我可能也迟到了，但是我做到了。

首先，请执行raheel shan所说的。

然后创建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文件夹中。

— 利里亚纳
source
8

Thanx raheel shan，您的回答开了头，

正如@Adavo在上面的评论中正确地问到的

不幸的是，我的html / css文件不在dist文件夹中。为了将所有html / css复制到dist文件夹中，该怎么做？

这个问题的答案是*在所有.ts文件中（主要是@Component的“ templateURL”属性中）使用“ /”（从根目录）提供HTML / CSS文件的完整路径

经过很多时间-我明白了-不使用Gulp :) Yipppeee

— Abdeali Chandanwala
source
有没有人可以建议这样做而不提供完整路径的解决方案？...最好是一个简单的解决方案，它不需要对其他可以正常运行的构建系统进行彻底的检查。
— WillyC
似乎不可能，您可以尝试angular-cli以获得更好的代码组织性，但同时也需要此html完整路径
— Abdeali Chandanwala
我想出了办法！请参阅我在下面提供的答案。我猜这不是完美的，但是仅使用npm脚本即可解决问题，而无需使用grunt / gulp / angular-cli。并不是说我有什么反对这些解决方案的方法，但我只是现在还不打算解决它们！
— WillyC
检查我的答案，这是通过操作model.id进行的非常干净的更改stackoverflow.com/a/40694657/986160
— Michail Michailidis
7

不幸的是，我的html / css文件不在dist文件夹中。为了将所有html / css复制到dist文件夹中，该怎么做？

Angular 2中的相对路径并不是那么简单，因为根据Angular 2中的组件相对路径，框架希望灵活地加载文件（CommonJs，SystemJs等）。

如文章所述，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',
...
});
— 米歇尔·米凯利迪斯（Michail Michailidis）
source
2
尽管这是一个很好的解决方法...从项目中获取所有项目文件的主要问题仍然取决于两个不同的文件夹...是否有任何方法可以将我们的代码从单个文件夹部署到浏览器。在此先感谢
— radio_head '17
即使在使用node_modules的情况下，您也正在运行构建脚本。每个node_modules通常都有源js和min.js文件。所以我不明白为什么部署您的源代码然后运行构建脚本来下载node_module依赖项并编译将创建dist文件夹的打字稿，这是一个问题。显然，您可以配置webpack或类似的过程以不同的方式进行捆绑。
— Michail Michailidis
7

因此，要解决此问题：

不幸的是，我的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。

— 威利
source
...虽然我使用的是build文件夹而不是dist文件夹，但是您明白了。
— WillyC
1
对不起，我很抱歉，但您确实需要添加onchange来源。另外，您应该发布一条注释，该部分仅适用于类Unix的外壳。对于大多数人来说，也许这并不是什么大问题，但是最近我遇到了很多使用Windows的开发人员（被迫成为）。
— jhohlfeld '16
好的-我已经添加了一个关于Windows的onchange来源以及有关如何获取rsyncWindows的信息。让我知道这是否解决了您的问题。
— WillyC '16
5

我尝试了@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标志rsyncwatchassets

— AlphaZygma
source
3

将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.config.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);
展开摘要

在此处输入图片说明

— xgqfrms
source
— xgqfrms
1
在我将这一行更改为以下内容之前，这对我没有用：main: './dist/app/main.js',
— RichC
这篇文章和评论+ stackoverflow.com/a/40694657/5393271可以完成这项工作。如果您在应用程序中具有服务或组件（例如app / components / mycomp.components.ts）的其他文件夹；app / services / myservice.service.ts，它将在执行npm start（building）
— sTx
您也可以执行以下操作：在system.js.config-map{app:"dist",..}然后在packages{app{main:"app/main.js"}}}和tsconfig.json- "outDir": "dist"+ html / css源
— sTx
3

在@Nagyl的启发下，我发展了自己的方式，我相信值得分享：

1）安装cpx

npm install cpx

2）更新bs-config.json并将baseDir从“ src”更改为“ dist”

"baseDir":"dist"

3）更新tsconfig.json并将outDir添加到compileOptions的末尾：

"outDir": "../dist"

4）更新package.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\"",

步骤2修改

步骤3修改

步骤4修改

— 风寒
source
2

您可以.ts在浏览器中转换文件，就像plunker在其2 ts角度模板中一样。

只需启动编辑器，选择new，然后选择AngularJS和2.0.x（TS）选项（在最底部）。但是，使用webpack（或任何其他捆绑工具）的全部目的是在本地转换文件。

— 艾基
source
2

我试过几个的上述选项，最后，这是我看中了：偷看-一个扩展的Visual Studio Code。

如何安装：

  • 查看->扩展
  • 窥视
  • 安装
  • 重装
  • 查看->命令托盘
  • 窥视无
  • 根据需要修改.vscode / settings.json（如下所示）

--

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

2017年1月25日-更新： 开箱即用的angular-cli会解决这个问题。和安装工作，现在。

— 阿南德·洛克兹（Anand Rockzz）
source
2

我尝试了此处列出的解决方案。他们很好，但对我来说并不理想。我想要一个简单的解决方案。我不想在所有组件文件中对路径信息进行硬编码。我不想安装更多的npm软件包来解决这个问题。

所以我提出了一个最简单的选择。这不是这个问题的直接答案，但对我来说很好。

我只是调整我的工作区设置，以便不显示js下面的文件/app。他们仍然在那里。它们只是隐藏在我的工作区中。对我来说，这就足够了。

我正在使用Sublime Text，因此这是我的项目设置：

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

我确定其他许多编辑器也具有类似的功能。

更新：

只需使用Angular CLI。一切都会自动处理。

— 肖恩
source
2

对于具有快速入门文件的Angular 4，我要做的只是以下操作（混合了前面提到的答案，但值略有不同）：

  • 在tsconfig.json（添加）中： "outDir": "../dist"
  • 在bs-config.json（更改）中： "baseDir": ["dist", "src"],
  • 在bs-config.e2e.json（更改）中： "baseDir": ["dist", "src"],

无需更改systemjs.config.js。

— 纽维勒
source
1

我尝试了@raheel的建议，它对我有用。我已根据需要修改了结构。

我正在使用以下结构

我正在使用以下结构

为此，我仅修改了两个文件1. systemjs.config.js和2.tsconfig.json

在systemjs.config.js中，我更改为

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

systemjs.config.js

在tsconfig.json中，我必须添加 "outDir": "app/js"

tsconfig.json

— Sanjoy Kanrar
source
无论您进行什么维护，我都在做同样的事情，但是在npm start .js文件未在app / js文件夹中创建
— priyanka ahire
1

我正在使用Angular 2.4。我需要额外的步骤才能使其正常工作。这是对system.s的index.html中对main.js文件的引用更新，来自：

System.import（'main.js'）。catch（function（err）{console.error（err）;}）;

至：

System.import（'dist / main.js'）。catch（function（err）{console.error（err）;}）;

— 欧金尼奥
source
0

除了raheel shan所说的之外。我必须在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); });
— 坦美
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.