相关疑难解决方法(0)

我使用html-loader加载我的html模板和文件加载器来加载模板中的图像.这在dev中运行得很好但是当我运行build:prod并运行输出时,我得到一个模板解析错误.

似乎所有angular2内置指令(例如,*ngFor,*ngIf)都被转换为全部小写(例如,*ngfor,*ngif),这些都是错误的例子.

我尝试创建一个单独的项目,这一次,不使用角度2的任何内置指令,一切正常.

我可以使用另一台装载机吗？如何正确加载这些模板以及这些模板使用的图像？

这是我的webpack.config

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry:'./src/main.ts',

    output:{
        path:'./dist',
        filename:'app.bundle.js'
    },
    module:{
        loaders:[{test:/\.ts$/, loader:'ts-loader'},
        { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'html-loader' },
      {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader"},
      //{ test: /\.html$/, loader: 'raw-loader' },
      //{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
      ]

    /*   loaders: [
      // .ts files for TypeScript
      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, …

我正在尝试使用enum. 这是Stackblitz 演示。

我直接从另一个工作 stackblitz 实现中获取了代码，所以我不确定为什么会出现错误：

模板解析错误：无法绑定到“formControl”，因为它不是“select”的已知属性。("][formControl]="control"> {{filter}"):

我无法在我的 mat-select 中使用 formControl。

我将从文件中删除所有不必要的数据。

这是我的 package.json

"dependencies": {
  "@angular/cdk": "5.0.4",
  "@angular/common": "~5.2.0",
  "@angular/compiler": "~5.2.0",
  "@angular/core": "~5.2.0",
  "@angular/flex-layout": "2.0.0-beta.12",
  "@angular/forms": "~5.2.0",
  "@angular/material": "5.0.4"
}

文件夹结构：

-src
  -app
    -myComponent
      -myComponent.component.html
      -myComponent.component.ts
      -myCompnent.module.ts
    -shared
      -material
         -material.module.ts
      -shared.module.ts

material.module.ts：

import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material';


@NgModule({
 providers: [],
 imports: [
    FormsModule
 ],
 exports: [
   MatSelectModule
 ]
})
 export class CustomMaterialModule {
}

共享模块.ts

import { CustomMaterialModule } from './material/material.module';

@NgModule({
  exports: [
    CustomMaterialModule
  ],
  declarations: []
}) …