Question

我没有成功使用webpack生成的bundle来加载Angular 2路由以加载子模块。

从main.ts开始生成一个应用程序包（bundle.js），它通过我的主html文件中的脚本标记加载。 Angular应用程序从AppModule开始，他有一个＆＃39; home＆＃39;尝试加载子模块的路由（HomeModule）。当那个家的目标是＆＃39; route是一个组件，没有问题，组件正确显示。但是，我无法弄清楚如何正确地将路径目标指定为模块。使用下面代码中的路径（在app.routes.ts中），我收到以下错误。

有人可以告诉我，我在这里做错了什么吗？

以下是相关代码。

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var webpackMerge = require('webpack-merge');

var webpackConfig = {
    entry: {
        bundle: "./app/main.ts",
        vendor: "./app/vendor.ts",
        polyfills: "./app/polyfills.ts",
        styles: "./css/app.less.css"
    },

    output: {
        publicPath: '/app/dist/bundles/',
        path: path.resolve(__dirname, './dist/bundles'),
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            path.resolve(__dirname, './app'),  // location of your src
            {
                // your Angular Async Route paths relative to this root directory
            }
        ),
    ],

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular-router-loader'
                ]
            },
            { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
            { test: /\.htm(l)*$/, loader: 'raw-loader' },
            { test: /\.(eot|svg|cur)$/, loader: "file-loader?name=[name].[hash:20].[ext]" },
            {
                test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                loader: "url-loader?name=[name].[hash:20].[ext]&limit=10000"
            },
        ]
    }

};

var defaultConfig = {
    devtool: 'source-map',

    output: {
        filename: '[name].js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        extensions: [ '.ts', '.js' ],
        modules: [
            path.resolve(__dirname, 'node_modules'),
        ],
    },
};

module.exports = webpackMerge(defaultConfig, webpackConfig);

app.module.ts

import {NgModule} from "@angular/core";
import {LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from "@angular/common";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {HttpModule} from "@angular/http";
import {AppRoutesModule} from './app.routes.module';
import {AppComponent} from "./app.component";
import HomeModule from "./home/home.module";

@NgModule({

    imports: [
        BrowserModule,
        HttpModule,
        RouterModule,
        AppRoutesModule,
        HomeModule
    ],

    declarations: [
        AppComponent,
    ],

    providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {provide: LocationStrategy, useClass: HashLocationStrategy},
    ],

    bootstrap: [
        AppComponent
    ],
})
export class AppModule {
}

app.routes.ts

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {AppComponent} from "./app.component";

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', loadChildren: './home/home.module.js#HomeModule'},
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ],
    providers: []
})
export class AppRoutesModule {}

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: 'app',
    template: `
        <div>
            App Component
            <router-outlet></router-outlet>
        </div>`,
})
export class App2Component {}

home.module.ts

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {routing} from './home.routes';
import {HomeViewComponent} from "./home-view.component";

@NgModule({
    imports: [
        CommonModule,
        routing
    ],
    declarations: [HomeViewComponent],
    exports: [],
    providers: []
})
export default class HomeModule {}

home.routes.ts

import {ModuleWithProviders} from "@angular/core";
import {RouterModule} from "@angular/router";
import {HomeViewComponent} from "./home-view.component";

export const routing: ModuleWithProviders = RouterModule.forChild([
    {path: '', component: HomeViewComponent},
]);

home.component.ts

import {Component} from "@angular/core";

@Component({
    selector: 'home-view',
    template: `<div>Home View</div>`
})
export class HomeViewComponent {}

Answer 1

尝试删除扩展程序 {path: 'home', loadChildren: './home/home.module#HomeModule'}

并且似乎没有<router-outlet>来加载子路由。为此制作一个组件。

喜欢

export const routing: ModuleWithProviders = RouterModule.forChild([
{path: '', redirectTo: 'home', pathMatch: 'full'}
{
  path: '', 
  component: HomeComponent
  children: [
    {path: 'home', component: HomeViewComponent}
 ]
},

]）;

HomeComponent将为子路由提供router-outlet

使用Webpack进行Angular 2路由

1 个答案: