[英]AoT compilation for angular 8 downgraded module
In my, Angular project build is done by gulp, and I need to set up a hybrid angular app.在我的 Angular 项目构建由 gulp 完成,我需要设置一个混合 angular 应用程序。 Currently, I do it with webpack the following way: gulp runs webpack and injects it's bundle to
dist
folder previously produced by gulp.目前,我通过以下方式使用 webpack 执行此操作: gulp 运行 webpack 并将其捆绑注入到以前由 webpack 生成的
dist
文件夹中。 My webpack config:我的 webpack 配置:
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: path.resolve(__dirname, './src/main/app/app.module.angular.ts'),
output: {
filename: 'webpack.bundle.js'
},
module: {
rules: [
{ test: /\.ts?$/, use: 'ts-loader', exclude: '/node_modules/' },
{ test: /\.html?$/, use: 'raw-loader' }
]
},
resolve: { extensions: ['.ts', '.js'] },
plugins: [
new htmlWebpackPlugin({
template: '.' + outputPath + 'index.html',
inject: false // <script> reference already in file
})
],
optimization: {
minimize: false
}
};
My gulp task that starts webpack:我的 gulp 任务启动 webpack:
gulp.task('main-webpack', (done) => {
return gulp.src(path.join(paths.src, '/**/*.ts'))
.pipe(webpackStream(require('../webpack.main.config.js'), webpack))
.on('error', (err) => {
gutil.log('WEBPACK ERROR', err);
})
.pipe(gulp.dest(gulp.paths.serve.main));
});
My angular downgraded module is defined and bootstrapped like this:我的 angular 降级模块的定义和引导如下:
@NgModule({
imports: [
BrowserModule,
CommonModule,
HttpClientModule,
TranslateModule.forRoot()
],
declarations: COMPONENTS,
entryComponents: COMPONENTS,
providers: [...]
})
export class MainAppModule {
constructor() { }
ngDoBootstrap(){} // required to start hybrid app
}
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowserDynamic(extraProviders);
return platformRef.bootstrapModule(MainAppModule);
};
const MainAngularDowngradedModule = angular
.module(
'app.angular',
[ downgradeModule(bootstrapFn)]
);
After that i add 'app.angular'
as a dependency to angularjs app root module and everything works well.之后,我将
'app.angular'
添加为 angularjs 应用程序根模块的依赖项,一切正常。 But I would like to get remove angular compiler from bundle by using AoT compilation.但我想通过使用 AoT 编译从包中删除 angular 编译器。 I tried to use https://www.npmjs.com/package/@ngtools/webpack with the following webpack config:
我尝试将https://www.npmjs.com/package/@ngtools/webpack与以下 webpack 配置一起使用:
mode: 'production',
devtool: false,
entry: path.resolve(__dirname, './src/main/app/app.module.angular.ts'),
output: { filename: 'webpack.bundle.js' },
module: {
rules: [
{ test: /\.ts?$/, use: '@ngtools/webpack' },
{ test: /\.html?$/, use: 'raw-loader' }
]
},
resolve: { extensions: ['.ts', '.js'] },
plugins: [
new htmlWebpackPlugin({
template: '.' + outputPath + 'index.html',
inject: false
}),
new AngularCompilerPlugin({
mainPath: './src/main/app/app.module.angular.ts',
tsConfigPath: './tsconfig.json',
})
],
optimization:{
minimize: false,
noEmitOnErrors: true,
}
When i start with config above i get this error:当我从上面的配置开始时,我收到此错误:
angular.js:13920 Error: No NgModule metadata found for 'MainAppModule'.
at NgModuleResolver.resolve (https://localhost:8080/main/webpack.bundle.js:53749:23)
at CompileMetadataResolver.getNgModuleMetadata (https://localhost:8080/main/webpack.bundle.js:52856:43)
at JitCompiler._loadModules (https://localhost:8080/main/webpack.bundle.js:59037:51)
at JitCompiler._compileModuleAndComponents (https://localhost:8080/main/webpack.bundle.js:59018:36)
at JitCompiler.compileModuleAsync (https://localhost:8080/main/webpack.bundle.js:58978:37)
at CompilerImpl.compileModuleAsync (https://localhost:8080/main/webpack.bundle.js:107707:31)
at compileNgModuleFactory__PRE_R3__ (https://localhost:8080/main/webpack.bundle.js:27322:21)
at PlatformRef.bootstrapModule (https://localhost:8080/main/webpack.bundle.js:27536:16)
at app_module_angular_bootstrapFn (https://localhost:8080/main/webpack.bundle.js:110384:24)
at Object.<anonymous> (https://localhost:8080/main/webpack.bundle.js:109133:26) <shop1 class="ng-scope">
Also template reference in component definitions doesn't work the same with different weboack setups: jit setup requires: template: require('./shop.component.html').default;
此外,组件定义中的模板引用对于不同的 weboack 设置也不起作用: jit setup requires:
template: require('./shop.component.html').default;
while aot works with: templateUrl: './shop.component.html'
而aot适用于:
templateUrl: './shop.component.html'
How can i solve the error mentioned above?我该如何解决上面提到的错误? Is there a way to have both jit and aot coexist without need to do significant modifications in each component?
有没有办法让 jit 和 aot 共存而不需要对每个组件进行重大修改?
Thanks Sorry for too long question:)谢谢对不起,问题太长了:)
I ended up fixing the problem by splitting app module from main module, having main.ts and main.aot.ts files which just setup downgraded module and import AppModule.我最终通过将应用程序模块与主模块分离来解决问题,拥有 main.ts 和 main.aot.ts 文件,它们只是设置降级模块并导入 AppModule。 main.aot.ts looks like this:
main.aot.ts 看起来像这样:
import 'reflect-metadata';
import * as angular from 'angular';
import { platformBrowser } from '@angular/platform-browser';
// in main.ts: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { NgModule, StaticProvider, Inject } from '@angular/core';
import { downgradeModule } from '@angular/upgrade/static';
import { MainAppModuleNgFactory } from './app/app.module.angular.ngfactory';
// in main.ts: import { MainAppModule } from './app/app.module.angular';
enableProdMode(); // not present in main.ts
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowser(extraProviders);
return platformRef.bootstrapModuleFactory(MainAppModuleNgFactory);
};
const MainAngularDowngradedModule = angular
.module( 'app.angular', [ downgradeModule(bootstrapFn)] );
also webpack config for aot looks like this:此外,aot 的 webpack 配置如下所示:
module.exports = {
mode: 'production',
devtool: false,
entry: path.resolve(__dirname, './src/main/main.aot.ts'),
output: {
filename: 'webpack.bundle.js'
},
module: {
rules: [
{
test: /\.ts?$/,
use: '@ngtools/webpack',
exclude: [
/node_modules/,
path.resolve(__dirname, './src/main/main.ts'),
]
},{
test: /\.html?$/,
use: 'raw-loader',
},{
test: /\.scss?$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new AngularCompilerPlugin({
entryModule: path.resolve(__dirname, './src/main/main.aot.ts#MainAppModule'),
tsConfigPath: './tsconfig.aot.json',
}),
],
optimization:{
minimize: true,
noEmitOnErrors: true,
}
};
and, finally, gulp task looks like this:最后,gulp 任务如下所示:
gulp.task('bundle:main-webpack', function(){
const config = (conf.env === ENVIRONMENTS.PRODUCTION || conf.env === ENVIRONMENTS.STAGING)
? '../webpack.prod.config.js'
: '../webpack.main.config.js';
return gulp.src(paths.src + '/**/*.ts')
.pipe(webpackStream(require(config), webpack))
.on('error', (err) => {
gutil.log('WEBPACK ERROR', err);
})
.pipe(gulp.dest(paths.dist + '/main'));
});
This setup still has some space for optimizations, but at least it doesn't fail:)此设置仍有一些优化空间,但至少它不会失败:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.