Question

我正在尝试使用ng命令构建Angular4应用程序。

我可以使用ng服务构建和运行。

我想加载Angular4应用程序以使用RequireJS加载/运行。我搜索了很多，但无法找到任何教程。以下是样本： -

＆＃13;

<script type="text/javascript">
require.config({
paths: {
'vendor':'vendor.eabc4b1001d9d0dc5a72',
'polyfills':'polyfills.eabc4b1001d9d0dc5a72',
'app':'app.eabc4b1001d9d0dc5a72',
'styles':'styles.eabc4b1001d9d0dc5a72'
         }
  });
</script>

＆＃13;

请建议解决方法并提供一些教程来克服这个问题。

提前致谢。

Answer 1

我终于找到了解决方案，因为'ng build'使用webpack在dist文件夹下构建文件，并通过放置未知/由lagacy javascript应用程序导入的webpackJsonp来缩小其输出库。我创建了webpack配置并删除了新的'webpack.optimize.CommonsChunkPlugin'，以便为所有vendor.js，main.js，polyfill.js构建简单的js文件，这些文件现在可以通过lagacy javascript应用程序轻松加载/导入。感谢。

以下是webpack常见示例： -

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        // 'vendor': './src/vendor.ts',
        'app': './src/main.ts',
        'styles': './src/styles.scss'
    },

    resolve: {
        extensions: ['.js', '.ts'],
        modules: ['node_modules']
    },

    resolveLoader: {
        modules: ['node_modules']
    },

    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
            // loaders: ['to-string-loader', 'css-loader'],
        }, {
            test: /\.css$/,
            include: helpers.root('./src', 'app'),
            // loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'to-string-loader']
            loader: 'raw-loader'
        },  
        {
          test: /\.scss$/,
           use: [
                { loader: "to-string-loader"},
                { loader: "to-string" },
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ]
      },

      ]
    },

    plugins: [
    // comment code so that webpack generate simple js file output <====
       // new webpack.optimize.CommonsChunkPlugin({
        //    name: ['app', 'vendor', 'polyfills']
     //   }),

      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('./src'), // location of your src
        {} // a map of your routes
      ),

      new webpack.ContextReplacementPlugin(
        /\@angular(\\|\/)core(\\|\/)esm5/, helpers.root('./src')
      ), // Workaround for https://github.com/angular/angular/issues/20357


        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

使用RequireJS加载Angular 4项目

1 个答案: