Develop Reference

Uncaught Error: Couldn't find Materialize object on window

I'm trying to use MaterializeCSS on my Angular 6 app. I'm using materialize-css and angular2-materialize module from npm. When I run the app it builds successfully. But I've got this error in the browser console. And the app doesn't show on the browser.
Uncaught Error: Couldn't find Materialize object on window. It is
created by the materialize-css library. Please import materialize-css
before importing angular2-materialize.
Though I imported them in the app.module.ts
Here is my code:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
import { LayoutComponent } from './layout/layout.component';
import { SliderComponent } from './layout/slider/slider.component';
#NgModule({
declarations: [
AppComponent,
LayoutComponent,
SliderComponent
],
imports: [
BrowserModule,
MaterializeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
styles and scripts array from angular.json
"styles": [
"./node_modules/materialize-css/sass/materialize.scss",
"src/styles.sass"
],
"scripts": [
"./node_modules/materialize-css/dist/js/materialize.min.js"
]
I'm not using jQuery since jQuery is no longer a dependency of materialize-css and I don't want to mix up jQuery and Angular
I've also opened an issue on Github about this. Check it here.

creating an angular package that has RouterModule as a dependancy

I'm trying to create a package using
Angular library starter
Everything works fine until I add RouterModule.
The module that causes an issue
import { NgModule, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ClientMenuComponent } from './client-menu/client-menu.component';
import { ClientMenuItemComponent } from './client-menu-item/client-menu-item.component';
import { RouterModule, Router, Routes } from '#angular/router';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot([]) <---- Error: AoT compilation failed
],
declarations: [
ClientMenuComponent,
ClientMenuItemComponent,
],
exports: [
ClientMenuComponent,
ClientMenuItemComponent
]
})
export class ClientMenuModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: ClientMenuModule,
providers: []
};
}
static forChild(): ModuleWithProviders {
return {
ngModule: ClientMenuModule,
providers: []
};
}
}
This is the full error I get.
Error during template compile of 'ClientMenuModule'
Function calls are not supported in decorators but 'RouterModule' was called.
Error: AoT compilation failed
The environment that i'm using is
Angular CLI: 6.0.3
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0

Pull out the function call:
export const MyModule = RouterModule.forRoot([]);
#NgModule({
imports: [
CommonModule,
MyModule
],
declarations: [
ClientMenuComponent,
ClientMenuItemComponent,
],
exports: [
ClientMenuComponent,
ClientMenuItemComponent
]
})

If this is a library or a module that will be imported into other libraries/modules you SHOULD NOT call the .forRoot() function when you pass it into the #NgModule.
RouterModule declares and exports some directives, e.g. router-outlet, routerLink, routerLinkActive etc. Also, it provides some services e.g. Router, ActivatedRoute etc. To avoid having multiple instances of services, RouterModule defines two methods, "forRoot" and "forChild". As the name suggests, "forRoot" method should be called only by root module, i.e. app.module, and forChild should be called by other feature modules. This way, you still get to use directives, components, pipes exported by this module and don't get new instances of services.
While this doesn't specifically get the root of your issue, it will likely resolve your issue. (Also this issue may help)

caching automatically for new patches

I have a huge angular 2 appliucation.
for every two weeks we are giving a patch release.
but everytime users need to clear the browser cache to see the js changes.
is there any inbuild method in angular 2 or js or jquery where users can delete the cache automatically when they hit the url in the browser after our release.
I thought of including that method in the below app.module.ts file since it includes all the modules
can you tell me how to solve the problem.
import './rxjs-extensions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import {Base} from './components/base/base';
import {playerUser} from './components/player/user';
import {player} from './components/player/player';
import {
Routes,
RouterModule,
Router,
ActivatedRoute,
CanActivateChild,
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "#angular/router";
import { titleService } from './components/title/titleService';
#NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
MultiselectDropdownModule,
AccordionModule
],
declarations: [
AppComponent,
Base,
player,
playerUser,
playerFunctionalRoles,
],
providers: [
sportsUService,saveService,titleService],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

What are you using to bundle your application?
If you are using angular cli, then cache busting mechanisms are in place (notice that the generated files have a hash associated with them). In which case you can disable caching within Nginx/Apache or whatever you are using to serve your site on index.html only.
This will download the new source files identified by the new hash code reference within the index.html.
In case you are using webpack only, make sure that cache busting is enabled .
This tutorial : https://powerspace.tech/how-to-cache-busting-with-webpack-5131b4af8826 shows you how to enable hashing and cache busting.

Confusion regarding BrowserModule in Angular 2/4

I have a module AppModule and another module say FooModule. I have some components in FooModule and I' am loading routes of FooModule in AppModule like any normal app would do.
Following is the sample code for AppModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from 'app/components/app';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'foo',
loadChildren: './foo.module#FooModule'
}
])
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Following is the sample code for FooModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { FooComponent } from 'app/components/foo';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: FooComponent
}
])
],
declarations: [FooComponent],
})
export class FooModule {}
Now when I run the app, I' am getting Can't bind to 'ngIf' since it isn't a known property of 'div'. error which as per my understanding shouldn't happen because I' am using BrowserModule in AppModule and loading routes of FooModule in AppModule.
Am I missing something?
I' am using Angular CLI v1.2.0 and Angular 4.2.5.
Edit
I know that to fix this issue I need to import CommonModule in FooModule. But that's exactly why I' am asking this question in first place that when I have imported BrowserModule in AppModule which re-exports CommonModule then why I need to include CommonModule in each individual module?
Thanks

In each feature module, such as your fooModule you need to import CommonModule. It contains the common directives and pipes.
Actually, the BrowserModule imports and re-exports CommonModule, so they export the same functionality.
For more information, see this: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s
UPDATE
Modules are not inherited. To say it another way, you cannot get the functionality of a module unless you import that module or another module that exports it.
As shown in the above diagram... If Shared Module imports Forms Module and App Module imports Shared Module, App Module would not have access to the Forms Module component, directives, and pipes (such as ngModel in this example) unless Shared Module exports Forms Module.
KEY:
Orange lines: Imports
Gray lines: Exports
Blue lines: Declarations

Import CommonModule into FooModule and any other module. BrowserModule imports CommonModule. CommonModule contains *ngIf etc. directives

Angular 2 Module is available only after server is running

I've an Angular 2 application, using Angular CLI and Webpack, where I'm using a external Angular 2 module called angular2-swiper, it's basically a wrapper to a library called Swiper.
I've to import a module in my AppModule called KSSwiperModule, but when I try to start my server with my code, it give me an error:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: KSSwiperModule is not an NgModule
But if I run without the import of this module, the server runs, and I put the import after it's running, it doesn't give any error and execute perfectly. (no, my app can't work without this module).
My code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {KSSwiperModule} from 'angular2-swiper';
import { AppComponent } from './app.component';
import { SwiperComponent } from './swiper.component';
import { AppRoutingModule } from './app-routing.module';
import { FlickityComponent } from "./flickity.component";
#NgModule({
declarations: [
AppComponent,
SwiperComponent,
FlickityComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
KSSwiperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Somebody know why it's happening and how to handle it?

I found the answer thanks a guy from my work (Warren)!
The problem is with the angular-cli version. I was using 1.0.0-beta.22-1, when i rolled back to 1.0.0-beta.19-3 it worked smoothly.