Я пытался настроить AOT с помощью ngTools, работающего в моем приложении Angular (с использованием Webpack для загрузки модуля), и у меня был абсолютный кошмар этого времени. Я просмотрел различные ресурсы в документации здесь и здесь, а также прочтите файл readme ngTools , посмотрел на пример, скрытый внутри Angular CLI (это приложение не было построено с Angular CLI, но я подумал, что это будет по крайней мере полезная ссылка), найденный через этот ресурс на Angular + Webpack + Sass + ngTools (я использую SASS тоже, но он отлично компилируется с моим webpack.config.aot.js - хотя он блокирует мне переход на ngc, по крайней мере, насколько я обнаружил, это то, что я видел в некоторых примерах), а также все проблемы с github или сообщения stackoverflow, которые я обнаружил за последние несколько дней, и независимо от того, что я делаю, пытаясь создать, aot производит следующая ошибка:
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
Модуль не найден: ошибка: не удается разрешить '../aot/src/app/app.module.ngfactory' в '/ Users / nataliecoley / development / company-app-name / src' @ ./src/main- aot.ts 2: 0-73
В настоящее время я игнорирую первую проблему (отчасти потому, что я не могу найти в сети кого-либо еще с этой ошибкой, а отчасти потому, что я искал всю свою кодовую базу, за исключением узловых модулей, и window нигде не появляется в код), но я открыт для предложений, если кто-нибудь знает, откуда это может исходить (или если вы думаете, что это связано с ошибками 2 и 3).
Второе и третье сообщения об ошибках, хотя я думаю, являются основным источником моих проблем, поскольку довольно ясно, что app.module.ts не компилируется до main-aot.ts, поэтому к тому времени, когда main-aot.ts идет на компиляцию, он не может найти файл. Однако я настроил его в соответствии с документацией, которую я нашел специально, чтобы он был уже скомпилирован и app.module.ngfactory готов к работе, когда компилятор достигнет main-aot.ts.
Ясно, что в моей настройке чего-то не хватает, и поскольку каждое решение, которое я нахожу в Интернете, настроено немного по-другому, я не могу сузить проблему. Все, что я знаю, это то, что ничего из того, что я пробовал до сих пор, не удаляет эту ошибку (или не вызывает любую другую новую ошибку), и мне нужна помощь от любого, кто успешно установил AOT + ngTools + webpack + Angular, чтобы сузить кругозор. здесь.
Вот моя файловая структура (упрощенная):
.
+-- config/
| +-- helpers.js
| +-- webpack.common.js
| +-- webpack.dev.js
| +-- webpack.prod.js
+-- src/
| +-- app/
| +-- assets/
| +-- vendor/
| +-- index.html
| +-- main.ts
| +-- main-aot.ts
| +-- polyfills.ts
| +-- tsconfig.json
+-- package.json
+-- server.js
+-- tsconfig-aot.json
+-- webpack.config.aot.js
+-- webpack.config.js (only contains: module.exports = require('./config/webpack.dev.js');)
Команда, которую я использую для запуска моей сборки 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' }
]
}
}
Замечание о файле entryModule. В некоторых ресурсах, которые я видел, говорится, что параметр 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, может указать мне в правильном направлении или поделиться ресурсом, который помог им понять это из. Заранее спасибо!
