延迟加载模块 angular 2 和 asp-net core答案

【问题标题】：Lazy loading modules angular 2 and asp-net core延迟加载模块 angular 2 和 asp-net core
【发布时间】：2017-02-09 17:09:56
【问题描述】：

我正在使用 asp-net core 和 angular 2 一个 web 项目。我想在我当前的应用程序中实现模块延迟加载概念，但它不适合我尝试了几乎所有可用的解决方案。

ClientApp\app\components\home\ home.routing.module.ts

const routes: Routes = [
    {
        path: 'home', component: HomeComponent,
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent }
        ]
    }
]

export const routableComponents = [DashboardComponent]
@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    exports: [RouterModule],
    declarations: [routableComponents]
})
export class HomeRoutingModule {
}

app-routing-module.ts

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    { path: 'home', loadChildren: "./components/home/home.routing.module#HomeRoutingModule" },
    { path: '**', redirectTo: 'login' }

我收到上面提到的代码的这个错误

异常：未捕获（承诺）：类型错误： webpack_require.i(...) is not a function TypeError: webpack_require.i(...) is not a function

也按照建议的here使用这个包

"angular2-router-loader": "0.3.4"

webpack.config.js

const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                {
                    test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader',
                    'angular2-router-loader']
                },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    }

请指出我做错了什么。

【问题讨论】：

家庭路由的路径可能需要一些帮助。这可能是我缺乏理解，但在一个项目中我有延迟加载我有以下...{ path: 'recipes', loadChildren: 'app/recipes/recipes.module#RecipesModule' },注意它给出了以app开头的路径并且没有./前方。试试看？
还有一件事您没有提及的是您正在运行的进程会导致您出现该错误。您是否正在尝试构建/编译？你在做AOT吗？你只是想让本地服务器通过 npm run 运行还是什么？
用户登录到应用程序后，我试图重定向到我正在通过延迟加载加载的主页，这是它不起作用的地方

标签： angular webpack asp.net-core angular2-routing

【解决方案1】：

检查你的 webpack 配置应该是这样的，可能你错过了 webpack 的加载器

    // Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    context: __dirname,
    resolve: { extensions: [ '', '.js', '.ts' ] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
            { test: /\.html$/, loader: 'html-loader?minimize=false' },
            { test: /\.css$/, loader: 'to-string-loader!css-loader' },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    }

【讨论】：

我喜欢：使用：['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] 而不是加载器
更新了我的问题，可以查看完整配置
我正在使用“webpack”：“^2.2.0”，根据新的 webpack module.loaders 现在是 module.rules，webpack.js.org/guides/migrating

【解决方案2】：

它对我有用。

重启你的服务器：ng serve --aot

在路由中添加延迟加载模块时需要重新加载cli。

https://github.com/angular/angular-cli/issues/9825

【讨论】：