标签: angular6

使用Angular 6,下面是创建单例服务的首选方法:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

来自Angular doc:当您在根级别提供服务时,Angular会创建一个HeroService的单个共享实例,并注入任何要求它的类.在@Injectable元数据中注册提供程序还允许Angular通过删除服务来优化应用程序(如果事实证明它不会被使用).

也,

providers: [
    // no need to place any providers due to the `providedIn` flag...
  ]

那么,这是否意味着我们不再需要CoreModule？我们可以将服务和其他常用模块直接导入AppModule.

我正在Angular中构建应用程序,现在我运行了命令ng build --prod,它给了我一个dist文件夹.现在如何在Localhost上检查或提供该文件夹？

我正在尝试使用角度为6的以下类来处理http错误.我从服务器获得了401 unAuthorized状态.但是,我没有看到控制台错误消息.

HttpErrorsHandler.ts文件

import { ErrorHandler, Injectable} from '@angular/core';
    @Injectable()
    export class HttpErrorsHandler implements ErrorHandler {
      handleError(error: Error) {
         // Do whatever you like with the error (send it to the server?)
         // And log it to the console
         console.error('It happens: ', error);
      }
    }

app.module.ts文件

providers: [{provide: ErrorHandler, useClass: HttpErrorsHandler}],

HttpCallFile

import { Injectable , Component} from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs';
import {AuthServiceJwt} from '../Common/sevice.auth.component';

@Injectable()
export class GenericHttpClientService …

在运行我的单元测试时,有时即使它们通过,在所有测试运行结束时,我也会收到以下错误.

在运行PhantomJS的Jenkins CI构建中:

.PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown",
    "str": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown"
  }

或者在Chrome上:

Chrome 67.0.3396 (Windows 7 0.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
  }

我也有非常不可靠的测试,有时候他们没有改变任何东西会成功,有时候同样的测试会失败,所以我知道一些奇怪的事情正在发生.

我刚刚将角度项目更新为角度6.

ng build和ng服务工作,但是当我使用命令运行我的测试时:

ng test

我得到输出:

Schema validation failed with the following errors:
Data path "" should have required property 'tsConfig'.

tsconfig.json:

{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
  "es2016",
  "dom"
],
"mapRoot": "./",
"module": "es2015",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
  "../node_modules/@types"
]
}
}

我究竟做错了什么 ？

如何设置index.scss并将变量,mixins等的全局样式表导入角度6库？

Angular CLI生成具有根组件和组件scss的lib,但添加或导入到根组件的样式不可用于子组件.默认情况下,封装样式是有道理的,但我找不到任何关于如何设置它的信息或示例.

"styles": [...]可以用于此的angular.json 路径"projectType": "application"似乎"projectType": "library"也不适用.

在此先感谢您的帮助!

更新:我的项目是使用angular cli v6.0.5启动的,遵循本指南:https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

TL; DR指南:

ng new my-app --style=scss
ng generate library my-library --prefix ml

这是angular 6生成的文件结构:

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts …

我已经好几周了,我正在寻找解决方案.我创建了(使用ng生成库)一个带有UI的库,用于在这里工作的新webproject ...实际上每个component" template library"都有这个ViewEncapsulation.None集合...我知道这不是我们应该使用Angular的方式,但它会允许我们重复使用前几年所做的所有努力工作.

我希望将样式表"打包" (.css files)成library一种方式,当有人做" npm install templatelib"他/她将自动包含在他们的应用程序中的所有样式和字体时,无需手动复制styles和fonts在他们的src/app.

我希望以某种方式为我的用户提供一个原子单元,只需要template-lib-tag在他们中设置一个app.component.html并且它们都已设置好...然后他们只需要在模板设计中添加他们想要显示/使用的内容.content components

我已经尝试了几乎所有我能找到的"打包"资产,但我要么得到错误说明了Data path "" should NOT have additional properties(styles).当我尝试添加资产或风格的angular.json ...或者它不会做什么我想它做导致的错误,它无法找到资产时NG服务.

我对Angular图书馆要求太高了吗？或者是一个充满了它的库components,它们CSS不是我可以plug进入任何其他Angular应用程序的原子单元？

我做错了什么/误解,我们应该如何将资产"打包"到我们的图书馆,以便他们在安装软件包时一起旅行.

感谢您提前澄清.

我正在尝试Table with expandable rows从https://material.angular.io/components/table/examples实现,但是我收到此错误:

There can only be one default row without a when predicate function.

这个错误来自于我有两个<tr mat-row ...,都没有when谓词(如例子).如果我删除一个,则错误消失.

根据我自己的调查,我发现此功能对于Material来说是新功能.我升级到@ angular/material @ latest和@ angular/cdk @ latest,我仍然遇到错误.

有没有人知道我必须做什么来实现表,如文档中的示例？https://material.angular.io/components/table/examples

我的版本:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.1
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.3.1 …

我正在使用angular6,在我的项目中我使用Facebook Account Toolkit进行移动验证.

我需要使用以下代码在index.html文件中初始化Account toolkit.

  AccountKit.init({
   appId:"XX",
   state:"xx",
   version:"v1.2",
   fbAppEventsEnabled:true,
   debug:true
 });

问题是,appId和状态的值根据环境(开发/测试/生产)而变化.

如何在index.html文件中使用环境变量.

如果有人有角度6的解决方案,请告诉我.

提前致谢.

将应用程序从5号角迁移到6号角后，运行ng时会弹出以下错误。

模式验证失败，并出现以下错误：数据路径“”不应具有其他属性（项目）。错误：模式验证失败，并出现以下错误：数据路径“”不应具有其他属性（项目）。在MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [作为项目]（... / TemplateApp / me-cmf-web-template-angular / node_modules / @ angular-devkit / core / src / workspace / workspace中。 js：210：42）在MergeMapSubscriber._tryNext（/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27 ）（位于MergeMapSubscriber.Subscriber._next（... / me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js：55：18）中。

我假设错误与.angular.json文件有关，该文件是从.angular-cli.json重命名的。

我的.angular.json文件如下：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "mediaweb"
    },
    "apps": [{
            "root": "src",
            "outDir": "dist/browser",
            "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.scss",
                "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
                "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
                "../node_modules/video.js/dist/video-js.css"
            ],
            "scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/owl.carousel/dist/owl.carousel.js",
                "../node_modules/video.js/dist/ie8/videojs-ie8.js",
                "../node_modules/video.js/dist/video.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": …