Angular 6 - build with assets not found
I'm trying to create a build of my angular's project.
I'm using scss with assets like this:
.ciao {
background-image: url("../../assets/images/bck--registration-company.png");
}
running this code:
ng build --prod --configuration=coll --base-href ./
I have inside dist folder, in the same directory of index.html, the file "bck--registration-company.png" and the "assets" folder where inside there is another "bck--registration-company.png". I would like to use resources inside assets folder.
I've tried to change base href, relative and absolute image path but nothing.
example:
.background--image-carousel2{
background-image: url("/assets/images/carousel2.jpg");
}
with this path the REQUEST URL) is :
Request URL: http://localhost:63342/assets/images/carousel2.jpg
this is wrong because it could be:
http://localhost:63342/project/dist/name_project/assets/images/bck--registration-company.png
in my angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/name_project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
]
},
How could I resolve this?
Thank you.
angular typescript sass asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
add a comment |
I'm trying to create a build of my angular's project.
I'm using scss with assets like this:
.ciao {
background-image: url("../../assets/images/bck--registration-company.png");
}
running this code:
ng build --prod --configuration=coll --base-href ./
I have inside dist folder, in the same directory of index.html, the file "bck--registration-company.png" and the "assets" folder where inside there is another "bck--registration-company.png". I would like to use resources inside assets folder.
I've tried to change base href, relative and absolute image path but nothing.
example:
.background--image-carousel2{
background-image: url("/assets/images/carousel2.jpg");
}
with this path the REQUEST URL) is :
Request URL: http://localhost:63342/assets/images/carousel2.jpg
this is wrong because it could be:
http://localhost:63342/project/dist/name_project/assets/images/bck--registration-company.png
in my angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/name_project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
]
},
How could I resolve this?
Thank you.
angular typescript sass asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
Try thisurl("./assets/images/carousel2.jpg");
– inthevortex
Nov 16 '18 at 8:58
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29
add a comment |
I'm trying to create a build of my angular's project.
I'm using scss with assets like this:
.ciao {
background-image: url("../../assets/images/bck--registration-company.png");
}
running this code:
ng build --prod --configuration=coll --base-href ./
I have inside dist folder, in the same directory of index.html, the file "bck--registration-company.png" and the "assets" folder where inside there is another "bck--registration-company.png". I would like to use resources inside assets folder.
I've tried to change base href, relative and absolute image path but nothing.
example:
.background--image-carousel2{
background-image: url("/assets/images/carousel2.jpg");
}
with this path the REQUEST URL) is :
Request URL: http://localhost:63342/assets/images/carousel2.jpg
this is wrong because it could be:
http://localhost:63342/project/dist/name_project/assets/images/bck--registration-company.png
in my angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/name_project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
]
},
How could I resolve this?
Thank you.
angular typescript sass asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
I'm trying to create a build of my angular's project.
I'm using scss with assets like this:
.ciao {
background-image: url("../../assets/images/bck--registration-company.png");
}
running this code:
ng build --prod --configuration=coll --base-href ./
I have inside dist folder, in the same directory of index.html, the file "bck--registration-company.png" and the "assets" folder where inside there is another "bck--registration-company.png". I would like to use resources inside assets folder.
I've tried to change base href, relative and absolute image path but nothing.
example:
.background--image-carousel2{
background-image: url("/assets/images/carousel2.jpg");
}
with this path the REQUEST URL) is :
Request URL: http://localhost:63342/assets/images/carousel2.jpg
this is wrong because it could be:
http://localhost:63342/project/dist/name_project/assets/images/bck--registration-company.png
in my angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/name_project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
]
},
How could I resolve this?
Thank you.
angular typescript sass angular typescript sass asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
asked Nov 16 '18 at 8:50
TommyR22TommyR22
52
52
Try thisurl("./assets/images/carousel2.jpg");
– inthevortex
Nov 16 '18 at 8:58
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29
add a comment |
Try thisurl("./assets/images/carousel2.jpg");
– inthevortex
Nov 16 '18 at 8:58
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29
Try this
url("./assets/images/carousel2.jpg");– inthevortex
Nov 16 '18 at 8:58
Try this
url("./assets/images/carousel2.jpg");– inthevortex
Nov 16 '18 at 8:58
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29
add a comment |
1 Answer
1
active
oldest
votes
Try this way
Angular is able to access directly assets folder.
.ciao {
background-image: url("assets/images/bck--registration-company.png");
}
Then make a build
ng build --prod
Then put the whole system path in dist/index.html file
In base url set the whole path of the project folder.
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
i've a error in build time:ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)
– TommyR22
Nov 16 '18 at 9:28
Try withbackground-image: url(./assets...
– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334320%2fangular-6-build-with-assets-not-found%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this way
Angular is able to access directly assets folder.
.ciao {
background-image: url("assets/images/bck--registration-company.png");
}
Then make a build
ng build --prod
Then put the whole system path in dist/index.html file
In base url set the whole path of the project folder.
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
i've a error in build time:ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)
– TommyR22
Nov 16 '18 at 9:28
Try withbackground-image: url(./assets...
– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
add a comment |
Try this way
Angular is able to access directly assets folder.
.ciao {
background-image: url("assets/images/bck--registration-company.png");
}
Then make a build
ng build --prod
Then put the whole system path in dist/index.html file
In base url set the whole path of the project folder.
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
i've a error in build time:ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)
– TommyR22
Nov 16 '18 at 9:28
Try withbackground-image: url(./assets...
– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
add a comment |
Try this way
Angular is able to access directly assets folder.
.ciao {
background-image: url("assets/images/bck--registration-company.png");
}
Then make a build
ng build --prod
Then put the whole system path in dist/index.html file
In base url set the whole path of the project folder.
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
Try this way
Angular is able to access directly assets folder.
.ciao {
background-image: url("assets/images/bck--registration-company.png");
}
Then make a build
ng build --prod
Then put the whole system path in dist/index.html file
In base url set the whole path of the project folder.
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
answered Nov 16 '18 at 8:58
Sachin ShahSachin Shah
1,7661516
1,7661516
i've a error in build time:ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)
– TommyR22
Nov 16 '18 at 9:28
Try withbackground-image: url(./assets...
– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
add a comment |
i've a error in build time:ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)
– TommyR22
Nov 16 '18 at 9:28
Try withbackground-image: url(./assets...
– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
i've a error in build time:
ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)– TommyR22
Nov 16 '18 at 9:28
i've a error in build time:
ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js): background-image: url(assets/images/bck--registration-company.png"); ^ Invalid CSS after "...tration-company": expected expression (e.g. 1px, bold), was '.png");' in C:Userst.ruscicaworkspacews_svn_agosprojectproject_namesrcapplandinglanding.component.scss (line 3, column 64)– TommyR22
Nov 16 '18 at 9:28
Try with
background-image: url(./assets...– Sachin Shah
Nov 16 '18 at 9:34
Try with
background-image: url(./assets...– Sachin Shah
Nov 16 '18 at 9:34
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError.
– TommyR22
Nov 16 '18 at 9:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334320%2fangular-6-build-with-assets-not-found%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try this
url("./assets/images/carousel2.jpg");– inthevortex
Nov 16 '18 at 8:58
same here, error: NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError
– TommyR22
Nov 16 '18 at 9:29