创建厨房水槽 Angular Material 库模板编译错误?
Creating a kitchen sink Angular Material library template compile error?
正在尝试创建一个包含所有 Angular Material 模块的库,以便在原型制作期间快速安装。
我不想将此模块复制并粘贴到项目中,而是希望 NPM 安装它:
// material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
const mm = [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
]
@NgModule({
imports: [ ...mm ],
exports: [...mm
],
providers: [
]
})
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders<MaterialModule> {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
}
}
}
所以我创建了一个新的工作区ng new workspace --create-application=false
。
以及该工作区内的一个模块 ng g library material-module
。
除了上面粘贴的模块,我删除了所有内容。
库的 package.json
文件如下所示:
{
"name": "@fireflysemantics/material-module",
"version": "1.0.2",
"peerDependencies": {
"@angular/common": "*",
"@angular/core": "*",
"@angular/cdk": "*",
"@angular/material": "*",
"tslib": "*"
},
"dependencies": {}
}
已安装对等依赖项。
当我尝试 运行 构建时,它会生成如下错误:
ERROR: @angular/forms/forms.ts(141,38): Error during template compile of 'NG_VALUE_ACCESSOR'
Function calls are not supported in decorators but 'InjectionToken' was called.
@angular/forms/forms.ts(141,38): Error during template compile of 'NG_VALUE_ACCESSOR'
Function calls are not supported in decorators but 'InjectionToken' was called.
有什么想法吗?
I 运行 ng add @angular/material
里面的库项目。显然这导致了这个问题。我尝试了一个 b运行d 新项目,在根级别添加了 Angular Material 并修复了它。
正在尝试创建一个包含所有 Angular Material 模块的库,以便在原型制作期间快速安装。
我不想将此模块复制并粘贴到项目中,而是希望 NPM 安装它:
// material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
const mm = [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
]
@NgModule({
imports: [ ...mm ],
exports: [...mm
],
providers: [
]
})
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders<MaterialModule> {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
}
}
}
所以我创建了一个新的工作区ng new workspace --create-application=false
。
以及该工作区内的一个模块 ng g library material-module
。
除了上面粘贴的模块,我删除了所有内容。
库的 package.json
文件如下所示:
{
"name": "@fireflysemantics/material-module",
"version": "1.0.2",
"peerDependencies": {
"@angular/common": "*",
"@angular/core": "*",
"@angular/cdk": "*",
"@angular/material": "*",
"tslib": "*"
},
"dependencies": {}
}
已安装对等依赖项。
当我尝试 运行 构建时,它会生成如下错误:
ERROR: @angular/forms/forms.ts(141,38): Error during template compile of 'NG_VALUE_ACCESSOR'
Function calls are not supported in decorators but 'InjectionToken' was called.
@angular/forms/forms.ts(141,38): Error during template compile of 'NG_VALUE_ACCESSOR'
Function calls are not supported in decorators but 'InjectionToken' was called.
有什么想法吗?
I 运行 ng add @angular/material
里面的库项目。显然这导致了这个问题。我尝试了一个 b运行d 新项目,在根级别添加了 Angular Material 并修复了它。