标签: angular6

更新到Angular 6.0.1后,我收到以下错误ng serve:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
    at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update说一切都井然有序.删除node_modules文件夹和全新npm install安装也没有帮助.

我的项目基于[ng2-admin(Angular4版本)].(https://github.com/akveo/ngx-admin)这是我的package.json dependecies:

 "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "amcharts3": "github:amcharts/amcharts3",
    "ammap3": "github:amcharts/ammap3",
    "angular-table": "^1.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6", …

打字稿代码:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

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

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

}

错误信息:

错误TS2307:找不到模块'rxjs-compat/Observable'.node_modules/rxjs/observable/of.d.ts(1,15):错误TS2307:找不到模块'rxjs-compat/observable/of'.src/app/hero.service.ts(2,10):错误TS2305:模块'"F:/ angular-tour-of-heroes/node_modules/rxjs/Observable"'没有导出成员'Observable'.src/app/hero.service.ts(15,12):错误TS2304:找不到名称'of'.

package.json Angular版本的文件:

我正在尝试将Angular 5.2应用程序更新为Angular 6.我成功地遵循了Angular更新指南中的说明(包括更新angular-cli到v6),现在我正在尝试通过

ng serve --env=local

但这给了我错误:

未知选项:' - env'

我使用多个环境(dev/local/prod),这就是它在Angular 5.2中的工作方式.如何在Angular 6中设置环境？

我已经阅读了文档,其中说如果我想使用,scss我必须运行以下命令:

ng set defaults.styleExt scss

但是,当我这样做并生成该文件时,我仍然在我的控制台中收到此错误:

ng set defaults.styleExt scss

我该如何解决？

运行我的应用程序时出现此错误。这是我的申请的详细信息。

我已经尝试过清理缓存。

在Angular Material Design 6中,删除了(更改)方法.当用户更改选择时,我无法找到如何替换更改方法以执行组件中的代码谢谢!

在Angular CLI中生成服务时,它会添加带有'provided in'属性的额外元数据,其默认值为'root',用于Injectable装饰器.

@Injectable({
  providedIn: 'root',
})

究竟做了什么？我假设这使得服务可用作整个应用程序的"全局"类型单例服务,但是,在AppModule的提供者数组中声明此类服务会不会更清晰？

更新:

对于其他任何人,以下段落也提供了另一个很好的解释,特别是如果您想要仅为功能模块提供服务.

"现在有一种新的,推荐的方法,使用新的provideIn属性直接在@Injectable()装饰器中注册提供者.它接受'root'作为值或应用程序的任何模块.当你使用'root ',您的注入将在应用程序中注册为单例,并且您不需要将其添加到根模块的提供者.同样,如果您使用providedIn:UsersModule,注入可注册为UsersModule的提供者无需将其添加到模块的提供者." - https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

更新2:

经过进一步调查,我认为它只是有用 @Injectable()

如果要在除根模块之外的任何模块中提供服务,那么最好在功能模块的装饰器中使用providers数组,否则您将受到循环依赖性的困扰.这里有趣的讨论 - https://github.com/angular/angular-cli/issues/10170

在最新版本的Angular 6中,使用providedIn服务元数据中的属性在模块中注册服务:

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

但是文档仍然指的是providers在模块元数据中注册模块数组中的服务,就像我们在Angular 5中一样:

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

那么应该使用哪种方法使注入器知道它应该注入的服务&模块提供者的数组方法是否会被弃用？

在Angular 2.0.0中,我正在测试使用Router的组件.但是我得到'提供的参数与呼叫目标的任何签名都不匹配'.错误.在spec.ts中的Visual Studio代码中,新的Router()以红色突出显示

如果有人能让我知道正确的语法是什么,我真的很感激？提前致谢.我的代码如下:

spec.ts

import { TestBed, async } from '@angular/core/testing';
import { NavToolComponent } from './nav-tool.component';
import { ComponentComm } from '../../shared/component-comm.service';
import { Router } from '@angular/router';

describe('Component: NavTool', () => {
  it('should create an instance', () => {
    let component = new NavToolComponent( new ComponentComm(), new Router());
    expect(component).toBeTruthy();
  });
});

组件构造函数

constructor(private componentComm: ComponentComm, private router: Router) {}

因为我创建了@Directiveas SelectableDirective,我有点困惑,关于如何将多个值传递给custom指令.我已经搜索了很多,但没有得到适当的解决方案在Angular与Typescript.

这是我的示例代码:

父组件为MCQComponent:

import { Component, OnInit } from '@angular/core';
import { Question } from '../question/question';
import { AppService } from '../app.service/app.service';
import { SelectableDirective } from '../selectable.directive/selectable.directive';
import { ResultComponent } from '../result-component/result.component';

@Component({
    selector: 'mcq-component',
    template: "
         .....
        <div *ngIf = 'isQuestionView'>
            <ul>
                <li *ngFor = 'let opt of currentQuestion.options' 
                    [selectable] = 'opt'
                    (selectedOption) = 'onOptionSelection($event)'>
                    {{opt.option}}
                </li>
            </ul>
            .....
        </div>

    "
    providers: [AppService],
    directives: [SelectableDirective, …