я обновился до angular 8 и попытался с помощью этого добавить новый маршрут lazyLoad, например:
{ path: 'error', loadChildren: () => import('./modules/errors/errors.module').then(m => m.ErrorsModule) }
и, к сожалению, получить такую ошибку
ОШИБКА в ./src/app/app.routes.ts 154: 41 Ошибка синтаксического анализа модуля: неожиданный токен (154: 41) Вам может потребоваться соответствующий загрузчик для обработки этого типа файлов. |canActivate: [RouteGuardService] |},
{ path: 'error', loadChildren: () => import('./modules/errors/errors.module').then(m => m.ErrorsModule) },
|{path: '**', redirectTo: 'error / 404', pathMatch: 'full'} |];@ ./src/app/app.module.ts 89: 0-48 161: 12-28 @ ./src/singleSpaEntry.ts @ multi (webpack) -dev-сервер / клиент? http://0.0.0.0:9001 src /singleSpaEntry.ts i 「wdm」: Не удалось скомпилировать.
, какой загрузчик следует добавить в веб-пакет (извлеченный из CLI)
файл webpack.config (приложениечасть синглеспа (микрофронтенд))
const path = require('path');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
let webpackLoader;
let AngularCompilerPluginAttempt;
try {
AngularCompilerPluginAttempt = require('@ngtools/webpack');
AngularCompilerPluginAttempt = AngularCompilerPluginAttempt.AngularCompilerPlugin;
webpackLoader = '@ngtools/webpack';
} catch (e) {
}
if (!webpackLoader) {
webpackLoader = '@angular-devkit/build-angular/node_modules/@ngtools/webpack';
}
const AngularCompilerPlugin = AngularCompilerPluginAttempt ? AngularCompilerPluginAttempt : require('@angular-devkit/build-angular/node_modules/@ngtools/webpack').AngularCompilerPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function (env) {
const analyzeBundle = !!(env && env.analyzeBundle);
const prodMode = !!(env && env.production);
const plugins = [
new ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.resolve(__dirname, '../src')
),
new AngularCompilerPlugin({
mainPath: path.resolve(__dirname, 'src/singleSpaEntry.ts'),
tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
sourceMap: !prodMode,
skipCodeGeneration: !prodMode,
platform: 0,
hostReplacementPaths: {
"environments/environment.ts": prodMode ? "environments/environment.prod.ts" : "environments/environment.ts"
}
}),
new CopyWebpackPlugin([
{from: 'src/assets', to: 'assets'},
{from: 'src/mustUseAppFramework.html', to: 'index.html'}])
];
if (analyzeBundle) {
plugins.push(new BundleAnalyzerPlugin());
}
const devTypescriptLoader = [
{
test: /\.ts$/,
loader: webpackLoader
}
];
const prodTypescriptLoader = [
{
"test": /\.js$/,
"use": [
{
"loader": "@angular-devkit/build-optimizer/webpack-loader",
"options": {
"sourceMap": false
}
}
]
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
{
"loader": "@angular-devkit/build-optimizer/webpack-loader",
"options": {
"sourceMap": false
}
},
webpackLoader
]
}
];
const typescriptLoader = prodMode ? prodTypescriptLoader : devTypescriptLoader;
return {
entry: {
singleSpaEntry: 'src/singleSpaEntry.ts',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'release'),
libraryTarget: 'umd',
library: 'segmentation-root'
},
module: {
rules: [
{
test: /\.polyfill\/\.js$/,
use: [ 'script-loader' ]
},
{
test: /\.html$/,
loader: ["raw-loader", {
loader: 'replace-string-loader',
options: {
search: /assets/g,
replace: '\/seg\/assets',
file: false
}
},{
loader: 'replace-string-loader',
options: {
search: /\/assets/g,
replace: 'assets',
file: false
}
}]
},
{
test: /\.(jpe?g|png|webp|gif|otf|ttf|woff2?|ani)$/,
loader: "url-loader",
options: {
name: "[name].[hash:20].[ext]",
limit: 10000,
publicPath: '/seg/'
}
},
{
test: /\.(eot|svg|cur)$/,
loader: "file-loader",
options: {
name: "[name].[hash:20].[ext]",
publicPath: '/seg/'
}
},
{
test: /bootstrap\.scss$/,
exclude: [
path.resolve(__dirname, "src/styles.scss")
],
use: [{
loader: 'replace-string-loader',
options: {
search: /assets/g,
replace: '\/seg\/assets',
file: false
}
},{
loader: 'replace-string-loader',
options: {
search: /\/assets/g,
replace: 'assets',
file: false
}
}, 'to-string-loader', 'style-loader', 'css-loader', 'sass-loader'],
},
{
test: /styles\.scss$/,
exclude: [
path.resolve(__dirname, "node_modules/bootstrap")
],
use: [{
loader: 'replace-string-loader',
options: {
search: /assets/g,
replace: '\/seg\/assets',
file: false
}
},{
loader: 'replace-string-loader',
options: {
search: /\/assets/g,
replace: 'assets',
file: false
}
}, 'to-string-loader', 'style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.scss$/,
exclude: [
path.resolve(__dirname, "node_modules/bootstrap"),
path.resolve(__dirname, "src/styles.scss")
],
use: ['to-string-loader', {
loader: 'replace-string-loader',
options: {
search: /assets/g,
replace: '\/seg\/assets',
file: false
}
},{
loader: 'replace-string-loader',
options: {
search: /\/assets/g,
replace: 'assets',
file: false
}
}, 'raw-loader', 'sass-loader']
},
{
test: /\.css$/,
exclude: [
path.resolve(__dirname, "node_modules/bootstrap"),
path.resolve(__dirname, "src/styles.scss")
],
use: ['to-string-loader', 'style-loader', 'css-loader']
}
].concat(typescriptLoader)
},
resolve: {
extensions: [".ts", ".js"],
modules: [
__dirname,
'node_modules'
]
},
devtool: prodMode ? 'none' : 'inline-sourcemap',
externals: [],
plugins: plugins,
devServer: {
historyApiFallback: true,
watchOptions: {aggregateTimeout: 300, poll: 1000},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
}
};