Question

我使用loadChildren语法在Angular 2项目中设置了延迟加载。我遇到的问题是，在创建块之后，浏览器似乎不知道在哪里查找它们。它总是尝试从根目录加载块，例如http://localhost:55626/1.chunk.js。这当然不是他们存储的地方。

我已经能够通过使用.NET捆绑器捆绑块来解决这个问题，但是这当然意味着它们在开始时都被加载并且无法使用延迟加载的目的。我猜这是一个问题，网络包默认错误地查找ng build期间创建的块，但我对此没有信心，即使我是对的，据我所知，使用angular-cli构建的项目目前不支持自定义webpack.config.js。

任何人都可以对这个问题有所了解吗？谢谢！

我正在使用Angular 2.4.6。

编辑：为了澄清，我使用angular-cli构建了这个项目，它不支持自定义webpack.config文件，每https://github.com/angular/angular-cli/issues/1656#issuecomment-240171375

Answer 1

It turns out there is a setting in the angular-cli.json file that controls this:

{
  "apps": [
    {
      "deployUrl": "./path/to/files/"
    }
  ]
}

I believe deployUrl should point to the sources output by ng build so they can be bundled up as needed by angular-cli. Note that the path must end in a slash ("/") for lazy-loading to work.

Adding this property fixed the problem for me and I am now loading as lazily as I do everything else.

See https://github.com/angular/angular-cli/issues/5652
之间的关系

Answer 2

可以通过使用angular2-router-loader配置webpack来找到块。这样做：

安装angular2-router loader

npm install --save-dev angular2-router-loader

将加载程序添加到您的webpack

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      ‘awesome-typescript-loader’, 
      ‘angular2-template-loader’, 
      ‘angular2-router-loader’]
   },
   ...
]

然后，webpack应该自动知道如何加载和查找你的块。

如何更改延迟加载Angular 2查找块的位置？

2 个答案: