要在Web浏览器上呈现Angular 4的转译文件,你需要使用Angular的Just-in-Time(JIT)编译器,而不是默认的Ahead-of-Time(AOT)编译器。
在Angular 4中,默认情况下使用的是AOT编译器,它会将Angular应用程序的模板和组件代码转换成JavaScript和HTML文件,以便在浏览器上运行。AOT编译器生成的文件是无法直接在浏览器中运行的。
要解决这个问题,你可以通过使用JIT编译器来重新编译Angular应用程序。下面是如何使用JIT编译器的代码示例:
main.ts
文件中进行如下更改:import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
tsconfig.json
文件中,将"angularCompilerOptions"
的"skipTemplateCodegen"
选项设置为true
。这将禁用AOT编译器生成的模板代码的转译。"angularCompilerOptions": {
"skipTemplateCodegen": true
}
JitCompilerFactory
替换默认的COMPILER_OPTIONS
提供者。在app.module.ts
文件中进行如下更改:import { COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
export function createCompiler(compilerFactory: CompilerFactory) {
return compilerFactory.createCompiler();
}
@NgModule({
providers: [
{
provide: COMPILER_OPTIONS,
useValue: {},
multi: true
},
{
provide: CompilerFactory,
useClass: JitCompilerFactory,
deps: [COMPILER_OPTIONS]
},
{
provide: Compiler,
useFactory: createCompiler,
deps: [CompilerFactory]
}
]
})
export class AppModule { }
通过以上步骤,你的Angular 4应用程序将使用JIT编译器进行编译,转译文件将可以在Web浏览器上呈现。