Angular 2-Angular cli --构建项目答案

【问题标题】：Angular 2-Angular cli --Build projectAngular 2-Angular cli --构建项目
【发布时间】：2017-01-25 19:13:26
【问题描述】：

我是 Angular 2 的新手。我开发了一个小项目，使用angular-cli生成打包，成功生成dist文件夹。

但是当我将此应用程序部署到服务器并点击 index.html 页面时，页面无法访问捆绑 js 文件。

捆绑后的Index.html::

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
<script src="//rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

<link href="styles.d41d8cd98f00b204e9800998ecf8427e.bundle.css" rel="stylesheet"></head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.d41d8cd98f00b204e980.bundle.js"></script><script type="text/javascript" src="styles.b2328beb0372c051d06d.bundle.js"></script><script type="text/javascript" src="main.83a76acd0c370402d4d0.bundle.js"></script></body>

Angular-cli.js

{
      "project": {
        "version": "1.0.0-beta.21",
        "name": "app-name"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "styles.css"
          ],
          "scripts": [],
          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "addons": [],
      "packages": [],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false,
        "inline": {
          "style": false,
          "template": false
        },
        "spec": {
          "class": false,
          "component": true,
          "directive": true,
          "module": false,
          "pipe": true,
          "service": true
        }
      }
    }

捆绑后的文件夹结构：

所以我的问题是如何在使用 Angular-CLI 打包时在 index.html 文件的 src 标记中附加文件夹名称，如下所示。

<script type="text/javascript" src="/dist/inline.d41d8cd98f00b204e980.bundle.js">

【问题讨论】：

我没有看到任何自定义捆绑路径的方法。它对我来说工作正常，你的结构看起来还不错。你能把你的错误信息写在你的帖子里吗？
当我在浏览器中点击我的应用程序 url 时，它给了我 404 for bundle js.localhost:port/inline.d41d8cd98f00b204e980.bundle.js --404。因为打包后我的应用程序文件夹中存在 bundle js。我的应用程序 url 是 localhost:port/Myapp
你使用 ng serve 吗？
在本地运行完美。我在 apache 服务器上部署时遇到问题
也许可以查看您的请求日志和基本 url (w3schools.com/tags/tag_base.asp)

标签： node.js angular npm angular-cli

【解决方案1】：

你有没有尝试添加

<base href="./dist/">

到你的 html 文件的头部？

【讨论】：

不适合我！实际问题是在构建项目后，所有 js 和资产（图像）文件都没有正确映射。如果我在 index.html 中的所有脚本 css 内联中添加“dist”，它将被加载并完美运行。
首先使用带有一个脚本标签的简单 html 文件尝试上面的 sol 并查看生成的 url 并相应地更改它
好的，你的 Angular CLI 项目中的 app/src 文件夹中的所有图像吗？啊！尝试将其更改为，仅此而已。我尝试在 app/src 文件夹中创建一个包含一些图像的新项目，并将基础设置为“/”，并将它们很好地链接起来。希望这会有所帮助！