相关疑难解决方法(0)

我试图理解Angular(有时称为Angular2 +),然后我遇到了@Module:

1. 进口

2. 声明

3. 供应商

遵循Angular快速入门

当我们在应用程序的根模块中导入BrowserModule时,我们可以使用NgIf和NgFor(在急切加载的组件中).但对于延迟加载的模块,我必须导入已由root的BrowserModule导出的CommonModule.为什么我们必须在延迟加载的模块中再次导入它？

我在AppModule中有RoomsComponent,它的路由是/ rooms.此外,我有一个懒惰的模块CompaniesModule与组件CompaniesComponent与路由/公司.

当我从AppModule重用RoomsComponent时,我正在尝试构建类似/ companies/{company_id}/rooms /的路由.

我不能这么做很长的RoomsComponent没有在CompaniesModule中声明,但这会引发一个错误,因为组件不能在多个模块中声明.

嗨我使用角度6,我的代码如下:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';




import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';


import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
//import { MaterialModule } from 'src/app/et-shared/material.module';


const modules = [
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
];

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    RouterModule,
    AppRoutingModule, …

我是使用Angular 4的新手.我正在尝试在角度4中练习模型驱动的表单,但它不断得到这个错误.

模板解析错误:无法绑定到'formGroup',因为它不是'form'的已知属性.("] [formGroup] ="form"(ngSubmit)="onSubmit(form.value)">"):ng:///ComponentsModule/AdsComponent.html@71:38错误:模板解析错误:无法绑定'formGroup',因为它不是'form'的已知属性.("] [formGroup] ="form"(ngSubmit)="onSubmit(form.value)">

我试着搜索它如何解决的问题.大多数情况下,解决方案是在模块中导入ReactiveFormsModule.这是我的component.ts中的代码

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                                                                                                                                           


@Component({
  templateUrl: 'ads.component.html'
})
export class AdsComponent {
    form;
    ngOnInit() {
        this.form = new FormGroup({
            ads_name: new FormControl("Hello Ads!")
        });
    } 

  constructor(
    private http: HttpClient
    ) {

   }

   onSubmit = function(user) {
        console.log(user);
   }

}

这是我的component.html中的代码

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
   <div class="form-group row">
       <label class="col-md-3 form-control-label" …

在Angular文档中,它说模块共享一个编译上下文.

NgModules为其组件提供编译上下文.根NgModule始终具有在引导期间创建的根组件,但任何NgModule都可以包含任意数量的其他组件,这些组件可以通过路由器加载或通过模板创建.属于NgModule的组件共享编译上下文.

资源

我这里只找到一个解释.但我并不完全理解它或它的重要性.有人可以详细说明"编译上下文"的含义以及模块共享相同上下文的重要性吗？

我正在我的 AppModule 中导出一个自定义组件，但不能在另一个模块中使用它，该模块正在 AppModule 中导入。我认为导出的组件是全局可见的？

我正在尝试在 TestModule 的组件中使用带有选择器“app-calendar”的 CalendarComponent。

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

测试模块.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

测试组件.html

<app-calendar></app-calendar>

控制台抛出“app-calendar”不是已知元素（不是模块的一部分）的错误

我错过了什么？

我创建了一个如下所示的共享模块。我在某处读到进口订单很重要，但我现在找不到那个链接。在某些地方它工作正常，但在其他地方我收到错误。我想知道这些模块需要的顺序以避免任何错误。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import 'hammerjs';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';

// NOTE: The import order matters.
const modules = [
  CommonModule,
  CoreModule,
  ReactiveFormsModule,
  FormsModule,
  HttpClientModule,
  MaterialModule,
  FlexLayoutModule,
];

@NgModule({
  imports: modules,
  exports: modules
})
export class DependenciesModule { }

我正面临着这个令人沮丧的问题

没有指令将"exportAs"设置为"ngForm"("
] #f ="ngForm"(ngSubmit)="onSubmit(f)"class ="form-horizo​​ntal">"):ng:/// ComponentsModule/EquipeComponent.html@8:12错误:模板解析错误:没有指令将"exportAs"设置为"ngForm"("] #f ="ngForm"(ngSubmit)="onSubmit(f)"class ="form- horizo​​ntal">"):ng:///ComponentsModule/EquipeComponent.html@8:12

这是我的app.module.ts包含的内容

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } …

我将更大的应用程序划分为模块(功能模块,核心模块和共享模块).我正在使用Angular Material,因此我导入了BrowserAnimationsModule.我把它放在共享模块中,一切正常,但是当我想延迟加载一些功能模块时出现问题 - 然后我有关于双重导入BrowserModules的错误.我知道BrowserAnimationsModule应该由Core Module导入,但是当我尝试这样做时,我会收到以下错误:

Uncaught Error: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("' | …

我有一个角度路由,在其中一个组件中我有简单的登录表单,并在模板中提供formGroup,它显示上面的错误.

步骤:在app模块中导入ReactiveFormsModule.

在路由组件中:

app.routingmodule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule …

我因自己的问题陷入困境... https://embed.plnkr.co/UparfJDomOECGJfWSbqA/ 简短：我无法测试我的组件，它似乎无法通过container.component.spec.ts:43-但是如果没有fixture.detectChanges()，ngAfterViewInit将无法启动。我看不到我在做什么错。

我想使用指令属性将组件动态加载到ng-template中，并且该解决方案确实有效，但是我无法为其编写有效的测试。既然我对单元测试还很陌生...那是我什至应该测试的东西-我认为是的。（是的，我阅读了angular.io测试指南，以及其他一些;-)）错误TypeError: Cannot read property 'viewContainerRef' of undefined似乎是指向@ViewChild没有ViewChild的人。