Question

我已升级到angular 8并尝试使用我添加了一个新的lazyLoad路由，如下所示：

{ path: 'error', loadChildren:  () => import('./modules/errors/errors.module').then(m => m.ErrorsModule) }

不幸的是出现这样的错误

  ./src/app/app.routes.ts中的
ERROR 154：41模块解析失败：   意外令牌（154：41）您可能需要适当的加载程序来处理   此文件类型。 | canActivate：[RouteGuardService] | }
{ path: 'error', loadChildren: () => import('./modules/errors/errors.module').then(m => m.ErrorsModule) },
| {path：'**'，redirectTo：'error / 404'，pathMatch：'full'} | ];     @ ./src/app/app.module.ts 89：0-48 161：12-28 @ ./src/singleSpaEntry.ts     @ multi（webpack）-dev-server / client？http://0.0.0.0:9001     src / singleSpaEntry.ts我｢wdm｣：无法编译。

我应将哪个加载程序添加到webpack（从CLI弹出）

webpack.config文件（该应用程序是singlespa（microfrontend）的一部分）

const path = require('path');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

let webpackLoader;
let AngularCompilerPluginAttempt;
try {
  AngularCompilerPluginAttempt = require('@ngtools/webpack');
  AngularCompilerPluginAttempt = AngularCompilerPluginAttempt.AngularCompilerPlugin;
  webpackLoader = '@ngtools/webpack';
} catch (e) {
}

if (!webpackLoader) {
  webpackLoader = '@angular-devkit/build-angular/node_modules/@ngtools/webpack';
}
const AngularCompilerPlugin = AngularCompilerPluginAttempt ? AngularCompilerPluginAttempt : require('@angular-devkit/build-angular/node_modules/@ngtools/webpack').AngularCompilerPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = function (env) {
  const analyzeBundle = !!(env && env.analyzeBundle);
  const prodMode = !!(env && env.production);


  const plugins = [
    new ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.resolve(__dirname, '../src')
    ),
    new AngularCompilerPlugin({
      mainPath: path.resolve(__dirname, 'src/singleSpaEntry.ts'),
      tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
      sourceMap: !prodMode,
      skipCodeGeneration: !prodMode,
      platform: 0,
      hostReplacementPaths: {
        "environments/environment.ts": prodMode ? "environments/environment.prod.ts" : "environments/environment.ts"
      }
    }),
    new CopyWebpackPlugin([
      {from: 'src/assets', to: 'assets'},
      {from: 'src/mustUseAppFramework.html', to: 'index.html'}])
  ];

  if (analyzeBundle) {
    plugins.push(new BundleAnalyzerPlugin());
  }

  const devTypescriptLoader = [
    {
      test: /\.ts$/,
      loader: webpackLoader
    }
  ];

  const prodTypescriptLoader = [
    {
      "test": /\.js$/,
      "use": [
        {
          "loader": "@angular-devkit/build-optimizer/webpack-loader",
          "options": {
            "sourceMap": false
          }
        }
      ]
    },
    {
      test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
      use: [
        {
          "loader": "@angular-devkit/build-optimizer/webpack-loader",
          "options": {
            "sourceMap": false
          }
        },
        webpackLoader
      ]
    }
  ];

  const typescriptLoader = prodMode ? prodTypescriptLoader : devTypescriptLoader;

  return {
    entry: {
      singleSpaEntry: 'src/singleSpaEntry.ts',
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'release'),
      libraryTarget: 'umd',
      library: 'segmentation-root'
    },
    module: {
      rules: [
        {
          test: /\.polyfill\/\.js$/,
          use: [ 'script-loader' ]
        },
        {
          test: /\.html$/,
          loader: ["raw-loader", {
            loader: 'replace-string-loader',
            options: {
              search: /assets/g,
              replace: '\/seg\/assets',
              file: false
            }
          },{
            loader: 'replace-string-loader',
            options: {
              search: /\/assets/g,
              replace: 'assets',
              file: false
            }
          }]
        },
        {
          test: /\.(jpe?g|png|webp|gif|otf|ttf|woff2?|ani)$/,
          loader: "url-loader",
          options: {
            name: "[name].[hash:20].[ext]",
            limit: 10000,
            publicPath: '/seg/'
          }
        },
        {
          test: /\.(eot|svg|cur)$/,
          loader: "file-loader",
          options: {
            name: "[name].[hash:20].[ext]",
            publicPath: '/seg/'
          }
        },
        {
          test: /bootstrap\.scss$/,
          exclude: [
            path.resolve(__dirname, "src/styles.scss")
          ],
          use: [{
            loader: 'replace-string-loader',
            options: {
              search: /assets/g,
              replace: '\/seg\/assets',
              file: false
            }
          },{
            loader: 'replace-string-loader',
            options: {
              search: /\/assets/g,
              replace: 'assets',
              file: false
            }
          }, 'to-string-loader', 'style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /styles\.scss$/,
          exclude: [
            path.resolve(__dirname, "node_modules/bootstrap")
          ],
          use: [{
            loader: 'replace-string-loader',
            options: {
              search: /assets/g,
              replace: '\/seg\/assets',
              file: false
            }
          },{
            loader: 'replace-string-loader',
            options: {
              search: /\/assets/g,
              replace: 'assets',
              file: false
            }
          }, 'to-string-loader', 'style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.scss$/,
          exclude: [
            path.resolve(__dirname, "node_modules/bootstrap"),
            path.resolve(__dirname, "src/styles.scss")
          ],
          use: ['to-string-loader', {
            loader: 'replace-string-loader',
            options: {
              search: /assets/g,
              replace: '\/seg\/assets',
              file: false
            }
          },{
            loader: 'replace-string-loader',
            options: {
              search: /\/assets/g,
              replace: 'assets',
              file: false
            }
          }, 'raw-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          exclude: [
            path.resolve(__dirname, "node_modules/bootstrap"),
            path.resolve(__dirname, "src/styles.scss")
          ],
          use: ['to-string-loader', 'style-loader', 'css-loader']
        }
      ].concat(typescriptLoader)
    },
    resolve: {
      extensions: [".ts", ".js"],
      modules: [
        __dirname,
        'node_modules'
      ]
    },
    devtool: prodMode ? 'none' : 'inline-sourcemap',
    externals: [],
    plugins: plugins,
    devServer: {
      historyApiFallback: true,
      watchOptions: {aggregateTimeout: 300, poll: 1000},
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    }
  }
};

延迟加载在Angular 8和Webpack中不起作用

0 个答案: