我想为Angular创建一个简单的hello world应用。

当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。

我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。

我哪里错了?我是不是忽略了一些非常非常明显的东西?


当前回答

没什么问题。这些都是您在package.json中提到的所有节点依赖项。

如果你已经下载了一些git hub项目,请小心,它可能有很多其他的依赖关系,而这些依赖关系实际上并不是angular 2 first hello world app所需要的:)

确保你有角度依赖 -rxjs 狼吞虎咽地吃 打印稿 -tslint 码头工人

其他回答

这实际上并不是Angular特有的,几乎所有使用NodeJs / npm生态系统作为工具的项目都会发生这种情况。

这些项目在你的node_modules文件夹中,是你的直接依赖需要运行的传递依赖。

在节点生态系统中,模块通常很小,这意味着我们不需要自己开发东西,而是倾向于以模块的形式导入大部分我们需要的东西。这可以包括像著名的左垫函数这样的小东西,如果不是作为练习,为什么我们自己写呢?

所以有很多文件实际上是一件好事,这意味着一切都是模块化的,模块作者经常重用其他模块。这种模块化的便利性可能是节点生态系统发展如此迅速的主要原因之一。

原则上这应该不会引起任何问题,但似乎你遇到了谷歌应用程序引擎文件计数限制。在这种情况下,我建议不要上传node_modules到应用程序引擎。

相反,在本地构建应用程序,并上传到谷歌应用程序引擎只捆绑文件,但不构建在应用程序引擎本身。

Angular本身有很多依赖项,而CLI的beta版本下载的文件是其他版本的四倍。

这是如何创建一个简单的项目将更少的文件(“只有”10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

如果你使用的是angular cli的新版本,请使用ng build——prod

它将创建dist文件夹,其中有更少的文件和项目的速度将提高。

此外,为了在本地测试angular cli的最佳性能,你可以使用ng serve——prod

如果您的文件系统支持符号链接,那么您至少可以将所有这些文件降级到一个隐藏文件夹中——这样像tree这样的智能工具在默认情况下就不会显示它们。

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

为此使用隐藏文件夹还可以鼓励这样的理解,即这些是与构建相关的中间文件,不需要保存到修订控制中——或者直接在部署中使用。

你需要确保你只是从Angular CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项,并只提供运行应用程序所需的内容。

也就是说,Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题

昨天(2016年8月2日)发布了一个版本,将构建机制从broccoli + systemjs切换到webpack,成功地处理了产品构建。

基于这些步骤:

ng new test-project
ng build --prod

我看到在这里列出的14个文件的dist文件夹大小为1.1 MB:

./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

注意:目前要安装webpack版本的angular cli,你必须运行…NPM安装angular-cli@webpack -g