角5的WebPack 3 AOT

我试图做一个AOT构建具有的WebPack 3和5角，但也有没有问题的网，没有显示完整的例子很多教程，到目前为止，我已经得到了以下配置：（对于那些谁有关于路径的问题 - 我用它在Java应用程序）角5的WebPack 3 AOT

webpack.config.aot.js：

const webpack = require("webpack"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const ngToolsWebpack = require('@ngtools/webpack'); 

module.exports = { 
    context: __dirname + "/src/main/webapp/resources/script/", 
    entry: { 
     app: "./core/main.aot.ts", 
     vendor: "./vendor.ts", 
     polyfills: "./polyfills.ts" 
    }, 
    output: { 
     filename: 'js/[name].js', 
     chunkFilename: "js/chunks/[id].chunk.js", 
     publicPath: "resources/compiled/", 
     path: __dirname + '/src/main/webapp/resources/compiled' 
    }, 
    resolve: { 
     alias: { 
      STYLES: __dirname + "/src/main/webapp/resources/css/", 
      SCRIPT: __dirname + "/src/main/webapp/script/" 
     }, 
     extensions: [".js", ".json", ".scss", ".ts"] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /[\/]angular\.js$/, 
       loader: 'exports-loader?angular' 
      }, 
      { 
       test: /\.html$/, 
       loader: 'raw-loader' 
      }, 
      { 
       test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, 
       loader: '@ngtools/webpack' 
      } 
     ] 
    }, 
    plugins: [ 
     new ngToolsWebpack.AngularCompilerPlugin({ 
      tsConfigPath: './tsconfig.aot.json', 
      entryModule: './src/main/webapp/resources/script/core/i18n/app.module.en#AppModule' 
     }) 
    ] 
};

tsconfig.aot.json：

{ 
    "compilerOptions": { 
    "module": "es2015", 
    "moduleResolution": "node", 
    "target": "es5", 
    "noImplicitAny": false, 
    "sourceMap": true, 
    "mapRoot": "", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
     "es2015", 
     "dom" 
    ], 
    "outDir": "lib", 
    "skipLibCheck": true, 
    "rootDir": "." 
    }, 
    "exclude": [ 
    "node_modules/*", 
    "target/*" 
    ], 
    "angularCompilerOptions": { 
    "genDir": "./src/main/webapp/resources/script/factory", 
    "rootDir": ".", 
    "baseUrl": "/" 
    } 
}

个main.aot.ts：

import {platformBrowser} from '@angular/platform-browser'; 
import {enableProdMode} from "@angular/core"; 
import {AppModuleNgFactory} from '../factory/app/app.module.ngfactory'; 

enableProdMode(); 

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

文件结构（简体）：

- webpack.config.aot.js 
- tsconfig.aot.js 
- src/ 
    - main/ 
    - webapp/ 
     - resources/ 
     - script/ 
      - vendor.ts 
      - polyfills.ts 
      - core/ 
      - main.aot.ts 
      - i18n/ 
       - app.module.en.ts

（请让我知道如果我没有表现出相关的事情）

所以，当我特林使用来构建它webpack -p --config ./webpack.config.aot.js

我获得以下错误：

ERROR in src/main/webapp/resources/script/core/main.aot.ts(5,34): error TS2307: Cannot find module '../factory/app/app.module.ngfactory'.

这听起来很合理，因为没有AppModuleNgFactory存在，但正如我在教程看着它应该在AOT构建中产生，使用genDir，对吗？（请不要，如果我省略应用程序/文件夹，所以路径看起来'../factory/app.module.ngfactory'我得到相同的错误）

是否正确指向不存在的AppModuleNgFactory aot用@ ngtools/webpack构建？

那是什么AppModuleNgFactory？几乎没有任何关于它的任何文档的角度网站上

我应该改变我的配置成功地生成一个构建？

如果我改变主文件来引导的AppModule本身，它成功地建立，但在浏览器中我得到NullInjectorError: No provider for t!错误

没有缩小它表明：No provider for CompilerFactory!

来源

2017-11-18 Dmytro Grynets

您是否知道angular-cli的存在，它可以完成所有这些工作，还有更多的工作，只需要'ng build -aot'？ –

@JBNizet当然，但我相信webpack给这个过程提供了更多的控制和灵活性，我被误导了吗？ –

我的猜测是，通过使用CLI，您可以立即获得所需的所有内容，并且可以立即获得所需的所有内容（并接受其工作方式，而不是与其做法相抗衡）。如果你真的有阻碍你的东西，那么你总是可以使用弹出和自定义其webpack配置。 –

看来，@ ngtools /的WebPack可以处理的Bootstrap模块厂本身从原来的主文件，如的WebPack条目应为：path_to_file/main.ts

和main.ts包含：

platformBrowserDynamic().bootstrapModule(AppModule);

整件事情将自行处理，无需其他配置！

这真是太神奇了

来源

2017-11-24 08:53:39

是的，我们最近升级到角5的WebPack 3.我们还使用@ ngtools /的WebPack打造AOT版本。

这个工作对我们来说，

您可以直接获得摆脱main.aot.ts和使用main.ts的。大概你的main.ts看起来像这样。

import {platformBrowserDynamic} from '@angular/platform-broswer-dynamic import {AppModule} from './app.module' platformBrowserDynamic().bootstrapModule(AppModule);

一定要改变你的应用程序进入main.ts中的WebPack配置。

来源

2017-11-30 03:38:51 ymrs

角5的WebPack 3 AOT

回答

相关问题