Angular2:找不到名字'require'

时间:2017-05-11 09:25:52

标签: angular webpack ng-bootstrap

我正在使用angular2和webpack,我收到错误:

  

[at-loader]中的错误   ./assets_dev/ts/demo/components/accordion-basic.ts:5:15       TS2304:找不到名称'require'。

问题来自于引用模板网址:templateUrl: './accordion-basic.html'Source

根据这个article我需要包含这个脚本:

declare var require: {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

但我看其他配置但找不到它。

我的代码:https://drive.google.com/open?id=0B786MNgT3bFmT2dtMlBrLXg1Y3M

这是我的webpack文件:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './assets_dev/ts/polyfills.ts',
        'vendor': './assets_dev/ts/vendor.ts',
        'demo-client': './assets_dev/ts/demo/main.ts'
    },
    output: {
        filename: './assets/js/[name].js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
          {
              test: /\.ts$/,
              loaders: [
                {
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: './assets_dev/ts/tsconfig.json' }
                }, 'angular2-template-loader'
              ]
          },
          {
              test: /\.html$/,
              use: 'html-loader'
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
              loader: 'file-loader?name=assets/[name].[hash].[ext]'
          }
        ]
    },

    plugins: [
      // Workaround for angular/angular#11580
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
       './assets_dev/ts', // location of your src
        {} // a map of your routes
      ),

      new webpack.optimize.CommonsChunkPlugin({
          name: ['demo-client', 'vendor', 'polyfills']
      })
    ]
};

这是我的package.json:

{
  "name": "dromar-styleguide",
  "version": "0.0.3",
  "main": "Gruntfile.js",
  "devDependencies": {
    "@types/node": "^7.0.18",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^2.28.0",
    "typescript": "^2.3.2",
    "webpack": "^2.5.1"
  },
  "scripts": {},
  "dependencies": {
    "@angular/common": "^4.1.1",
    "@angular/compiler": "^4.1.1",
    "@angular/forms": "^4.1.1",
    "@angular/http": "^4.1.1",
    "@angular/platform-browser": "^4.1.1",
    "@angular/platform-browser-dynamic": "^4.1.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "core-js": "^2.4.1",
    "dromar-styleguide": "^0.0.3",
    "rxjs": "^5.4.0",
    "zone.js": "^0.8.4"
  }
}

0 个答案:

没有答案