标签: angular8

错误

储存库不干净。请先提交或存储任何更改，然后再进行更新

当我从版本7更新到Angular 8时。

Angular升级指南https://update.angular.io/#7.0:8.0

  D:\app-test> ng update @angular/cli @angular/core
               npm cache verify

储存库不干净。请在更新之前提交或存储任何更改。

更新版本

    PS D:\app-test> ng update
                Using package manager: 'npm'
                Collecting installed dependencies...
                Found 58 dependencies.
                    We analyzed your package.json, there are some packages to update:

                      Name                               Version                  Command to update
                     --------------------------------------------------------------------------------
                      @angular/cdk                       7.2.2 -> 8.0.1           ng update @angular/cdk
                      @angular/core                      7.2.15 -> 8.0.1          ng update @angular/core
                      @angular/core                      7.2.2 -> 7.2.15          ng update @angular/core
                      @angular/material                  7.3.7 -> 8.0.1           ng update @angular/material
                      rxjs                               6.3.3 -> 6.5.2           ng update …

我是 Angular 的新手，但遇到了问题。

我正在创建一个包含多个兄弟组件的应用程序。当我更新一个组件中的值时，其他组件不会更新。我知道要解决这个问题，我应该使用行为主题。但是我如何用我的服务、组件和所有模板来实现它？

这是我的代码 -

---------------我的服务-------------------------- ——

//import


@Injectable() 
export class CoachService {

    apiURL = environment.apiURL;

    constructor(private http: HttpClient ) { }

    coachProfile(token :string)
    {  
    return this.http.post<any>(this.apiURL+'/coach/profile_infos',{
      token: token
      })        
    }

