问题标签 [angular2-build]

我正在进入Angular2。我创建了一个非常简单的测试项目来开始测试我正在学习的内容。

基本上这是我的项目：https ://github.com/developer82/ReactJS.vs.Angular2/tree/master/angular2

我是从从 Internet 下载的示例项目开始的。但是一旦我运行npm install它，下载一堆 NPM 包，现在该目录的大小约为 100mb，用于一个非常非常小的应用程序。

显然，这不是上传到生产环境的最终项目。我知道很多软件包是不需要的，有些是用于运行将运行应用程序的服务器。

在今年的 ng-conf 中，他们非常自豪地宣布 Angular2 为 45kb - 比 Angular1 小。所以我的问题是——假设我已经构建了我的 Angular2 应用程序——现在呢？如何将所有内容编译到最小尺寸并且只编译所需的包？这一切如何组合成一个 45kb 的文件？或者换句话说 - 我已经构建了我的应用程序 - 为了发布它，下一步是什么？

编辑

我按照angular-cli工具（https://github.com/angular/angular-cli#installation）的说明进行操作。

创建一个新项目会创建一个大小为 150+ mb 的目录。但是在运行ng build -prod它之后，它会生成一个大小为 1mb 的目录——小得多且容易，但我看到 angularmain.js的大小不是 675kb——与他们在 ng-conf 中谈到的 45kb 相差甚远。而且这还没有考虑到所有其他需要加载的 js 库（系统、es6-shim、反射、区域）。

这对于 Web 应用程序来说是非常重要的（尤其是针对移动设备时）。我们怎样才能使它（很多）更小？

我正在尝试将我的 Angular 2 项目以生产模式与 webpack 捆绑，但我看到没有生成 dist 文件夹，并且我收到以下错误-

npm 运行构建

