0

I am using Angular2 cli with webpack and trying to create a stand alone module that contains a relative path css file and I cannot get it to work without using full path.

I have followed the docs here and still doesnt work. https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

@Component({
    selector: 'mymodulecomponent',
    template: '<view></view>',
    styleUrls: ['./mystyle.component.scss']
})

Is there some dependency or what could I be doing wrong?

I ultimately want to build for npm, so if there is another way to include cc file I am open.

Rob
  • 11,185
  • 10
  • 36
  • 54
  • try to drop the "./" from the path: ['mystyle.component.scss']. if this doesn't work, try to use simple css file. – Avi Dec 03 '16 at 19:27
  • Your code snippet here doesn't have any problem and using angular-cli you have also webpack pre-configured unless you've tweaked it. So the problem must be in your angular app source code and it might help if you try and reproduce it in an app sample and provide the code here. – jal Dec 05 '16 at 19:17
  • @jali-ai I have not modified any of the default angular cli or webpack settings. Do you have any seed projects or plunks demonstrating it? I have tried several and none work with relative path css. – Rob Dec 05 '16 at 19:28
  • @Rob here is a seed project with minimal `scss` code in `app.component.scss` [angular-cli-project-seed](https://github.com/Ja1i/angular-cli-project-seed.git) But all I have done is `ng new angular-cli-project-seed --style=scss`. To make sure you can first update your angular-cli: `npm uninstall -g angular-cli && npm cache clean && npm install -g angular-cli` – jal Dec 06 '16 at 14:40
  • Something else is that you are mentioning `css` files but you have `scss` in your code. To set your default style you use `--style` option with one of `scss`, `sass` or `styl` values on `ng new command`. To use `css` only you don't need this option – jal Dec 06 '16 at 15:04
  • So I removed the seed project since there was no feedback but instructions should work anyway. – jal Dec 10 '16 at 14:20

1 Answers1

0

Add a module id, like this:

@Component({
    moduleId: module.id,
    selector: 'mymodulecomponent',
    template: '<view></view>',
    styleUrls: ['./mystyle.component.scss']
})

see also: Angular2 - What is the meanings of module.id in component?

Community
  • 1
  • 1
Remigius Stalder
  • 1,921
  • 2
  • 26
  • 31
  • The answer you are referring to, correctly states that using `webpack` you don't need to set `module.id`, and that's the case in this question. – jal Dec 05 '16 at 19:03
  • correct, webpack does not use module.id and the documented approach for webpack does not seem to work. – Rob Dec 05 '16 at 19:24
  • So, do you use cli with Webpack (i.e. plain vanilla cli after the switch from SystemJS to Webpack), or do you use Webpack explicitly (i.e. the full monty, with webpack.config.?s etc.)? The former does not provide a full fledeged Webpack (yet), it is only used "under the hood" (and mandates the moduleId), while the latter poses several problems in conjunction with cli (see cli' issues) - probably a seed project might be a better choice to start with than cli. In any case some more information might help us helping you. – Remigius Stalder Dec 06 '16 at 13:01