Lazy loaded module not loading css

[imVinayPandya]

Bug Report

i have imported following module to app module

CovalentCoreModule.forRoot(), CovalentHighlightModule.forRoot(), CovalentMarkdownModule.forRoot(), CovalentChartsModule.forRoot(),

i have one lazy loaded module, which has following code od line

schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

i am able to use covalent html directive in submodules but thing is that css is not loading....

my package.json file "dependencies": { "@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/material": "2.0.0-beta.1", "core-js": "^2.4.1", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "0.7.2", "@covalent/core": "0.10.0", "@covalent/charts": "0.10.0", "@covalent/dynamic-forms": "0.10.0", "@covalent/highlight": "0.10.0", "@covalent/http": "0.10.0", "@covalent/markdown": "0.10.0", "hammerjs": "^2.0.8", "highlight.js": "9.6.0", "showdown": "1.4.2", "@swimlane/ngx-charts": "^3.0.5", "moment": "^2.17.1", "d3": "^4.4.0" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.25.5", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "~2.0.3", "node-sass": "3.8.0", "sass-loader": "^4.0.2" }

no errors are coming, but css is not loading....

[kyleledbetter]

can you update the covalent versions to 0.10.2? we had a bug in 0.10.0

to load the css you'll need to add the files to the angular-cli: https://github.com/Teradata/covalent-quickstart/blob/develop/angular-cli.json#L21-L24

[imVinayPandya]

@kyleledbetter i have updated to 0.10.2 and updated my whole package.json, i have deleted node_modules and installed fresh node modules

"angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/platform-server": "2.4.1",
    "@angular/router": "3.4.1",
    "@covalent/core": "0.10.2",
    "@covalent/charts": "0.10.2",
    "@covalent/dynamic-forms": "0.10.2",
    "@covalent/highlight": "0.10.2",
    "@covalent/http": "0.10.2",
    "@covalent/markdown": "0.10.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.6.0",
    "rxjs": "^5.0.1",
    "showdown": "1.4.2",
    "zone.js": "^0.7.2",
    "@swimlane/ngx-charts": "^3.1.2",
    "moment": "^2.17.1",
    "d3": "^4.4.0",

    "ts-helpers": "^1.1.1"

  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/hammerjs": "2.0.30",
    "@types/jasmine": "2.2.31",
    "@types/node": "6.0.34",
    "@types/selenium-webdriver": "2.53.36",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "0.0.26",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "karma-firefox-launcher": "1.0.0",
    "karma-phantomjs-launcher": "1.0.1",
    "node-sass": "3.8.0",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "4.0.5",
    "sass-loader": "^4.0.2",
    "ts-node": "1.2.1",
    "tslint": "3.14.0",
    "typescript": "2.0.10"
  }

i have already added css in angular-cli

"styles": [
        "styles.scss",
        "theme.scss",
        "../node_modules/@covalent/core/common/platform.css",
        "../node_modules/@swimlane/ngx-charts/release/ngx-charts.css"
      ],
      "scripts": [
        "../node_modules/hammerjs/hammer.min.js",
        "../node_modules/showdown/dist/showdown.js"
      ],

here is the demo code. please you can review code here: => https://github.com/imVinayPandya/covalent-project

[emoralesb05]

So just took a glance, but CUSTOM_ELEMENTS_SCHEMA is what is making the app not have errors with not imported components.

So even if you are using covalent tags, you need to re-import the module in the submodules since components are not shared across them.

https://github.com/imVinayPandya/covalent-project/blob/master/src/app/login/login.module.ts#L18

e.g. for LoginModule

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    CovalentCoreModule.forRoot(),
  ],
  declarations: [LoginComponent],
})
export class LoginModule {
}

If you arent using non-angular components, i would avoid using CUSTOM_ELEMENTS_SCHEMA at all so you get the proper errors when using a component from a module that hasnt been imported

[imVinayPandya]

yes for now i am importing covalent module in each module.

i think this should not happen, bcz if i want to use one module as global i should be imported only once. like HttpModule of angular 2 i have imported only in mainmodule but still i can access through all submodule.

[emoralesb05]

This is an @angular thing, not covalent.

Angular forces you to import the modules you will use in a submodule so they are decoupled and an app can be truly modularized (hence ngModule) where you can add or remove a module from an app without modifying major code.

If you wanna just import them once, then dont use submodules.. since that would defeat the purpose of modularization.

Edit:

Now this only applies for components, services like http are shared and inherited from the parent module

[imVinayPandya]

ok thank you for explaining.......... @emoralesb05

[emoralesb05]

Closing this issue. and no problem!