Ошибка Angular2 AOT; Файл ресурса не найден
Чтобы собрать мой проект angular2 с помощью AOT, я сначала запускаю эту команду.
$ ./node_modules/.bin/ngc -p ./src/
Я получаю некоторые ошибки, но не могу их исправить,
Error: Compilation failed. Resource file not found: /Users/home_user/Devs/ds_dev_team/dmp-dashboard/src/public/main-web/app/styles/form
at ModuleResolutionHostAdapter.readResource (/Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler-cli/src/compiler_host.js:291:19)
at CompilerHost.loadResource (/Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler-cli/src/compiler_host.js:230:85)
at Object.DirectiveNormalizer.get (/Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler/bundles/compiler.umd.js:26374:111)
at DirectiveNormalizer._fetch (/Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler/bundles/compiler.umd.js:13753:47)
at /Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler/bundles/compiler.umd.js:13870:57
at Array.map (native)
at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/home_user/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler/bundles/compiler.umd.js:13870:18)
at /Users/1002719/Devs/ds_dev_team/dmp-dashboard/node_modules/@angular/compiler/bundles/compiler.umd.js:13873:30
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:592:11)
Я думаю, что это произошло потому, что form.scss
отсутствует, поэтому я обработал его (удалить или объединить с другим файлом и т. д.), но это можно решить.
,,
Ниже приведен конфиг веб-пакета. это все с https://github.com/AngularClass/angular2-webpack-starter
webpack.common.js
const webpack = require('webpack');
const helpers = require('./helpers');
const path = require('path');
// problem with copy-webpack-plugin
const AssetsPlugin = require('assets-webpack-plugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
// const ENV = process.env.NODE_ENV;
// if (ENV !== 'local' && ENV !== 'local-int' && ENV !== 'alpha' && ENV !== 'prod') {
// throw new Error('NODE_ENV must be specified (local or local-int or alpha or prod)');
// }
const HMR = helpers.hasProcessFlag('hot');
const AOT = helpers.hasNpmFlag('aot');
const METADATA = {
title: 'Dashboard',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
module.exports = function(options) {
isProd = options.env === 'prod';
return {
entry: {
'polyfills': './src/public/main-web/polyfills.browser.ts',
'main': AOT ? './src/public/main-web/main.browser.aot.ts' : './src/public/main-web/main.browser.ts'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
alias: {
'@angular/material': '@angular/material/bundles/material.umd.js',
},
modules: [helpers.root('./src/public/main-web'), helpers.root('node_modules')]
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: '@angularclass/hmr-loader',
options: {
pretty: !isProd,
prod: isProd
}
},
{
loader: 'ng-router-loader',
options: {
loader: 'async-import',
genDir: 'compiled',
aot: AOT
}
},
{
loader: 'awesome-typescript-loader',
options: {
configFileName: 'tsconfig.webpack.json'
}
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.html$/,
use: 'raw-loader',
exclude: [helpers.root('src/public/views/index.html')]
},
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'
}
]
},
plugins: [
new AssetsPlugin({
path: helpers.root('src/dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
new CheckerPlugin(),
new CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new CommonsChunkPlugin({
name: 'vendor',
chunks: ['main'],
minChunks: module => /node_modules/.test(module.resource)
}),
new CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
new ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
helpers.root('./src/public/main-web'),
{
// your Angular Async Route paths relative to this root directory
}
),
new CopyWebpackPlugin([
{from: 'src/public/imgs', to: 'imgs'},
{from: 'src/public/external-css', to: 'external-css'},
{from: 'src/public/main-web/app/fonts', to: 'fonts'},
{from: 'src/public/main-web/app/shared/error-page/error-page.html', to: 'errors/error.html'}
]),
new HtmlWebpackPlugin({
template: 'src/public/views/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head'
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
}),
new LoaderOptionsPlugin({}),
new NormalModuleReplacementPlugin(
/facade(\\|\/)async/,
helpers.root('node_modules/@angular/core/src/facade/async.js')
),
new NormalModuleReplacementPlugin(
/facade(\\|\/)collection/,
helpers.root('node_modules/@angular/core/src/facade/collection.js')
),
new NormalModuleReplacementPlugin(
/facade(\\|\/)errors/,
helpers.root('node_modules/@angular/core/src/facade/errors.js')
),
new NormalModuleReplacementPlugin(
/facade(\\|\/)lang/,
helpers.root('node_modules/@angular/core/src/facade/lang.js')
),
new NormalModuleReplacementPlugin(
/facade(\\|\/)math/,
helpers.root('node_modules/@angular/core/src/facade/math.js')
),
new ngcWebpack.NgcWebpackPlugin({
disabled: !AOT,
tsConfig: helpers.root('tsconfig.webpack.json'),
resourceOverride: helpers.root('client-config/resource-override.js')
})
],
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
}
};
webpack.prod.js
const helpers = require('./helpers');
const webpackMerge = require('webpack-merge');
const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
const commonConfig = require('./webpack.common.js');
const path = require('path');
/**
* Webpack Plugins
*/
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const OptimizeJsPlugin = require('optimize-js-plugin');
/**
* Webpack Constants
*/
const ENV = process.env.ENV = process.env.NODE_ENV = 'prod';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: HMR
});
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
module.exports = function(options) {
return webpackMerge(commonConfig({env: ENV}), {
devtool: 'source-map',
output: {
path: path.resolve(__dirname, '../src/dist'),
filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].[chunkhash].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: [helpers.root('src', 'styles')]
},
]
},
plugins: [
new OptimizeJsPlugin({
sourceMap: false
}),
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
},
'process.env.NODE_ENV': JSON.stringify(METADATA.ENV)
}),
new UglifyJsPlugin({
beautify: false, //prod
output: {
comments: false
}, //prod
mangle: {
screw_ie8: true
}, //prod
compress: {
screw_ie8: true,
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
negate_iife: false // we need this for lazy v8
},
}),
new NormalModuleReplacementPlugin(
/angular2-hmr/,
helpers.root('config/empty.js')
),
new NormalModuleReplacementPlugin(
/zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
helpers.root('config/empty.js')
),
new LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
/**
* Html loader advanced options
*
* See: https://github.com/webpack/html-loader#advanced-options
*/
// TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
htmlLoader: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [
[/#/, /(?:)/],
[/\*/, /(?:)/],
[/\[?\(?/, /(?:)/]
],
customAttrAssign: [/\)?\]?=/]
},
}
})
],
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
proxy: {
'/dmp-idmpoc-api/user/v1/**': {
target: 'https://idm-poc.skplanet.com',
changeOrigin: true,
secure: false
},
'/dmp-idmpoc-api/idm_poc/page/**': {
target: 'https://idm-poc.skplanet.com',
changeOrigin: true,
secure: false
},
'/dmp-idmpoc-api/idm_poc/v1/**': {
target: 'https://idm-poc.skplanet.com',
changeOrigin: true,
secure: true
},
'/dmp-idmpoc-api/dashboard/v1/**': {
target: 'https://idm-poc.skplanet.com',
changeOrigin: true,
secure: true
}
}
},
node: {
global: true,
crypto: 'empty',
process: false,
module: false,
clearImmediate: false,
setImmediate: false
}
});
}