小编ism*_*tro的帖子

我正在开发一个github存储库(带有角度4和angular-cli),我有一些测试,Karma和Jasmine在master分支中工作.

现在我正在尝试添加延迟加载功能,我已经创建了一个新的分支,你可以在这里看到.

问题是,之前的测试,现在他们没有.这很有趣,因为只有延迟加载模块的测试失败了......

这是代码和错误:

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

错误是这样的:

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal …

我正在寻求有关在 Angular 14 中使用独立组件和模块的最佳实践的澄清。考虑到独立组件作为 Angular 中的一个新概念引入，我正在寻找由引文或参考文献支持的事实指导。

我仅使用具有延迟加载路线的独立组件创建了一个新的整个应用程序，并且一切都运行良好。这里是仓库： https: //github.com/Ismaestro/angular-example-app

然而，我很好奇这是否表明可能会转向独立组件，从而导致 NgModule 过时。

有人可以提供基于证据的见解，了解在 Angular 14 中使用独立组件与模块的优缺点吗？

感谢你的贡献。

当我运行lint时，它说：

subscribe is deprecated: Use an observer instead of an error callback

代码（来自带有angular-cli的angular 7应用）：

subscribe is deprecated: Use an observer instead of an error callback

不确切地知道我应该使用什么以及如何使用...

谢谢！

我正在开发一个Github回购,它遵循Angular(英雄之旅)的官方教程.您可以在此处查看所有代码:https: //github.com/Ismaestro/angular7-example-app

我的问题是,我在应用程序的主模块(app.module)中声明了一个指令,如果我在AppComponent中使用它,它运行良好(该指令只突出显示DOM元素内的文本).

但我在AppModule中有另一个名为HeroesModule的模块,在该模块的一个组件内,该指令不起作用.主要代码,这里:

应用程序/ app.module.ts

...

import { HighlightDirective } from "./shared/highlight.directive";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        CoreModule,
        HeroesModule
    ],
    declarations: [
        AppComponent,
        HeroTopComponent,
        HighlightDirective <-------
    ],
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ],
    bootstrap: [ AppComponent ]
})

...

应用程序/英雄/ heroes.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroRoutingModule
    ],
    declarations: [
        HeroListComponent,
        HeroSearchComponent,
        HeroDetailComponent,
        HeroFormComponent
    ],
    providers: [
        HeroService
    ],
    exports: [
        HeroSearchComponent
    ]
})

应用程序/共享/ highlight.directive.ts

import { Directive, ElementRef, Input …

我在组件内部有这个:

private formBuilder: FormBuilder

...

signupForm: FormGroup;

...

this.signupForm = this.formBuilder.group({
  'name':             [null, Validators.required],
  'account':          this.formBuilder.group({
    'email':          [null, [Validators.required, ...]],
    'confirm_email':  [null, Validators.required],
  }, {validator: ValidationService.emailMatcher}),
  'password':         [null, [Validators.required,...]]
});

我想设置电子邮件字段的值.我试过这个,但没有运气:

this.signupForm.patchValue({'email': 'myvalue@asd.com'});

但是这个值是嵌套的,所以在这种情况下,sintax是什么？我也尝试过:

this.signupForm.patchValue({'account.email': 'myvalue@asd.com'});

也在这里搜索:

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#patchValue-anchor

谢谢

问题是我在forRoot方法中调用了一个函数,如下所示:

app.module.ts

import {environment} from '../environments/environment';

...

@NgModule({
  imports: [
    BrowserModule,
    MyModule.forRoot({
      config: {
        sentryURL: environment.SENTRY_URL <-- This, calls the function
      }
    }),
    HttpClientModule,
    ...
 ]})

environemnt.ts

export function loadJSON(filePath) {
  const json = loadTextFileAjaxSync(filePath, 'application/json');
  return JSON.parse(json);
}

export function loadTextFileAjaxSync(filePath, mimeType) {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', filePath, false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status === 200) {
    return xmlhttp.responseText;
  } else {
    return null;
  }
}

export const …

我对这个规则(templates-use-public)和WebStorm有些麻烦.你可以在这里看到它:

这条规则的主要目的是什么？怎么了？

我可以使用Angular CLI有条件地加载脚本吗？

在这个文件中,我想根据环境或变量加载一个脚本.所以在生产中我想在开发时加载脚本而不是.有没有办法做到这一点？怎么样？

角cli.json

...
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.js",
    "../node_modules/web-animations-js/web-animations.min.js",
    <---- LOAD HERE ONE SCRIPT DEPENDING ON ENVIRONMENT OR VARIABLE 
  ],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 ...

我在SimpleXML和PHP中使用它:

foreach ($xml->children() as $node) {
    echo $node->attributes('namespace')->id;
}

这将打印id所有节点的属性(使用命名空间).

但现在我想知道$nodeXML文件中的行号.

我需要行号,因为我正在分析XML文件,并返回可能问题的用户信息来解决它们.所以我需要说一句:"这里你在第X行有一个错误".我确信XML文件将采用标准格式,这将有足够的换行符以使其有用.

我正在为 Angular2使用ng2-file-upload模块，我想要一个拖放区域，同时可以在该区域中单击并选择单个文件。

在他们的例子中，它是分开的，没有两个一起的例子。例如：

<div ng2FileDrop
     [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
     (fileOver)="fileOverBase($event)"
     [uploader]="uploader"
     class="well my-drop-zone">
     Base drop zone
</div>

Single
<input type="file" ng2FileSelect [uploader]="uploader" />

谢谢！

我有这个代码：

export class ProgramComponent implements OnInit {
   @Input() events: Observable<any>;
   eventsSubscription: any;
   ...
   ngOnInit() {
      this.eventsSubscription = this.events.subscribe((event) => {
          ... <- Some code that I want to test!!!!
          console.log("The test doesn't get past here!!!!");
      });
   }
}

describe('BLA BLA BLA', () => {
   let component: ProgramComponent;
   let fixture: ComponentFixture<ProgramComponent>;

   beforeEach(async(() => {
       TestBed.configureTestingModule({
          imports: [
              ...
          ],
          declarations: [ProgramComponent],
          providers: [
              ...
          ]
       }).compileComponents();
    }));

    beforeEach(() => {
       fixture = TestBed.createComponent(ProgramComponent);
       component = fixture.componentInstance;

       // HERE I WANT TO …

我正在使用这个,从这里:

constructor(private heroService: HeroService,
    private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
    const heroId = this.activatedRoute.snapshot.paramMap.get('id');
    this.heroService.getHeroById(heroId).subscribe((hero: Hero) => {
        ...
    });
}

现在我有一个需要模拟这个ActivatedRoute的单元测试.我已经在stackoverflow中检查了一些答案,但没有运气.

请注意,我正在使用snapshot.paramMap,因此很多解决方案根本无法使用.例如,这个,这个,这个不起作用.

我认为近乎有效的答案可能是:

{
    provide: ActivatedRoute,
    useValue: {paramMap: Observable.of(convertToParamMap({id: 1}))}
}

但也不起作用.

显示的错误是:

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///HeroesModule/HeroDetailComponent_Host.ngfactory.js'.
    error properties: Object({ INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, …