Angular2 Webpack Lazy Loading Routes Предоставление 404

Использование RC6Angular2 Webpack Lazy Loading Routes Предоставление 404

404 ошибка для модулей, которые лениво загружаются с помощью веб-пакета.

Webpack не пакетирования ленивые загруженных модулей

Я пытался как

{path: 'admin', loadChildren: 'src/admin/config/admin.module'},

{path: 'admin', loadChildren: 'src/admin/config/admin.module#AdminModule'},

, но ничего не работает

там так или иначе сказать Webpack, что считают ленивым загружен модули для связывания вместе с фактическим модулем.

app.module

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    SharedModule.forRoot() 
], 
declarations: [ 
    AppComponent, 
    ValidateComponent, 
], 
bootstrap: [AppComponent]

app.routing

const appRoutes = [ 
{path: '', redirectTo: '/validate', pathMatch: 'full'}, 
{path: 'admin', loadChildren: 'src/admin/config/admin.module'}, 
{path: 'reader', loadChildren: 'src/reader/config/reader.module'}, 
{path: 'validate', component: ValidateComponent}]; 
export const routing = RouterModule.forRoot(appRoutes);

webpack.config.js

var webpack = require('webpack'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 
entry:{ 
    app:"./src/app/main" 
}, 
output:{ 
    filename:"./dist/app/[name].js", 
    chunkFilename: '[id].[hash].chunk.js' 
}, 
resolve:{ 
    extensions:["",".js",".ts"] 
}, 
module:{ 
    loaders:[ 
    { 
     test: /\.ts$/, 
     loaders: ['angular2-template-loader','ts-loader'], 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.html$/, 
     loader: 'html' 
    }] 
}, 
plugins: [new webpack.NoErrorsPlugin()]

index.html

<body> 
    <archive id="recordsApp" class=""> Loading...</archive> 
    <div id="loading"> 
     <center> 
      <img id="loadingImg" class="shadowImg" src="assets/images/loading.gif"> 
     </center> 
    </div> 
    <script src="dist/app/app.js"></script> 
</body>

источник

2016-09-13 Satish Pokala

У меня есть вопрос, правда, chunkFilename: '[id]. [Hash] .chunk.js' имеет реальный эффект? он создал несколько js-файлов для каждого модуля? – Ayyash

Это помогает устранить проблему, и я использую машинописный 2.0.2

require('es6-promise!./crisis-center/crisis-center.module')('CrisisCenterModule');

WebPack создает куски в то время как для пакетирования различных модулей & загружать их когда-либо мы путь к новому модулю.

источник

2016-09-20 07:43:44

Вы можете ленивым загружать модули с помощью: требуется

{path:"lazy", loadChildren:() => require('es6-promise!./path/to/module')('ClassName')}

es6-promise-loader модуль НПМ.

источник

2016-09-23 18:28:32

Angular2 Webpack Lazy Loading Routes Предоставление 404

ответ

Смежные вопросы