Question

我的目标是在Angular 2项目中使用外部JavaScript库。为此，有两种方法：

1）在我的文件中声明这些变量（它们将在运行时出现在环境中），如下所示：

declare var numbro: any; // in my Component

我在index.html

中添加了这样的numbro.js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>APP Angular 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../node_modules/numbro/numbro.js"></script>
    <base href="/">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

2）另一种解决方案是在TypeScript中使用它们的声明文件（如果它们已经存在）

这里的问题是并非所有JavaScript库都支持TypeScript，并且为我想在项目中使用的每个库创建声明文件似乎不是一个好主意。因此，我决定采用第一种方式。在我遇到这个错误之前，一切似乎都很好：

原始例外：未定义要求

这是我的webpack配置：

＆＃13;

'use strict';

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const webpack = require('webpack');

const communConfig = require('./webpack-commun.config.js');

module.exports = function(options) {
  const hotModuleReplacementPlugin = new webpack.HotModuleReplacementPlugin();
  const commonsChunkPlugin = new CommonsChunkPlugin({
    name: [ 'vendor', 'polyfills' ]
  });
  const htmlPlugin = new HtmlWebpackPlugin({
    template: options.html
  });

  return merge(communConfig(options), {
    entry: {
      polyfills: options.polyfills,
      vendor: options.vendor,
      app: [
        `webpack-dev-server/client?http://localhost:${options.port}`,
        'webpack/hot/only-dev-server',
        options.entry
      ]
    },

    output: {
      path: options.outputDir,
      publicPath: `http://localhost:${options.port}`,
      filename: '[name].js',
      chunkFilename: '[id].chunk.js'
    },

    plugins: [
      hotModuleReplacementPlugin,
      commonsChunkPlugin,
      htmlPlugin
    ]
  });
};

＆＃13;

这是我的vendor.ts文件：

＆＃13;

import 'rxjs';
import 'core-js/es6';
import 'zone.js/dist/zone';

import '@angular/common';
import '@angular/compiler';
import '@angular/core';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import 'numbro';

＆＃13;

这是我的pollyfills.ts：

＆＃13;

import 'es6-shim';
import 'reflect-metadata';
import 'ts-helpers';

＆＃13;

有没有办法解决这个问题？

在Angular 2项目

0 个答案: