Webpack,Typescript和Angular2与时间(AOT)汇编？

发布时间：2020-12-17 08:06:12 所属栏目：安全来源：网络整理

导读：Angular2的最新版本允许使用时间(AOT)编译，在您的app.bootstrap.ts文件中使用此代码： // The browser platform without a compilerimport { platformBrowser } from '@angular/platform-browser';// The app module factory produced by the static offlin

Angular2的最新版本允许使用时间(AOT)编译，在您的app.bootstrap.ts文件中使用此代码：

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Angular2 Official Documentation

我们如何将Webpack和Typescript装载器与Angular2的AOT编译器集成？

似乎可能没有选择这样做，但是我在Stack溢出问题，所以当它可用时，答案可以很容易找到。

更新10/12/16 – 我得到它的工作，看到我的答案在下面。

我终于找到了工作，看到我的回购 Angular2 Webpack2 DotNET Starter

需要几个技巧请注意，AOT编译不支持Angular 2组件中的任何require()语句。他们将需要转换为导入语句。

首先，您需要有一个第二个tsconfig.json文件，具有AOT编译的特殊选项。我用.aot.json扩展名指定。

tsconfig.aot.json：

{
   "compilerOptions": {
      "target": "es5","emitDecoratorMetadata": true,"experimentalDecorators": true,"allowSyntheticDefaultImports": false,"noEmitHelpers": true,"pretty": true,"strictNullChecks": false,"baseUrl": ".","sourceMap": true,"sourceRoot": ".","lib": [
         "es6","dom"
      ],"types": [
         "lodash","hammerjs","jasmine","node","selenium-webdriver","source-map","uglify-js","webpack","materialize-css","jquery","kendo-ui"
      ],"typeRoots": [
         "./node_modules/@types"
      ],"outDir": "./compiled/src"
   },"exclude": [
      "./node_modules","./**/*.e2e.ts","./**/*.spec.ts",],"awesomeTypescriptLoaderOptions": {
      "useWebpackText": true,"forkChecker": true,"useCache": true
   },"compileOnSave": false,"buildOnSave": false,"atom": {
      "rewriteTsconfig": false
   },"angularCompilerOptions": {
      "genDir": "./compiled/aot","debug": true
   }
}

您还需要精确正确组合Angular2的版本。 @ angular / core @ 2.0.2和@ angular / common @ 2.0.2没有为我工作，我不得不使用2.0.0两者或ngc无法编译AOT文件。以下是我正在成功使用的：

package.json：

"dependencies": {
    "@angular/core": "2.0.0","@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/compiler-cli": "0.6.2","@angular/forms": "^2.0.1","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/platform-server": "2.0.0","@angular/router": "3.0.0","@angular/tsc-wrapped": "0.3.0"
}

另外，您还需要一些漂亮的webpack加载器，同时还允许webpack查看./src文件夹以及您的AOT编译文件输出的文件夹。 (* .component.ngfactory.ts)

最后一部分是非常重要的！如果你不告诉webpack包含这些文件夹，它将不起作用。在这个例子中，AOT文件被输出到/ aot编译在根文件夹中。

webpack.common.js

loaders: [
     {
        test: /.ts$/,include: [helpers.paths.appRoot,helpers.root('./compiled/aot')],exclude: [/.(spec|e2e).ts$/],loaders: [
           '@angularclass/hmr-loader','awesome-typescript-loader','angular2-template-loader','angular2-router-loader?loader=system',"angular2-load-children-loader" // this loader replaces loadChildren value to work with AOT/JIT
        ],},]

要生成您的AOT文件，您需要一个NPM脚本才能为您做

的package.json

"scripts": {
      "compile:aot": "./node_modules/.bin/ngc -p ./tsconfig.aot.json",}

您还需要使您的Webpack配置读取AOT版本的app.bootstrap.ts – 这与JIT版本不同。我将其与.aot.ts扩展区分开来，以便在生产环境中，webpack使用AOT(app.bootstrap.aot.ts)，但在开发模式下，它使用JIT与webpack-dev-server(app.bootstrap.ts)。

最后，运行npm运行compile：aot FIRST。
一旦您的AOT文件输出到磁盘，您可以使用webpack或webpack-dev-server运行Webpack构建。

有关一个工作示例，请参阅我的repo Angular2 Webpack2 DotNET Starter.它与.NET Core 1.0集成，但对于不使用.NET的用户，您仍然可以看到Webpack 2和Angular 2的配置。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!