小编Log*_*hen的帖子

我放在我网站上的所有内容都能正常运行,但我尝试放入网站的每个图像(背景除外)都会返回一个404 Not Found Error.

我的所有图像都位于"Project/src/assets/images",我在我的html文档中尝试了以下img标记.文档位于"Project/src/app/tabs"中.

<img src="src/assets/images/image_name.jpg"> 
<img src="/src/assets/images/image_name.jpg">
<img src="./src/assets/images/image_name.jpg">

我使用css为我的页面设置了背景图像,它可以工作.这是我应用的选择器和属性:

background: url('assets/images/greybackground.jpg') no-repeat center center fixed;

如何在不收到404错误的情况下将图像添加到HTML文档中？

我正在网页的标题中构建一个通用搜索栏.它配置和工作正常,但我有一个小问题试图设计它.

目前它看起来像这样:

我希望它看起来更加精致,像这样:

我对输入框的形状和位置很好,但我想将图标和占位符文本对齐在框中心而不是拥抱框的顶部并触摸边框.

这是我正在使用的html:

<md-input-container _ngcontent-c5="" color="accent" floatplaceholder="never" ng-reflect-color="accent" ng-reflect-float-placeholder="never" class="mat-input-container ng-untouched ng-pristine ng-valid">
    <div class="mat-input-wrapper">   
       <div class="mat-input-table"> 
           <!--bindings={"ng-reflect-ng-if": "0" }-->
           <div class="mat-input-infix"> 
               <input _ngcontent-c5="" id="search-person" mdinput="" placeholder="Search for a person" type="text" ng-reflect-is-disabled="false" ng-reflect-model="" ng-reflect-disabled="false" ng-reflect-id="search-missionaries" ng-reflect-placeholder="Search for a person" ng-reflect-type="text" class="ng-untouched ng-pristine mat-input-element ng-valid">
               <i _ngcontent-c5="" class="material-icons">search</i>
               <span class="mat-input-placeholder-wrapper"> 
                   <!--bindings={"ng-reflect-ng-if": "true"}-->
                   <label class="mat-input-placeholder mat-empty mat-accent" for="search-person">  Search for a person 
                       <!--bindings={"ng-reflect-ng-if": "false"}-->
                   </label> 
               </span> 
           </div> 
           <!--bindings={"ng-reflect-ng-if": "0"}-->
        </div> 
        <div class="mat-input-underline"> 
            <span class="mat-input-ripple mat-accent">
            </span> 
        </div> 
        <div class="mat-input-subscript-wrapper" ng-reflect-ng-switch="hint"> …

我对使用Angular2创建的网站有疑问.我用Angular CLI构建了框架.我已经在我的本地机器上进行了彻底的测试,它完美无缺.端口4200上的"ng serve"主机,整个页面加载并按预期运行.我的所有文件都通过了ts lint.我跑了"ng lint"并没有收到任何警告或错误.

但是,当我将其上传到我的服务器时,"ng serve"将无法正常工作.我的服务器是通过Amazon Web Services(AWS)在EC2节点上创建的Bitnami映像.我将nodejs,npm和Angular CLI安装到服务器并检查以确保版本是最新的.所有这些都是.

当我第一次尝试"ng serve"命令时,我收到了这个错误:

Environment configuration does not contain "environmentSource" entry.

A new environmentSource entry replaces the previous source entry inside environments.

    To migrate angular-cli.json follow the example below:

    Before:

    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }


    After:

    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"

我更改了我的angular-cli.json以反映"After:"部分并再次运行"ng serve"命令.(我不认为这是问题,但我认为这是相关信息).

目前的错误是这样的:

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:8062:20)
    at Object.createCompilerHost (/opt/bitnami/apache2/htdocs/Logan/ProjX-Eng316/node_modules/typescript/lib/typescript.js:44978:26)
    at Object.ngcLoader …

我正在构建一个小型的 Angular 6 Web 应用程序。它不需要任何类型的自动化测试等，所以我运行了“ng new --skip-tests true MyProject”。

我已经浏览了该项目，它看起来很干净。我唯一需要删除的是 e2e 文件夹。

现在我正在查看 package.json。我相当肯定有很多我不再需要的包，但我不愿删除它们，因为我不想造成任何问题。

这里是 cli 生成的 package.json 文件。

 {
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.6",
    "typescript": …