Javascript 作为路由处理程序动态加载外部webpack捆绑模块
我们希望将大型前端项目划分为多个单独部署的项目,这些项目更易于使用。我正在尝试包含一个捆绑的ngModule来处理来自另一个应用程序的路由。应用程序必须不知道彼此的配置。捆绑包将通过全局共享一些大型依赖项(如角度依赖项)。我们不需要跨越捆绑包,我们可能只需要接受一些重复的依赖项 根路由器抱怨说Javascript 作为路由处理程序动态加载外部webpack捆绑模块,javascript,angular,typescript,webpack,angular-router,Javascript,Angular,Typescript,Webpack,Angular Router,我们希望将大型前端项目划分为多个单独部署的项目,这些项目更易于使用。我正在尝试包含一个捆绑的ngModule来处理来自另一个应用程序的路由。应用程序必须不知道彼此的配置。捆绑包将通过全局共享一些大型依赖项(如角度依赖项)。我们不需要跨越捆绑包,我们可能只需要接受一些重复的依赖项 根路由器抱怨说 Error: No NgModule metadata found for 'TestsetModule'. 这使我相信子模块没有在加载时进行角度编译,或者由于某种原因没有注册其模块。我认为可能需要手动
Error: No NgModule metadata found for 'TestsetModule'.
这使我相信子模块没有在加载时进行角度编译,或者由于某种原因没有注册其模块。我认为可能需要手动编译该模块,但我不确定如何使用它
根应用程序通过以下路径加载子应用程序:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const load = require("little-loader");
const routes: Routes = [
{ path: ``, loadChildren: () => new Promise(function (resolve) {
load('http://localhost:3100/testset-module-bundle.js',(err: any) => {
console.log('global loaded bundle is: ', (<any>global).TestsetModule )
resolve((<any>global).TestsetModule)
}
)
})}
];
export const HostRouting: ModuleWithProviders = RouterModule.forRoot(routes);
下面是子包的Web包配置。注意“externals”,它将角度视为全局
module.exports = (envOptions) => {
envOptions = envOptions || {};
const config = {
entry: {
'testset-module-bundle': './src/index.ts'
},
output: {
//library: 'TestsetModule',
libraryTarget: 'umd',
filename: '[name].js',//"bundle.[hash].js",
chunkFilename: '[name]-chunk.js',
path: path.resolve(__dirname, "dist")
},
externals: {
//expect these to come from the app that imported us
// name to be required : name from global
'angular': '@angular/core',
'ngrouter': '@angular/router',
'ngxlog': '@churro/ngx-log'
},
resolve: {
extensions: ['.ts', '.js', '.html'],
},
module: {
rules: [
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'raw-loader' },
]
},
devtool: '#source-map',
plugins: [
]
};
config.module.rules.push(
{ test: /\.ts$/, loaders: [
'awesome-typescript-loader',
'angular-router-loader',
'angular2-template-loader',
'source-map-loader'
] }
);
}
return config;
};
这里是我的tsconfig文件,它是“awesometypescriptloader”
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"baseUrl": ".",
"rootDir": "src",
"outDir": "app",
"paths": {
"@capone/*": [
"*"
],
"@angular/*": [
"node_modules/@angular/*"
],
"rxjs/*": [
"node_modules/rxjs/*"
]
}
},
"exclude": ["node_modules", "src/node_modules", "compiled", "src/dev_wrapper_app"],
"angularCompilerOptions": {
"genDir": "./compiled",
"skipMetadataEmit": true
}
}
如果你还在读书,那就太棒了。当两个bundle都是同一个webpack配置的一部分并且子模块只是一个块时,我就能够实现这一点。Angular就是这样设计的。但我们的用例是让孩子和家长在运行时之前彼此不知道 如你所述
应用程序必须不知道彼此的配置
我在Angular2也有类似的问题。我通过创建一个子应用程序解决了这个问题。单独的sub-main.browser.ts和index.html文件。它有自己的依赖项,共享相同的节点模块。两个主模块都引导不同的应用程序组件。我们正在研究Angular,但没有Angular cli
在webpack配置中,我添加了
entry: {
'polyfills': './src/polyfills.browser.ts',
'main' . : './src/main.browser.aot.ts',
'sub-main' : '/src/sub-main.browser.ts'
},
还有更详细的HtmlWebpackPlugin。在块中,我们只加载将在两个应用程序中使用的模块。如果我们看到多填充是常见的
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head',
chunks: ['polyfills','main']
}),
new HtmlWebpackPlugin({
template: 'src/index2.html',
title: 'Sub app',
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head',
filename: './sub-app.html',
chunks: ['polyfills','sub-main']
}),
下一个任务是为dev环境的两个子应用程序创建单独的端点
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
proxy: {
"/sub-app": {
target: "http://localhost:3009",
bypass: function(req, res, proxyOptions) {
return "/index2.html";
}
}
}
},
现在,当我构建项目时,会生成两个不同的HTML文件。每个都有自己的javascript包依赖项和公共资产。它们也可以部署在不同的服务器上
我通过大量的尝试和错误完成了我的POC。我的建议将是看一步以上的角度。查看webpack如何部署当前项目。如果你能配置它来满足你的需求 您是否尝试过使用
网页包角度外部设置
?Read还可能将其捆绑到一个npm模块中,您可以将其安装到其他项目中。我将采取方法引导主应用程序,创建一个子模块,然后使用主应用程序路由器模块延迟加载子模块。爱奥尼亚在它创建的每个页面上都有这个实现,结果是更快的应用程序boostrap。分离主模块和子模块是一个很好的参考。我想知道你是否已经修复了这个问题?我正在寻找类似用例的解决方案。我也尝试过用rollup或umd包注入脚本标记,但我总是会出错。不过,在这一点上,基础应用程序知道sub-main,对吗?这很好。在我看来,当子主应用程序发生更改时,您的主应用程序需要重建。我应该更清楚一点:这正是我们试图避免的。@jaimetores这个网页在孩子的时候就扮演着根和主的角色。如果您将主应用程序视为基础应用程序。它不会知道sub-main,反之亦然。@Light24灯泡是的,它会重建整个应用程序。但我相信我们可以配置webpack,只重建更新的子应用程序。
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head',
chunks: ['polyfills','main']
}),
new HtmlWebpackPlugin({
template: 'src/index2.html',
title: 'Sub app',
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head',
filename: './sub-app.html',
chunks: ['polyfills','sub-main']
}),
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
proxy: {
"/sub-app": {
target: "http://localhost:3009",
bypass: function(req, res, proxyOptions) {
return "/index2.html";
}
}
}
},