angular2-webpack@1.0.0 build C:\Users\Rennie\Projects\tour_of_heroes rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail 10% 0/3 build modulests-loader : 使用 typescript@1.8.10 和 C:\Users\Rennie\Projects\tour_of_heroes\tsconfig.json
17889918m11276ms 优化资产哈希：7071423153409f1ffd44 版本：webpack 1.13.1 时间：338789ms [280] ./app/app.component.js 2.72 kB {0} [built] ... -> factory:62ms building:188ms dependencies:31ms [ 313] ./app/suggestions.component.js 4.61 kB {0} [内置] ... -> [280] 250ms -> 工厂：31ms 构建：2213ms 依赖项：0ms [314] ./app/suggestion.js 472字节 {0} [内置] ... -> [280] 250ms -> [313] 2244ms -> 工厂：1097ms 构建：4725ms [315] ./app/suggestion.service.js 1.35 kB {0} [内置] ... -> [280] 250ms -> [313] 2244ms -> 工厂：1097ms 构建：4725ms 依赖项：0ms [316] ./app/mock-suggestions.js 354 字节 {0} [内置] ... - > [280] 250ms -> [313] 2244ms -> [315] 5822ms -> 工厂：1748ms 构建：4998ms 依赖项：0ms [317] ./app/projects.component.js 3.35 kB {0} [built] ... -> [280] 250ms -> factory:31ms building:2322ms 依赖项：0ms [318] ./app/project. service.js 1.31 kB {0} [built] ... -> [280] 250ms -> [317] 2353ms -> factory:988ms building:4741ms 依赖项：0ms [319] ./app/mock-projects.js 443字节{0} [内置] ... -> [280] 250ms -> [317] 2353ms -> [318] 5729ms -> factory:1732ms building:4998ms [320] ./app/project.js 424 字节 {0 [内置] ... -> [280] 250ms -> [317] 2353ms -> [318] 5729ms -> [319] 6730ms -> factory:1226ms building:1816ms [321] ./app/tech.service。 js 1.26 kB {0} [built] ... -> [280] 250ms -> [317] 2353ms -> factory:988ms building:4959ms 依赖项：0ms [322] ./app/mock-tech.js 710 bytes {0} [built] ... -> [280] 250ms -> [317] 2353ms -> [321] 5947ms -> factory:2276ms building:4268ms + 888 个隐藏模块

来自 UglifyJs 的 app.7071423153409f1ffd44.js 中的警告 条件始终为真 [./main.ts:5,4]

0] 未使用变量 parseInt 初始化的副作用 [./~/core-js/modules/_typed-buffer.js:24,0] 未使用变量 min [./~/core-js/modules/ 初始化的副作用_typed-buffer.js:30,0] 未使用变量 isInteger 初始化的副作用 [./~/core-js/modules/_typed-array.js:14,0] 未使用变量 isIterable 初始化的副作用 [./ ~/core-js/modules/_typed-array.js:28,0] || 左侧的条件 总是假 [./~/zone.js/dist/zone.js:600,40] || 左侧的条件 总是错误 [./~/zone.js/dist/zone.js:601,39] 删除无副作用声明 [./~/zone.js/dist/zone.js:629,0] 副作用初始化未使用的变量 Zone [./~/zone.js/dist/zone.js:152,0] 丢弃未使用的变量 cacheSentinel [./~/reflect-metadata/Reflect.js:809,

警告来自 UglifyJs 的 vendor.7071423153409f1ffd44.js 删除未使用的变量 __unused [./~/@angular/core/src/di/reflective_injector.js:9,0] 未使用变量 freeExports [./~/rxjs/ 初始化的副作用util/root.js:12,0] 未使用变量 freeModule 初始化的副作用 [./~/rxjs/util/root.js:13,0] 未使用变量 SecurityContext [./~/@angular 初始化的副作用/core/src/security.js:17,0] 未使用变量 ViewType 初始化的副作用 [./~/@angular/core/src/linker/view_type.js:13,0] 删除未使用变量 __unused [./ ~/@angular/core/src/platform_common_providers.js:10,0] 删除未使用的变量 __unused [./~/@angular/core/src/application_common_providers.js:8,0] 未使用变量 ProviderAstType 初始化的副作用 [ ./~/@angular/compiler/src/template_ast.js:224,0] 未使用变量 PropertyBindingType 初始化的副作用 [./~/@angular/compiler/src/template_ast.js:261,0] 初始化的副作用未使用的变量 OPERATORS [./~/@angular/compiler/src/expression_parser/lexer.js:422,0] 删除未使用的变量 $FF [./~/@angular/compiler/src/html_lexer.js:69,0 ] 删除未使用的变量 $$ [./~/@angular/compiler/src/html_lexer.js:75,0] 删除未使用的变量 $QUESTION [./~/@angular/compiler/src/html_lexer.js:87,0 ] 针对布尔值的非严格相等：!= true [./~/@angular/compiler/src/html_tags.js:295,0] 未使用变量 TypeModifier 初始化的副作用 [./~/@angular/compiler/src /output/output_ast.js:12,0] 未使用变量 BuiltinMethod [./~/@angular/compiler/src/output/output_ast.js:268,0] 未使用变量 StmtModifier 初始化的副作用 [./~/@angular/compiler/src/output/output_ast.js:502,0]删除未使用的变量 EVENT [./~/@angular/compiler/src/schema/dom_element_schema_registry.js:12,0] 删除未使用的变量 __unused [./~/@angular/common/src/pipes/async_pipe.js:28, 0] 针对布尔值的非严格相等：== false [./~/@angular/router-deprecated/src/router.js:532,0] 针对布尔值的非严格相等：== false [./~/@ angular/router-deprecated/src/router.js:315,0] 删除未使用的变量 __make_dart_analyzer_happy [./~/@angular/router-deprecated/src/route_config/route_config_impl.js:7,0] 未使用的初始化的副作用变量 RequestMethod [./~/@angular/http/src/enums.js:14,0] 未使用变量 ReadyState 初始化的副作用 [./~/@angular/http/src/enums.js:28,0] 未使用变量 ResponseType [./~/@angular/http/src/ 初始化的副作用enums.js:40,0]

C:\Users\Rennie\Projects\tour_of_heroes\node_modules\reflect-metadata\Reflect.ts (1406,33) 中的错误：错误 TS2304：找不到名称“msCrypto”。

C:\Users\Rennie\Projects\tour_of_heroes\node_modules\reflect-metadata\Reflect.ts (1407,21) 中的错误：错误 TS2304：找不到名称“msCrypto”。

我的代码确实适用于开发模式。

我的代码可以在这个 repo- Portfolio Project中找到

我已使用以下步骤在生产中生成 dist

在此之后，我复制了它包含的所有代码 app 文件夹

它将打开我的项目并成功运行。

现在它正在构建所有内容并创建 dist 文件夹，但不完整。没有应用程序文件夹或所需文件。

请建议我生成 Angular 2 构建的方法。我想在任何 Web 服务器中托管这个构建。

我正在使用带有 WebStorm 的 Angular 2 开发一个小型 Web 应用程序。我想知道如何使用 WebStorm 捆绑我的 Web 应用程序。

我看到了我的朋友，他使用 Visual Code 来捆绑他的 Angular 2 项目。项目最小化后，输出为：

• 1个索引文件，
• 1个填充文件
• 1 个供应商文件。

如何使用 WebStorm 2016.3 实现相同的目标？

换句话说..如果我只对 HTML 进行更改而不拉下整个项目，会反映这种变化吗？那可能吗？

我想知道是否可以在不必遵循正常流程的情况下做到这一点...进行适当的 HTML 更改-> 构建项目并将 dist 文件夹上传到服务器..？

我正在使用 WebStorm 2016.3 创建一个 Angular 2 项目。我已经按照这篇文章捆绑了我的项目： https ://angular.io/docs/ts/latest/guide/webpack.html

当我输入命令npm start时，它显示了一个错误列表：

我已将templateUrl每个文件更改为，src/components/<template url>但仍然显示这些错误。

谁能帮帮我？

我用 Angular 2 开发了一个应用程序，我想将它发送给雇主进行代码审查。

如果我只是复制文件和文件夹可以吗？如果是，我应该复制哪些文件和文件夹？

如果不是，我如何构建我的应用程序并将其发送给我的雇主？

我有一个客户端 Angular2 应用程序，它将使用需要配置数据的第 3 方 NgModule 应用程序。我需要将配置值作为服务的静态属性提供，该服务在 3rd 方 NgModule 的不同区域中被调用。

客户端应用的 App.Module：

3rd 方 NgModule 被导入客户端应用程序：

第 3 方 NgModules 静态服务，包含来自客户端应用程序的配置数据：

只有当我在客户端应用程序的任何组件构造函数中导入 ClientConfigService 时，这种方法才有效（我目前正在 app.component.ts 中导入它）。在构造函数中导入它会导致第 3 方 NgModule 中的 configHelperFactory 触发，从而使用配置数据设置静态属性。

这种方法有效，客户端应用程序使用 AOT 构建。问题是在 App.Module 中设置配置数据并在任何给定组件的构造函数中导入 ClientConfigService 以使 configHelperFactory 触发有点麻烦。

有没有办法将配置数据传递到第 3 方 NgModule，使用配置数据填充静态服务属性，并能够使用 AOT 构建客户端应用程序？

我想：

然后从相应的角度 2 分量：

有没有办法配置角度构建来解决 npm some-css-component？

现在我正在尝试使用 --base-href 选项构建 angular2 项目，但效果不佳。

ng build --bh=/Chamber/前端/

这是 .angular-cli.json 的内容

构建后，outDir 的 index.html 包含无效的 basehref，如下所示。

这是我的 angular2 版本。

我不知道出了什么问题。有没有人来解决这个问题？