[英]Angular 8: access the assets folder when running ng build --prod --base-href './project1'
My client want me to deploy multiple projects on the same ngnix
server with the following configuration.我的客户希望我使用以下配置在同一个ngnix
服务器上部署多个项目。
location /project1/ {
alias /usr/local/var/www/project1/;
try_files $uri$args $uri$args/ /project1/index.html;
}
In the above configuration I could not access the assets folder as it's in the project1 folder and I try to access it from the root of the domain example src:在上面的配置中,我无法访问资产文件夹,因为它位于 project1 文件夹中,我尝试从域示例 src 的根目录访问它:
url('/assets/fonts/texta/Texta-Regular/Texta-Regular.eot')
When I change the path with src: url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot')
I'm getting following problem when building the production build当我使用 src: url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot')
更改路径时,我在构建生产版本时遇到以下问题
ERROR in ./src/styles.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleError: Module Error (from ./node_modules/postcss-loader/src/index.js): (Emitted value instead of an instance of Error) CssSyntaxError: /Users/Desktop/personal/projects/example/src/styles.scss:10115:13: Can't resolve './assets/fonts/texta/Texta-Regular/Texta-Regular.eot%3F' in '/Users/Desktop/personal/projects/example/src'错误在 ./src/styles.scss 模块构建失败(来自 ./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleError:模块错误(来自 ./node_modules/postcss-loader/src/index .js): (Emitted value 而不是 Error 的实例) CssSyntaxError: /Users/Desktop/personal/projects/example/src/styles.scss:10115:13: 无法解析 './assets/fonts/texta/ '/Users/Desktop/personal/projects/example/src' 中的 Texta-Regular/Texta-Regular.eot%3F'
You can't use absolute paths starting from "/" so you have 2 options:您不能使用从“/”开始的绝对路径,因此您有两个选项:
1- Using relative paths (with "../" to go back up the hierarchy). 1- 使用相对路径(使用“../”返回层次结构)。 This one is a bit messy but easy to do.这个有点麻烦,但很容易做到。
2- Define your assets folder in the compilerOptions of your tsconfig.json as follows: 2- 在 tsconfig.json 的 compilerOptions 中定义资产文件夹,如下所示:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@assets/*": ["./src/assets/*"],
}
}
Then you can use "@assets/" in your Url.然后您可以在您的网址中使用“@assets/”。 Take note of the baseUrl and assets url and change it accordingly based on your project structure.记下 baseUrl 和 assets url,并根据您的项目结构对其进行相应更改。
Hope this helps.希望这可以帮助。
I have not problem to compile url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot').我编译 url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot') 没有问题。 Please check the Texta-Regular.eot presence.请检查 Texta-Regular.eot 的存在。
angular.json 中的 rebaseRootRelativeCssUrls 标志确实对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.