Question

首先，我通过编辑index.html并手动复制相应的文件来“解决”这个问题。但是角度/节点似乎工作的方式对我来说真的很混乱，所以我要求这个确定我是否做错了什么或是否还有其他事情发生。

无论如何，我有这个俗气的网上商店项目（是的，参加课程），我想把它放在我的Apache2网络服务器上。

当我发出ng build --prod命令时，在生成的./dist目录中，生成的index.html文件引用

<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

当前确实存在于我的项目目录中 - 但node_modules目录和dist目录位于同一级别（即.../ProjectName的两个子目录）。在进行开发时，应用程序通过ng serve在localhost上运行时效果很好。

所以......问题。

我是否遗漏了一些关于如何向依赖项添加引导程序的内容？对它的引用似乎与所包含的所有其他依赖项相同，并为我提供了工作功能。

我build项目错了吗？我没有错误输出...

建议好吗？谢谢！

评论中的每个请求，我的.../src/index.html

是的，我可以看到我的参考在索引中的位置那么我如何引用此文件，以便在我.../ProjectName/dist时，ng build --prod文件夹中的所有内容都会结束？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ivan's Stuff for Sale</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 
    </head>
    <body class="m-a-1">
    <app></app>
</body>
</html>

我的ProjectName/.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ivan-store"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Answer 1

由于您使用angular cli编译项目，因此您需要将静态文件添加到cli配置中。您可以在样式路径中放置一个数组来编译CSS。

我的.angular-cli.json示例。注意样式数组。对于javascript文件也可以这样做。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/materialize-css/dist/css/materialize.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/materialize-css/dist/js/materialize.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "staging": "environments/environment.staging.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

当角度CLI编译导入的样式时，它们应该（它们适合我）编译成单个样式包，并将其注入其构建的index.html中。导入样式的样式标记.a51a871499d3e6357e92.bundle.css不在我的“非构建”版本的index.html中。角度编译器补充说。我手动加载的唯一样式表是CDN。

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Begin MailChimp Signup Form -->
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/ace/1.2.8/ace.js"></script>
  <script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js"></script>
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <meta charset="UTF-8">
  <base href="/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/imgs/logo-icon.png">
  <link href="styles.a51a871499d3e6357e92.bundle.css" rel="stylesheet"/>
</head>
<body>
<prehab-root></prehab-root>
<script type="text/javascript" src="inline.c27adf0de88b28299fdd.bundle.js"></script>
<script type="text/javascript" src="polyfills.6233469b59ce155cca70.bundle.js"></script>
<script type="text/javascript" src="scripts.8432b1e713993574ef2a.bundle.js"></script>
<script type="text/javascript" src="main.888a683b4d8b8b9b8553.bundle.js"></script>
</body>
</html>

角项目 - ＆gt; apache - css文件不在/ dist

1 个答案: