Import global scss files

[weini01]

Hi everybody,

I just tried out the new angular-compiler but my global scss files doesn´t work anymore. Is this a bug or is there any solution to get my global scss files to work. And how do you import external scss files from npm like bootstrap.scss?

[pmcochrane]

I had to create a file that imported all my scss files. Then I had to update app.component to tell it to use it. There is no documentation for this but it is mentioned deep in a github response

e.g for the import scss file:

@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';

@import '_custom.scss';

@import 'bootstrap/scss/bootstrap.scss';
@import 'sass-font-awesome/font-awesome.scss';

@import "1-main.scss";
@import "2-general.scss";
@import "3-retis-angular-material.scss";
@import "9-retis.scss";
@import "9-search.scss";
@import "base64-images.scss";

App.Component.ts:

@Component({
    selector: "retis-app",
    templateUrl: './app.component.html',
    styleUrls: [
        './css/0-importAllScssFiles.scss',
        './app.component.scss',
    ],
    encapsulation: ViewEncapsulation.None,  // tslint:disable-line // This makes the scss available to all components
})

Hope that helps

[weini01]

@pmcochrane Thank you for your answer. I missed the encapsulation tag. Now i have another problem. If I write Component Template or Styles like this.

@Component({
    selector: "my-component",
    template: `<h1>Hello World</h1>`,
    styles: [`
          h1 {
            color: red
          }
       `],
}) 

I got the following Html output in the Browser

<my-component _ngcontent-c5=""  _nghost-c6="" ng-reflect-suggestions="">                                                                                                   
                       //
                       <h1>Hello World</h1>
                                                                                     //
  </my-component>

The double slashes are shown in the browser output and also the generated inline style in the html has double slashes like this.

<style>
//[_ngcontent-c4]   h1[_ngcontent-c4] {    
//
 color: red
//
// }
</style>

templates and styles with templateUrl and styleUrls are working

[ardatan]

@weini01 try changing target option in tsconfig.json to ‘es5’

[ardatan]

This needs a new feature which will be coming in next release. So this is not a bug.

[Urigo]

we've just released the new angular-compilers@0.2.9 which suppose to solve this problem.

Please let us know if that is not the case

[weini01]

@Urigo just updated to the new angular-compiler@0.2.9.2 but the es5 -> es2015 issue doesn´t work. In the new Version (from 0.2.8.0 to 0.2.9.2) i also got a lot of warnings /errors.

I just pasted some of them:

node_modules/@schematics/angular/component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts (1, 27): String literal expected.node_modules/@schematics/angular/component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts (1, 33): Cannot find name 'viewEncapsulation'.node_modules/@schematics/angular/module/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-routing.module.ts (6, 11): Argument of type '{ imports: boolean[]; exports: (typeof RouterModule)[]; }' is not assignable to parameter of type 'NgModule'.
  Types of property 'imports' are incompatible.
    Type 'boolean[]' is not assignable to type '(any[] | Type<any> | ModuleWithProviders)[]'.
      Type 'boolean' is not assignable to type 'any[] | Type<any> | ModuleWithProviders'.
node_modules/@schematics/angular/module/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-routing.module.ts (7, 26): Property 'for' does not exist on type 'typeof RouterModule'.
node_modules/@schematics/angular/module/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-routing.module.ts (7, 33): Cannot find name 'routingScope'.
node_modules/@schematics/angular/enum/files/__path__/__name@dasherize__.enum.ts (1, 17): Cannot find name 'classify'.
node_modules/meteor-typings/1.4/test/test.ts (467, 8): Property '_localStorage' does not exist on type 'typeof Meteor'.
 node_modules/angular2-file-drop/src/file-drop.ts (81, 7): Cannot find name 'FileAPI'.
node_modules/protractor/exampleTypescript/spec.ts (18, 40): Argument of type '"Hello Julie!"' is not assignable to parameter of type 'Expected<Promise<string>>'.
server/imports/accounts/accounts.server.ts (1, 32): Cannot find module 'meteor/accounts-base/accounts_server.js'.
server/imports/accounts/accounts.server.ts (2, 26): Cannot find module 'meteor/wylio:mandrill'.
node_modules/karma/config.tpl.ts (13, 19): Cannot find name 'FRAMEWORKS'.
node_modules/@schematics/angular/application/files/__path__/main.ts (4, 27): Cannot find module './app/app.module'.

seems like my tsconfig file doesn´t work correctly anymore...

[ardatan]

Could I see your tsconfig and package.json?

[weini01]

this is my tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "baseUrl": ".",
    "paths": {
      "both/*": ["./both/*"],
      "client/*": ["./client/imports*"],
      "server/*": ["./server/imports*"],
      "shared/*": ["./client/imports/shared/*"]
    },
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "skipLibCheck": true,
    "stripInternal": true,
    "noImplicitAny": false,
    "types": [
      "@types/meteor",
      "@types/meteor-collection-hooks",
      "@types/meteor-accounts-phone",
      "@types/node",
      "@types/jasmine",
      "@types/mocha"
    ]
  },
  "include": [
    "both/**/*.ts",
    "client/**/*.ts",
    "server/**/*.ts",
    "shared/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

and this are the dependencies in my package.json:

"dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/platform-server": "^5.0.3",
    "@angular/router": "^5.0.3",
    "@ionic-native/barcode-scanner": "^4.4.2",
    "@ionic-native/brightness": "^4.4.2",
    "@ionic-native/core": "^4.4.2",
    "@ionic-native/image-picker": "^4.4.2",
    "@ionic-native/secure-storage": "^4.4.2",
    "@ionic-native/status-bar": "^4.4.2",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "^2.1.3",
    "angular2-file-drop": "^0.2.0",
    "angular2-meteor": "^0.7.1",
    "angular2-meteor-polyfills": "^0.2.0",
    "angular2-moment": "^1.7.0",
    "aws4": "^1.6.0",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "bootstrap": "^4.0.0-beta.2",
    "both": "^0.0.0",
    "caseless": "^0.12.0",
    "core-js": "^2.5.1",
    "crypto-js": "^3.1.9-1",
    "fast-deep-equal": "^1.0.0",
    "forever-agent": "^0.6.1",
    "hammerjs": "^2.0.8",
    "ionic-angular": "^3.9.2",
    "ionicons": "^3.0.0",
    "jsbarcode": "^3.8.0",
    "json-stringify-safe": "^5.0.1",
    "jsprim": "^2.0.0",
    "mangopay2-nodejs-sdk": "^1.5.0",
    "meteor-rxjs": "^0.4.8",
    "moment": "^2.19.2",
    "ng2-jsoneditor": "^0.1.1",
    "ng2-pagination": "^2.0.1",
    "ngx-window-token": "0.0.4",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.2",
    "spawn-sync": "^1.0.15",
    "sshpk": "^1.13.1",
    "stringstream": "0.0.5",
    "sw-toolbox": "^3.6.0",
    "tough-cookie": "^2.3.3",
    "typescript-compiler": "^1.4.1",
    "ua-parser-js": "^0.7.17",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/compiler-cli": "^5.0.3",
    "@angular/language-service": "^5.0.3",
    "@ionic/app-scripts": "^2.1.4",
    "@types/jasmine": "^2.8.2",
    "@types/jasminewd2": "~2.0.2",
    "@types/meteor": "^1.4.12",
    "@types/meteor-accounts-phone": "^0.0.5",
    "@types/meteor-collection-hooks": "^0.8.3",
    "@types/meteor-publish-composite": "^0.0.32",
    "@types/mocha": "^2.2.44",
    "@types/node": "^7.0.48",
    "@types/ua-parser-js": "^0.7.32",
    "@types/underscore": "^1.8.5",
    "angular2-meteor-tests-polyfills": "^0.0.2",
    "autoprefixer": "^6.5.3",
    "circular-dependency-plugin": "^3.0.0",
    "codelyzer": "~3.2.0",
    "copy-webpack-plugin": "^4.2.3",
    "css-loader": "^0.28.1",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.29.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.0.5",
    "meteor-client-bundler": "^0.3.0",
    "meteor-node-stubs": "^0.2.8",
    "meteor-typings": "^1.3.1",
    "postcss-loader": "^1.3.3",
    "postcss-url": "^5.1.2",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "source-map-loader": "^0.2.0",
    "style-loader": "^0.13.1",
    "stylus-loader": "^3.0.1",
    "tmp": "0.0.33",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.6.1",
    "typescript-extends": "^1.0.1",
    "uglifyjs-webpack-plugin": "1.0.0",
    "url-loader": "^0.6.2",
    "webpack": "~3.8.1",
    "webpack-concat-plugin": "1.4.0",
    "webpack-dev-server": "~2.9.3"
  },
  "cordovaPlugins": [
    "phonegap-plugin-barcodescanner",
    "cordova-plugin-brightness",
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "cordova-plugin-secure-storage",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],