    updateProfile(info: any, token: string, us_id: string) {
      return this.http.post<any[]>(this.apiURL + '/coach/update_profile', {
        token: token,
        us_id: us_id,
        us_lang: info.us_lang,
        us_firstname: info.us_firstname,
        us_lastname: info.us_lastname,
        us_sex: info.us_sex,
        us_birthdate: info.us_birthdate,
        us_national_number : info.us_national_number,
        us_email: info.us_email,
        us_gsm: info.us_gsm,        
        online_profile: info.online_profile,          
        us_address: info.us_address,
        us_zip: info.us_zip,
        us_city: info.us_city,
        country:{
          id: info.country.id …

我有两个组件，一个父级和另一个子级。

HTML 部分

<div>
  <div class="row col-md-12">
    <div class="col-md-4">
       <!-- Some HTML Code of Parent component over here -->
    </div>
    <div class="col-md-8">
      <child-component></child-component>
    </div>
 </div>
 <button class="button" (click)="reloadOnlyChild($event)">Reload Child</button>
</div>

现在，单击此按钮后，我希望唯一的孩子重新加载或刷新。

TS部分

reloadOnlyChild(event){
  // I want to reload the child from here.
}

我在互联网上搜索，我得到的是 Vue 或 React，但不是 Angular。

在执行ng build --prod --base-href ./来构建我的cordova应用程序时，最终输出将引发如下错误。

无法加载模块脚本：服务器以非JavaScript MIME类型“”响应。根据HTML规范对模块脚本强制执行严格的MIME类型检查。

我最终通过将类型模块更改为text / javascript来解决此问题

src =“ runtime-es2015.858f8dd898b75fe86926.js” type =“ module”>

src =“ runtime-es2015.858f8dd898b75fe86926.js” type =“ text / javascript”>

在angular.json文件中是否可以解决某些问题，还是我在这里错过了什么？

错误

找不到构建器@ angular-devkit / build-angular：dev-server的实现

         ng serve
        Could not find the implementation for builder @angular-devkit/build-angular:dev-server
        Error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server
            at WorkspaceNodeModulesArchitectHost.resolveBuilder (D:\angular-tour-of-heroes\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)
            at ServeCommand.initialize (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\architect-command.js:135:55)
            at async ServeCommand.validateAndRun (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command.js:127:9)
            at async Object.runCommand (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command-runner.js:178:24)
            at async default_1 (D:\angular-tour-of-heroes\node_modules\@angular\cli\lib\cli\index.js:32:31)

ng版本

              Angular CLI: 8.0.3
                Node: 12.4.0
                OS: win32 x64
                Angular: 7.2.2
                ... animations, cdk, common, compiler, core, forms, http
                ... platform-browser, platform-browser-dynamic, router
                ... service-worker

                Package                           Version
                -----------------------------------------------------------
                @angular-devkit/architect         0.13.9
                @angular-devkit/build-angular     0.13.9
                @angular-devkit/build-optimizer   0.13.9
                @angular-devkit/build-webpack     0.13.9
                @angular-devkit/core              8.0.3 …

node_modules/@angular/common/http/http.d.ts:2801:22 中的错误 - 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类

2801 export declare class HttpClientModule {

我们有一个Angular 4我最近尝试升级到的项目Angular 8。我遵循了Angular网站上的迁移指南，更改了某些语法，并且阻止了项目的构建。我遇到了我的样式无法在本地正确加载并且根本不在Azure上加载的问题。我找到Webpack并尝试配置它，添加了style-loader，sass-loader和css-loader。现在，当我在本地运行时，可以在浏览器的“网络”选项卡中看到所有样式均已正确加载，但它仅加载默认的index.html文件，而没有引导应用程序。

当我在Azure上部署应用程序时，它会加载其他组件，但是没有一种样式会加载。我花了3周的时间进行迁移，但仍然没有希望。

工具/插件版本：

Angular CLI: 8.3.5
Node: 10.15.1
OS: win32 x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.5
@angular-devkit/build-angular     0.803.5
@angular-devkit/build-optimizer   0.803.5
@angular-devkit/build-webpack     0.803.5
@angular-devkit/core              8.3.5
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.0
@angular/cli                      8.3.5
@angular/http                     5.2.11
@angular/material                 8.2.0
@ngtools/webpack                  8.3.5
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.40.2

这是我的Webpack配置：

const { resolve } = require('path');
const rxPaths = …

我做了错误处理程序代码，但我在 catch 中出错了。未定义的方法。

这是我的 serivce.ts 代码。

import { Injectable } from "@angular/core";
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { user } from "./user";
import { Observable } from "rxjs";
import "rxjs/add/operator/catch";
import "rxjs/add/Observable/throw";
@Injectable({
  providedIn: "root"
})
export class DemoService {
  private url: string = "/assets/demo/user.json";
  constructor(private http: HttpClient) {}

  getuserdetails(): Observable<user[]> {
    return this.http.get<user[]>(this.url).catch(this.errorHandler);
  }
  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "server error.");
  }
}

这是我的 app.component.ts 文件代码

 public userdetails = [];
  public errorMsg;
  constructor(private user: DemoService) …

在ion-back-button不现身的右边ion-menu-button。这是为什么？

在ion-menu-button和ion-title显示正确，并在相同的位置horizantal对齐。

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">
      <!-- navigation button-->
      <ion-menu-button></ion-menu-button>
      <!-- optional back button-->
      <ion-back-button></ion-back-button> 
    </ion-buttons>

    <ion-title>
        {{ pageTitle | translate}}
    </ion-title>

  </ion-toolbar>
</ion-header>

在 DOM 检查器中， 的 CSSdisplay属性ion-back-button设置为none。为什么它会设置为none？

我用了

this.navCtrl.navigateForward('/term/' + term);

导航到此页面，因此我希望后退按钮可以选择它。为什么navigateForward不添加到堆栈中，这会使ion-back-button显示？

我正在开发一个使用 jhipster、Spring Boot 和 Angular 设置的应用程序

我需要为某些东西设置不同的公钥，具体取决于应用程序是在 dev 还是 prod 上运行。

我已经在我的 angular.json 中坐了很长一段时间了，在谷歌上搜索了一堆解决方案，尝试了所有基于 angular.json 的解决方案。

这是我在 angular.json 中尝试过的：

• “索引”的旧用法
• 文件替换
• 新索引“输入”“输出”选项
• 对于后者，我已经遍历了我能想到的所有写入索引文件路径的方法（仅包括文件名）。

我的三个索引文件都在 webapp 目录中。
angular.json（相关位）：

  "root": "",
  "sourceRoot": "src/main/webapp",
  "projectType": "application",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "index": "src/main/webapp/index.html",
        "configurations": {
          "production": {
            "index": {
              "input": "src/main/webapp/index-prod.html",
              "output": "src/main/webapp/index.html"
            }
          }
      },
        "scripts": [

        ],
        "styles": [
          "./src/main/webapp/teststyle.css"
        ]
      }
    }
  }

该项目没有 environment.ts 文件，但 enableProdMode() 正在被调用（通过 webpack magic）并按预期运行。

我能做什么？理想情况下，我们希望不必在环境之间重建，但在这一点上，只要 index.html 文件自动更改，我就会使用它。