ng11加载本地json文件 config.json

开发者经常遇到需要通过http请求本地的全局配置json文件来作升级提示或使用当前路径,在获取json文件过程中一直遇到文件404 not found 错误.

解决方案:

1.找到angular.json文件

2.进入projects ->architect ->build->assets配置

3.添加配置

{
   "glob": "config.json",
   "input": "src",
   "output": "./"
}

4.重启服务

5.此时发现import * as map from './fooooooo.json' 后不能直接使用 map,

改成import map from './fooooooo.json' 时,TS语法又会报错,这时,又需要在根目录添加一个json-typings.d.ts文件

declare module "*.json" {
    const value: any;
    export default value;
}

并且在tsconfig的compilerOptions中配置:"esModuleInterop":true //为所有导入创建命名空间对象

6.重启serve

好嘛,angular中引用个json咋就整这么多事。完结。

const { join, resolve } = require('path'); const path = require('path'); const fs = require('fs-extra'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const scenarioNames = fs.readdirSync(join('./src/scenarios')).filter(name => !name.startsWith('.')); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = allConfig => { const { onGetWebpackConfig } = allConfig; onGetWebpackConfig(config => { if (process.env.ANALYZE === 'true') { config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin, [ { // 生成 HTML 报告的目录(默认是 `stats.json` 和 `report.html`) filename: 'webpack-report.html', openAnalyzer: true, // 构建完成后自动打开分析器 analyzerMode: 'static', // 使用静态模式生成报告文件 }, ]); } config.plugin('VueLoaderPlugin').use(VueLoaderPlugin); config.merge({ module: { rule: [ { test: /\.vue$/, loader: 'vue-loader', }, ], }, }); config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [ { configFile: './tsconfig.json', }, ]); config.merge({ node: { fs: 'empty', }, }); config.merge({ resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }); scenarioNames.forEach(name => { const hasTsx = fs.existsSync(join(`./src/scenarios/${name}/index.tsx`)); config.merge({ entry: { [name]: hasTsx ? require.resolve(`./src/scenarios/${name}/index.tsx`) : require.resolve(`./src/scenarios/${name}/index.ts`), }, }); config.plugin(name).use(HtmlWebpackPlugin, [ { inject: false, templateParameters: { scenario: name, version: new Date().getTime(), }, template: require.resolve('./public/index.ejs'), filename: `${name}.html`, }, ]); }); config.plugin('preview').use(HtmlWebpackPlugin, [ { inject: false, templateParameters: { version: new Date().getTime(), }, template: require.resolve('./public/preview.html'), filename: 'preview.html', }, ]); config.plugin('archive').use(HtmlWebpackPlugin, [ { inject: false, templateParameters: { version: new Date().getTime(), }, template: require.resolve('./public/archive.html'), filename: 'archive.html', }, ]); config.plugin('eaccountingArchive').use(HtmlWebpackPlugin, [ { inject: false, templateParameters: { version: new Date().getTime(), }, template: require.resolve('./public/eaccountingArchive.html'), filename: 'eaccountingArchive.html', }, ]); config.plugin('appending').use(HtmlWebpackPlugin, [ { inject: false, templateParameters: { version: new Date().getTime(), }, template: require.resolve('./public/appending.html'), filename: 'appending.html', }, ]); config.plugin('CopyWebpackPlugin').tap(([args]) => { console.log('args',args) return [ [ { ...(args[0] || {}), }, ], ]; }); config.plugins.delete('hot'); config.devServer.hot(false); const proxyHost = 'http://kwesit.huawei.com'; // siT环境 config.devServer.proxy({ '/efinance/icp/xapp/designer': { target: proxyHost, // logLevel: 'debug', changeOrigin: true, secure: false, }, '/efinance/icp/xapp/material': { target: proxyHost, // logLevel: 'debug', changeOrigin: true, secure: false, }, '/icp/comment': { target: proxyHost, // logLevel: 'debug', changeOrigin: true, secure: false, }, '/efinance/icp/cardmaker': { target: proxyHost, // logLevel: 'debug', changeOrigin: true, secure: false, }, '/fin/front/one/gw': { target: proxyHost, changeOrigin: true, secure: false, }, '/efinance/icp/cardmaker/services/metadata': { target: proxyHost, changeOrigin: true, secure: false, }, '/efinance/icp/designstudio/services/jalor/lookup': { target: proxyHost, changeOrigin: true, secure: false, }, }); // config.optimization.minimize(true), config.module // fixes https://github.com/graphql/graphql-js/issues/1272 .rule('mjs$') .test(/\.mjs$/) .include.add(/node_modules/) .end() .type('javascript/auto'); if (process.env.DEV !== 'true') { config.optimization.splitChunks({ name: 'vendor', chunks: 'all', cacheGroups: { vendor: { test: /node_modules/, chunks: 'initial', name: 'vendor', enforce: true, }, }, }); // config.optimization.usedExports(true); config.optimization .minimize(true) .minimizer('terser') .use(TerserPlugin, [ { terserOptions: { compress: { pure_funcs: ['console.log'], // 可选:删除调试日志 }, output: { comments: false, // 可选:删除文件注释 }, mangle: { toplevel: true, }, }, parallel: true, }, ]); } }); }; ,build使用 @alib/build-scripts,能否通过配置调整,使得这个项目模板中的script标签都通过打包构建时自动生成?,打包文件带上哈希值,利用好浏览器缓存
最新发布
08-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值