I am trying to configure AOT with ngTools running in my Angular application (using Webpack to load a module) and having an absolute time nightmare. I looked at various resources in the documents here and here , and also read readme ngTools, looked at an example laid down inside the Angular CLI (this application was not created using the Angular CLI, but I thought it would be at least a useful link), found through this resource on Angular + Webpack + Sass + ngTools (I also use SASS, but it compiles with my webpack.config.aot.js - it blocks me from switching to ngc, although at least, as far as I found, this is what I saw in some examples), as well as all the github or postoverflow posts on it that I found in the last few years of the days and no matter what I try to create aot, the following error occurs:
ERROR in window is not defined
ERROR in /Users/nataliecoley/development/company-app-name/src/main-aot.ts (2,36): Cannot find module '../aot/src/app/app.module.ngfactory'.
ERROR in ./src/main-aot.ts
Module not found: Error: cannot resolve '../aot/src/app/app.module.ngfactory' to '/ Users / nataliecoley / development / company-app-name / src' @. / Src / main-aot. ts 2: 0-73
Currently, I am ignoring the first problem (partly because I cannot find anyone else on the Internet that has this error, and partly because I searched my entire code base, excluding node modules and windownot appearing anywhere in the code), but I am open to suggestions if anyone knows where this might come from (or if you think this is due to errors 2 and 3).
The second and third error messages, although I think they are the main source of my problems, as itโs pretty clear that it app.module.tsdoesnโt compile before main-aot.ts, so by the time the main-aot.tscompilation is in progress, it cannot find the file. However, I set it up according to the documentation that I specifically found so that it is already compiled and app.module.ngfactoryready to go when the compiler reaches main-aot.ts.
, - , , , , , . , , , , , ( - ), , AOT + ngTools + webpack + Angular, , .
():
.
+
| +
| +
| +
| +
+
| +
| +
| +
| +
| +
| +
| +
| +
+
+
+
+
+
, aot ( , Angular), "build:aot": "webpack --config webpack.config.aot.js", package.json. , 4.1.0 Angular, @ngtools/webpack v1.3.1 webpack v 2.3.3 typescript v2.3.0
. , aot typescript/angular, , Angular ( v4.1.0 ), , strictnullchecks .. , , AOT, , , - Angular AOT, , .
tsconfig-aot.json:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strictNullChecks": true,
"skipLibCheck": true,
"skipCodeGeneration": false,
"typeRoots": [
"../node_modules/@types/"
]
},
"files": [
"src/app/app.module.ts",
"src/main-aot.ts"
],
"compileOnSave": true,
"angularCompilerOptions": {
"genDir": "aot",
"entryModule": "src/app/app.module#AppModule",
"skipMetadataEmit": true
}
}
webpack.config.aot.js:
const ngtools = require('@ngtools/webpack');
const webpack = require('webpack');
const helpers = require('./config/helpers');
module.exports = {
devtool: 'source-map',
entry: {
main: './src/main-aot.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
target: 'node',
output: {
path: helpers.root('dist'),
filename: 'build.js'
},
plugins: [
new ngtools.AotPlugin({
tsConfigPath: helpers.root('tsconfig-aot.json'),
entryModule: helpers.root('src', 'app', 'app.module#AppModule')
}),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
],
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{ test: /\.css$/, loader: 'raw-loader' },
{
test: /\.scss$/,
loaders: ['to-string-loader', 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.ts$/, loader: '@ngtools/webpack' }
]
}
}
entry. , entryModule tsconfig-aot.json, webpack.config.aot.js, , , webpack.config.aot.js. tsconfig-aot.json webpack.config.aot.js - , , . (, tsconfig-aot.json), , .
main-aot.ts:
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
, , , , , , , , , , , -, Angular + Webpack, , . !