标签: angular-module

假设存在一个用普通Javascript编写的Javascript库,并且常用于vanilla,非框架网站.如何创建一个可以轻松npm install编辑的Angular库,使库无缝地在Angular应用程序中使用？

我无法在Angular文档或更广泛的网络上找到任何关于此过程的良好演示.

例如,有一个很棒的Javascript库被调用p5.js,这与Angular一起使用并不简单.如何创建一个Angular模块,您可以将其简单地导入到您自己的Angular模块中,并使用Angular支持的所有强大功能？

我无法使指令在延迟加载的模块中工作.我已经阅读了文档,我只是将指令添加到主模块的声明数组中.该指令在该模块中按预期工作,但它在延迟加载的模块中不起作用.它甚至可以防止因模板错误而打开延迟加载的模块:

Can't bind to 'myHighlight' since it isn't a known property of 'p'

这是我的Plunker.

点击"转到孩子"后查看控制台中的错误

在Angular 5中,如果我拥有AbstractClassService并ExtendedClassService扩展了抽象,我可以在我的NgModule的providers数组中执行此操作:

@NgModule({
  providers: [
    {provide: AbstractClassService, useClass: ExtendedClassService}
  ]
})
export class AppModule {}

这将允许我切换ExtendedClassService到另一个进行测试或任何非常容易的.这仍然可以使用Angular 6完成,但是providedIn可以在服务本身中设置新选项以减少包大小:

@Injectable({providedIn: 'root'})
export class ExtendedClassService extends AbstractClassService {}

有没有办法让我在使用新的时候完成与Angular 5相同的操作providedIn？像这样的东西:

@Injectable({providedIn: 'root', provide: AbstractClassService})
export class ExtendedClassService extends AbstractClassService {}

我已将不断增长的ng2应用程序升级到RC5,并将所有组件/管道放入一个胖主模块中.为了对抗臃肿,我试图将我的应用程序分成单独的模块(同时着眼于最终进行延迟加载).

这是我创建的子模块,其中包含一些通用组件:

我-shared.module.ts

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule
  ],
  declarations: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent

  ],
  providers: [
      provideForms(),
      disableDeprecatedForms()
  ]

})
export class MySharedModule { }

到现在为止还挺好.现在我想在主app.module.ts中引用这个MySharedModule,我正在做这样的事情:

import { NgModule } …

我正在开发一个实现了延迟加载的Angular应用程序.我试着尝试延迟加载,但我决定不想在我的应用程序中实现它.这是我的app.module.ts:

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'hq', loadChildren: 'app/hq/hq.module#HqModule' },
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ]),
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }

如何切换路线,例如hq恢复正常加载？我期望以下内容可行:

  { path: 'hq', redirectTo: HqModule }

然而,这会返回我的模块是一种错误的参数类型.这在Angular中甚至可能吗？

hq.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
        { path: '',
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            { path: '', pathMatch: 'full', redirectTo: 'overview' },
            { …

我在用什么

• 角

我想做什么

• 我有一个我想在多个模块中重用的加载组件

我做了什么

• 我创建了一个名为'loading-overlay'的新模块

• 在这个模块中,我导出了叠加组件

• 我将此模块添加到app.module

• 将组件添加到多个模块时,我收到以下错误:

类型LoadingOverlayComponent是2个模块的声明的一部分:LoadingOverlayModule和ProjectsModule!请考虑将LoadingOverlayComponent移动到导入LoadingOverlayModule和ProjectsModule的更高模块.您还可以创建一个新的NgModule,它导出并包含LoadingOverlayComponent,然后在LoadingOverlayModule和ProjectsModule中导入该NgModule.

• 我已经尝试从app.module中删除它并将其导入我需要的其他模块而没有太多运气.我必须遗漏一些明显的东西.

叠加模块

// Modules
import { NgModule } from '@angular/core';

// Components
import { LoadingOverlayComponent } from './loading-overlay.component';



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Routing
import { AppRouting } from './routing/app-routing';

// Modules
import { …

我想创建一个功能模块来处理上传的前端。

upload.component.html 没有错误。

<input
  type="file"
  #file
  style="display: none"
  (change)="onFilesAdded()"
  multiple
/>

<button mat-raised-button (click)="openUploadDialog()">Upload</button>

upload.component.ts 2 错误 - 导入上传和对话框组件

import { Component } from '@angular/core'
import { MatDialog } from '@angular/material'
import { DialogComponent } from './dialog/dialog.component'
import { UploadService } from './upload.service'

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css'],
})
class UploadComponent {
  constructor(public dialog: MatDialog, public uploadService: UploadService) {}

  public openUploadDialog() {
    let dialogRef = this.dialog.open(DialogComponent, {
      width: '50%',
      height: '50%',
    })
  }
}

upload.module.ts 3个错误，导入DialogComponent、上传服务、上传组件

import { …

angular.module('mod1', [])
  .directive('myDir', ($timeout) => {
    return {
      ///....
    }
  });

angular.module('myApp', ['mod1'])

<html ng-app="myApp">

<body>
  <my-dir valu='blablabla' />
</body>

</html>

那为什么这不起作用呢？并说未知提供者:$compileProvider,

但如果我将指令移入myApp模块就可以了

我已经习惯了Angular 2,但我有一些关于app.module.ts文件的问题.

• 为什么我必须在此文件中执行导入,因为我将在app.components.ts文件中再次执行输入.

例如:我导入我的自定义管道,然后我必须在我的app.components.ts文件中导入它

import { FirstPipePipe } from './first-pipe.pipe';

@NgModule({
     declarations: [
       AppComponent,
       SecondComponent,
       ThirdComponent,
       FirstComponent,
       FirstPipePipe
     ],
     imports: [
       BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
     ],
     providers: [FetchDataService],
     bootstrap: [AppComponent]    })

然后我有了

imports: [
           BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
         ],

为什么我要导入一些类而不是其他类？

为什么这里的提供者再次出现在 app.component.ts中

providers: [FetchDataService]

基本上,我必须重写app.component.ts文件中的所有内容.

app.module.ts的目的是什么？

我想导入所有角度材料模块并用于整体角度项目模板。