ERROR in multi styles

[keithmichelson]

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Mac OSX El Capitan

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.24
node: 5.1.1
os: darwin x64
@angular/common: 2.3.1
@angular/compiler: 2.3.1
@angular/core: 2.3.1
@angular/forms: 2.3.1
@angular/http: 2.3.1
@angular/platform-browser: 2.3.1
@angular/platform-browser-dynamic: 2.3.1
@angular/router: 3.3.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
Updated cli from 14 to the 24
fixed any issues with ng-init
added this in angular-cli
"styles": [
"../node_modules/bootstrap/dist/css/boootstrap.css",
"styles.scss"
]

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in compiler_1.StaticSymbolResolver is not a function

ERROR in multi styles
Module not found: Error: Can't resolve '/Users/jl/Documents/w/flan/node_modules/bootstrap/dist/css/boootstrap.css' in '/Users/jl/Documents/w/flan'
@ multi styles

Mention any other details that might be useful.

also ran into problems when running
npm install bootstrap@4.0.0-alpha.5 --save
├── UNMET PEER DEPENDENCY @angular/compiler@2.3.1
├── UNMET PEER DEPENDENCY @angular/core@2.3.1
├── bootstrap@4.0.0-alpha.5
└── UNMET PEER DEPENDENCY rxjs@5.0.1

---

Thanks! We'll be in touch soon.

[beeman]

@keithmichelson I think the issue lies in the fact that you're mixing scss with css, this is why it mentions @ multi styles.

One way to fix this is to include bootstrap in your styles.scss like this:

@import '~bootstrap/dist/css/boootstrap.css';

[keithmichelson]

@beeman Thanks for the reply. I will give that a try but I do have 3 other projects doing it the same way that work fine on older cli betas. (14 and 18)

[keithmichelson]

That gets rid of the error, but I'm still getting the other error so I can't see if the styles actually work. compiler_1.StaticSymbolResolver

Using both styles should be fine though, it used to work. Something has changed.

[billy-syrett]

Also getting the compiler_1.StaticSymbolResolver error but I'm not using a mix of CSS and SCSS:

      "styles": [
        "assets/css/stylenew.css",
        "assets/css/normalize.css",
        "assets/css/skeleton.css",
        "assets/css/font-awesome.min.css"
      ],

ng version:

angular-cli: 1.0.0-beta.24
node: 4.4.7
os: darwin x64
@angular/common: 2.3.1
@angular/compiler: 2.3.1
@angular/core: 2.3.1
@angular/forms: 2.3.1
@angular/http: 2.3.1
@angular/platform-browser: 2.3.1
@angular/platform-browser-dynamic: 2.3.1
@angular/router: 3.3.1
@angular/compiler-cli: 2.4.1

[filipesilva]

There shouldn't be any issue in mixing sass/less/css/whatever.

If you can get me a simple repro, I can try to debug, but with just this information there isn't much I can do.

Newb here, but this looks like a simple typo in your angular-cli.json: "boootstrap.css" should be "bootstrap.css".

[keithmichelson]

Thanks for the replies. Yes dumb mistake with that typo @pushingrobot good find. I am still getting the other error though. ERROR in compiler_1.StaticSymbolResolver is not a function
I'll try and setup a repo, thanks for the help.

[billy-syrett]

@keithmichelson if it helps, I had the same problem and updating my packages resolved it: #3799

[filipesilva]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[whisher]

Hello there,
ng cli version 7.3.1

Just run

ng new mytest
router yes
sass

npm run build

ERROR in multi ./src/styles.sass

I think there are problems in angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mytest": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "sass"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/mytest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.sass"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mytest:build"
},
"configurations": {
"production": {
"browserTarget": "mytest:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mytest:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.sass"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
},
"mytest-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "mytest:serve"
},
"configurations": {
"production": {
"devServerTarget": "mytest:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"/node_modules/"
]
}
}
}
}
},
"defaultProject": "mytest"
}

styles.sass should be tyles.scss as usual :(

[filipesilva]

@whisher I think you're seeing #13550 / #13631.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}