[ardatan]

Are you using MeteorCLI or AngularCLI for client bundling?

[weini01]

First i used MeteorCLI with angular2-compiler then AngularCLI and now i switched back to MeteorCLI with angular-compiler. For the mobile App I‘m using IonicCLI.

[ardatan]

I think you have to clean your project first, there are many packages there(even old meteor-typings, angular2-meteor etc) MeteorCLI can build a mobile app, too. So, I recommend you to create a fresh project by using our new examples.

[Slavrix]

I'm also seeing this issue. I was using the 0.2.9 versions but have now rolled back to 2.8 as the tsconfig seemed to be being ignored. and i had many amny many warnings from node_modules packages even though i have it in my excludes in the tsconfig.

Another thing i found that i dont know is related to any changes or not, is that it is unable to build node_modules that use the @import "~/<module>" syntax (with the tilde) to import into sass or scss files.

[weini01]

I cleaned my project and now I have less warnings, but there are still "Cannot find module 'meteor/..." warnings. Seems like it couldn´t import Meteor Modules. And the compiler also tries to compile node_modules packages as @Slavrix said. In the 0.2.8 Version of angular-compilers it worked without warnings. I will now try to roll back to 0.2.8...

[ardatan]

@Slavrix If the compiler doesn't ignore your files, es2015 modules won't work; because they have to be transpiled into commonjs/es5 syntax. So, this is a known thing, not a bug. In previous version, logger didn't work well, so this is not about the previous version's better stability. For the 2nd thing, as you can see in documentation, we have already showed how external modules should be imported. https://github.com/Urigo/angular-meteor/tree/master/atmosphere-packages/angular-compilers#import-from-node_modules '~' thing is not a standard, it is just a external plugin for node-sass; https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-package-importer We will also add this plugin to our compiler, to make it similar to angular-cli's. So this is not bug either. @weini01 Could you reproduce a repository?

[Slavrix]

@ardatan apologies I don't think I explained the second point well.

I have imported as that example you linked shows, however, one of my imports (from node_modules) has a node_modules import within it also (it imports some bootstrap files) it's that 2nd layer of imports that there are issues with.

When I manually went through and changed the first package to remove the '~' it imported correctly. If your planning on adding the plugin anyway than it is a null point, but I thought I would explain the point a bit better.

[leonardoespinosa]

Hi @weini01, if you still problem with your html result (// everywhere), create a new file with extension .html for your component, insert the code and refer that in your angular component. Like this:

hello.component.html <h1>Hello World</h1>

hello.component.ts

@Component({
    selector: "hello-component",
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.scss']
})
export class HelloComponent {

}

I hope help you. Regards!

[ardatan]

@leonardoespinosa or it is better to change target version to es5 in tsconfig file

[Albejr]

In my case (Angular 7):

angular.json

"projects": {
    "MyProject": {
      "sourceRoot": "src"
}}

styles.scss @import "assets/css/variables.scss";