I want to serve two angular apps on different express routes: example.com/admin for one app, and example.com/customer for another app.
app.use("/admin", express.static(path.join(process.cwd(), "web/dist/admin")));
app.use("/customer", express.static(path.join(process.cwd(), "web/dist/customer")));
app.get("/admin/**", (req, res) => {
res.sendFile(path.join(process.cwd(), "web/dist/admin/index.html"));
});
app.get("/customer/**", (req, res) => {
res.sendFile(path.join(process.cwd(), "web/dist/customer/index.html"));
});
And everything works perfectly, but when there's an image to load angular can't get the image:
https://example.com:3000/global-resources/images/no-image.svg 404 (Not Found)
All the other files are loaded as they should:
https://example.com:3000/admin/main.js 200
https://example.com:3000/admin/runtime.js 200
For some reason global resources are not loaded from /admin route.
This is how global-resources are configured in angular.json file:
{
"projects": {
"admin": {
"architect": {
"build": {
"options": {
"assets": [
...
{
"glob": "**/*",
"input": "global-resources",
"output": "global-resources"
},
],
}
}
}
},
"customer": {
"architect": {
"build": {
"options": {
"assets": [
...
{
"glob": "**/*",
"input": "global-resources",
"output": "global-resources"
},
],
}
}
}
}
}
}
Why global-resources are not loaded and how do I fix this?
Related
I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.
It looks like that you are using a custom metro.config.js that does not extend #expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.
app.json
{
"expo": {
"name": "Unfiltered",
"slug": "unfiltered-with-kiran",
"version": "1.0.5",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "blahblahblah",
"buildNumber": "1"
},
"android": {
"versionCode": 2,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "blahblahblah"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname);
return {
resolver: {
assetExts: [
...assetExts,
'png',
'jpg',
'jpeg',
'gif',
'svg',
'ttf',
'otf',
'woff',
'woff2',
],
sourceExts: [
...sourceExts,
'cjs',
'jsx',
'ts',
'tsx',
'mjs',
'md',
'mdx',
],
},
};
})();
I finally found the answer, I had to add the transformer and assetPlugins.
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles'],
},
I have been trying to determine what has changed doing this update that would cause the icons to no longer render correctly. I do not receive any errors in the browser, but I see that it is no longer trying to load the font file (previously was /packs/media/fonts/element-icons-xxx.woff)
The manifest.json contains an entry for the file:
"media/fonts/element-icons.woff": "/packs/media/fonts/element-icons-313f7dac.woff",
I have compared the generated webpack.config.js and see very few changes:
"output.pathinfo: true" has been removed
""cache": true," has been removed
under ""loader": "sass-loader"" the following has been added under "options":
"sassOptions": {
"includePaths": []
}
under "plugins" a ""logger": {}," has been added above ""pathCache": {},"
The theme is currently being loaded via babel.config.js under plugins:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
But I have also tried importing it in the main entrypoint with:
import 'element-ui/lib/theme-chalk/index.css';
with the same result.
I have added in the 'resolve-url-loader' as recommended in some posts:
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
Which places it right above the 'sass-loader':
{
"key": "sass",
"value": {
"test": {},
"use": [
"/Users/tom/LGL_DEV/lgl/node_modules/#rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 2,
"modules": false
}
},
{
"loader": "postcss-loader",
"options": {
"config": {
"path": "/Users/tom/LGL_DEV/lgl"
},
"sourceMap": true
}
},
{
"loader": "resolve-url-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"sassOptions": {
"includePaths": []
}
}
}
],
"sideEffects": true,
"exclude": {}
}
},
Thoughts?
Update: I have incrementally updated webpacker to see where this breaks:
4.2.2: element-icons load just fine.
4.3.0: element-icons load just fine.
5.0.0: not loading element-icons.
webpack version didn't change
mini-css-extract-plugin changed from 0.8.2 to 0.9.0
file-loader changed from 4.3.0 to 5.1.0
5.0.1: not loading element-icons.
I just try to install Ghost to Google Cloud App Engine. I follow the official instruction but I got error below:
2020-07-25 10:40:52 default[20200725t173735] Error: EROFS: read-only
file system, open
'/workspace/node_modules/ghost/content/logs/https___yaskurweb_appspot_com_production.error.log'
Then I change config.production.json from:
"logging": {
"level": "info",
"rotation": {
"enabled": true
},
"transports": ["file", "stdout"]
}
to
"logging": {
"transports": [
"stdout"
]
},
But I got another error below:
2020-07-25 10:58:47 default[20200725t175429] Error: EROFS: read-only
file system, copyfile
'/workspace/node_modules/ghost/core/frontend/services/settings/default-routes.yaml'
-> '/workspace/node_modules/ghost/content/settings/routes.yaml'
I think it's caused when Ghost tries to copy routes.yaml file to another directory. So I need to know how to disable writing any file in Ghost?
my full config.production.json is:
{
"url": "https://myproject.appspot.com",
"fileStorage": false,
"server": {
"port": 8080,
"host": "0.0.0.0"
},
"database": {
"client": "mysql",
"connection": {
"host": "*",
"port": "3306",
"user": "dev",
"password": "*",
"database": "test_db"
}
},
"mail": {
"transport": "Direct"
},
"logging": {
"transports": [
"stdout"
]
},
"process": "systemd",
"paths": {
"contentPath": "content/"
}
}
The problem is that config set content path to node_modules. it's should be installed root path.
so I changed from:
"paths": {
"contentPath": "content/"
}
to
"paths": {
"contentPath": "/workspace/content/"
}
And then work perfectly...
I am following this React JS Tutorial.
It's throwing some jsx-a11y/anchor-is-valid errors.
I found a hack to add the following code to what I am assuming is a .eslintrc file:
{
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
But I have no idea where it is or if I should create it in the src folder. Do I add anything to package.json file?
This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically, or you can specify a configuration file on the command line.
In package.json:
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
}
This needs to be at root level of the project
Trying to set up some testing in a typescript project. For some reason, though, I'm getting a 404 on the spec file (even though I can see the path is correct). Is there something I'm missing in my Karma configuration file?
module.exports = function(config) {
config.set({
basePath: ".",
frameworks: ["jspm", "jasmine"],
reporters: ["progress"],
browsers: ["PhantomJS"],
files: [
],
proxies: {
"/test/": "/base/test/",
"/src/": "/base/src/"
},
jspm: {
stripExtension: false,
loadFiles: [
"test/**/*.ts"
],
serveFiles: [
"src/**/*.ts"
]
},
preprocessors: {
"**/*.ts": ["typescript"]
},
typescriptPreprocessor: {
options: {
noResolve: false,
module: 'amd'
},
transformPath: function(path) {
return path.replace(/\.ts$/, '.js');
}
}
});
}
Or my config.js file?
System.config({
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"typescript": "npm:typescript#1.8.10",
"github:jspm/nodelibs-os#0.1.0": {
"os-browserify": "npm:os-browserify#0.1.2"
},
"npm:os-browserify#0.1.2": {
"os": "github:jspm/nodelibs-os#0.1.0"
},
"npm:typescript#1.8.10": {
"os": "github:jspm/nodelibs-os#0.1.0"
}
}
});
I had the same sort of issue except wasn't using the typescript-preprocessor as I wanted JSPM to handle that.
See my question at Karma + JSPM + Typescript - not found '.ts.js' and the repo at https://github.com/Larchy/karma-jspm-typescript-coverage
Basically added a duplicate package to my jspm config to support karma serving at a higher level
"app": {
"main": "app",
"format": "system",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
},
"src/app": {
"main": "app",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
and added proxies to karma config, as you already have:
proxies : {
"/base/jspm_packages" : "/base/src/jspm_packages"
},