Question

我刚刚完成了Angular CLI Heroes教程here。我已经完成了所有教程并完成了HTTP教程。

所有关于Angular 4和TypeScript的很好的学习，但在整个课程中让我印象深刻的一件事是将javascript编译到src文件夹中。如果有一些＆＃34;接下来的步骤＆＃34;那将是很好的。关于为部署打包的教程 - 但这可能超出了Angular的范围。

我想改变这一点，但不是100％肯定我需要做的一切。

理想情况下，编译为单独的文件夹并包含运行网站所需的所有文件。

我查看了 tsconfig.json 文件并添加了outDir设置：

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

当我运行npm start时，代码似乎构建到dist文件夹，但是当应用程序运行时，我在浏览器中获得的只是Cannot GET /

我缺少一些东西，包括index.html - 但我不知道我需要什么文件。所以我的问题是：

运行网站需要在我编译的应用文件夹之外的哪些文件？
我可以使用Angular CLI修改项目文件以实现此目的吗？

Answer 1

@Andez，

Angular CLI应该为您完成所有这些工作。看看ng build，它应该处理好你的两个问题。

ng build将处理此问题，angular-cli.json的“apps”键中指定的内容将包含在dist文件夹中
angular-cli.json是您需要修改的文件，以包含您在dist文件夹中所需的所有文物。

希望以上指出你正确的方向

SOJ

Answer 2

要托管您的应用，您需要以下内容：

运行npm run build -- -prod（它与ng build -prod完全相同，但它有时可能更好，因为在这种情况下，您无需全局设置角度CLI，例如，这对CI构建器有用）。这将创建一个在.angular-cli.json中配置的文件夹。默认情况下为dist文件夹
获取此文件夹并将其内容放入服务器的根目录

理想情况下，您不应更改.angular-cli.json以外的任何设置。为什么？因为您需要成为Webpack，TypeScript配置和许多其他东西的专家。此外，未来的angular-cli版本很可能不支持您所做的更改。请检查项目wiki，我相信您会找到所有问题/要求的答案。

此答案仍未涵盖您的服务器配置。你应该有404后备，很可能是压缩和缓存，也许是一些代理端点。然而，这是一个与angular-cli无关的巨大话题。

Angular CLI和TypeScript outDir

2 个答案: