Given the following in ngrx4 that works:
#NgModule(
{
imports: [
CommonModule,
StoreModule.forFeature(
'clerkingData',
{
appetite: appetiteDataReducer,
bleeding: bleedingDataReducer
} ),
StoreModule.forFeature(
'clerkingUi',
{
appetite: appetiteUiReducer
} )
],
exports: [ ...modules ],
declarations:
[ ...components ],
providers:
[ ]
} )
export class ClerkingModule {
}
... Why the following does NOT. (Only 'clerking' is seen in the Devtool)
#NgModule(
{
imports: [
CommonModule,
StoreModule.forFeature(
'clerking',
{
clerkingData: {
appetite: appetiteDataReducer,
bleeding: bleedingDataReducer
},
clerkingUi: {
appetite: appetiteUiReducer
}
} )
],
exports: [ ...modules ],
declarations:
[ ...components ],
providers:
[ ]
} )
export class ClerkingModule {
}
Thanks
I don´t think the 2nd argument (ActionReducerMap) of StoreModule.forFeature supports nested reducers.
See this issue in #ngrx/store repo.
Although ngrx4 came out after this issue was created, I think it´s still relevant.
Related
Using React-bootstrap in our NextJS (10.0.0) app and need to remove unused CSS so using purgecss for that. But all the CSS are getting removed after doing like in this https://purgecss.com/guides/next.html. And found that issue is because of CSS Modules that we are using.
Here is my postcss.config.js
module.exports = {
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
[
'#fullhuman/postcss-purgecss',
{
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}'
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", "body"]
}
],
]
}
Any ways to remove unused CSS?
I just updated Babel6 to Babel7 with all of the necessary packages but can't resolve how to make babel.config.js correctly getting one or another error depending on the specified Babel7 plugins. Here is how my babel.config.js looks like:
module.exports = {
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-syntax-dynamic-import",
"babel-plugin-dynamic-import-node",
"#babel/plugin-proposal-export-default-from"
]
}
},
"plugins": [
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-export-default-from",
"babel-plugin-dynamic-import-node",
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-regenerator",
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
[
"babel-plugin-styled-components",
{
"displayName": true
}
],
[
"babel-plugin-module-resolver",
{
"root": [
"./"
],
"extensions": [
".js",
".jsx",
".css"
],
"alias": {
"shared": "./shared/",
"pages": "./pages/",
"gtex-d3": "./node_modules/gtex-d3/"
}
}
]
],
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"modules": false
}
]
]
}
So, with such configs I am getting the error:
TypeError: (0 , _typeof2.default) is not a function
Here I found a probable solution:
https://github.com/zeit/next.js/issues/6879
Remove "#babel/preset-env". So, after removing it I am getting an error in one of the node_modules package (which may mean that #babel/preset-env is needed to avoid that...):
./node_modules/igv/dist/igv.esm.js
Module build failed: TypeError: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/igv/dist/igv.esm.js: Property name expected type of string but got null
at Array.forEach ()
If I remove "#babel/plugin-transform-modules-commonjs" instead I will get another error:
./node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
1002:14-23 "export 'default' (imported as 'PropTypes') was not found in 'prop-types'
Which is happening because the removed #babel/plugin-transform-modules-commonjs is needed for that. So, from these 3 errors it seems to me that the second should be fixed and there is a thread:
https://github.com/alanbsmith/babel-plugin-react-add-property/issues/3
And it is not solved, so I am stuck. Any suggestions would be greatly appreciated.
npm install --save-dev #babel/plugin-transform-destructuring
. babelrc
{ "plugins": [ ["#babel/plugin-transform-destructuring", { "useBuiltIns": true }] ] }
I'm going (using routerLink) to a details page of an object, but instead of the ID, it appears undefined, and don't know how to do it correctly, this is my code:
Tab routing
{
path: 'book/:id',
loadChildren: '../book-detail/book-detail.module#BookDetailPageModule',
pathMatch: 'full'
}
Page A (FROM):
...
bookId = null
bookRef: AngularFirestoreDocument
constructor(
private route: ActivatedRoute,
private af: AngularFirestore,
private service: BookService
) { }
...
HTML
<ion-card [routerLink]="['/book/', id]" routerDirection="forward">
Page B (TO):
...
ngOnInit() {
this.bookId = this.route.snapshot.paramMap.get('id');
if (this.bookId) {
this.loadBook(this.bookId);
}
}
loadBook(bookId) {
this.af.collection<Book>('books')
.doc<Book>(bookId)
.valueChanges()
.subscribe(data => {
this.book = data
});
}
...
The error I'm getting is:
ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]:
No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
FirebaseError: No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
On my url on my detailspage of the book it says: http://localhost:8100/book/undefined
UPDATED 2:
Book detail module:
const routes: Routes = [
{
path: '',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
You should add :id to BookDetailPage path in BookDetailPageModule :
const routes: Routes = [
{
path: ':id',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
FINALLY RESOLVED:
I didn't know about it's just to put this code:
<ion-card [routerLink]="['book/', book.id]" routerDirection="forward">
Instead of what I did (see on my question)
I have two basic two basic NgModules and routing ones as well in this app, core (for header, footer and home pages) and an auth for authentication basically. without using the wildcard the app routes perfectly between components. once I introduce the invalid routing the only component that loads is the home one.
I am routing from my header component, i.e. routerLink="/signin"
any idea why is this happening?
The following is my code,
CoreModule
#NgModule({
declarations: [
HeaderComponent,
FooterComponent,
SidenavLeftComponent,
HomeComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
NgbModule.forRoot(),
AppRoutingModule
],
exports: [
HeaderComponent,
FooterComponent,
SidenavLeftComponent,
HomeComponent,
AppRoutingModule
],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class CoreModule { }
AppRoutingModule
const appRoutes: Routes = [
{ path: '', redirectTo: 'home' , pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
{ path: '**', redirectTo: '/not-found', pathMatch: 'full'}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
AuthModule
#NgModule({
declarations: [
SigninFormComponent,
SignupRequestFormComponent,
],
imports: [
CommonModule,
FormsModule,
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule,
MDBBootstrapModulePro,
NgbModule,
AuthRoutingModule
]
})
export class AuthModule { }
AuthRoutingModule
const authRoutes: Routes = [
{ path: 'signin', component: SigninFormComponent },
{ path: 'signup', component: SignupRequestFormComponent }
];
#NgModule({
imports: [
RouterModule.forChild(authRoutes)
],
exports: [RouterModule]
})
export class AuthRoutingModule { }
AppModule
#NgModule({
declarations: [
AppComponent,
ErrorPageComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
CoreModule,
AuthModule,
AppRoutingModule
],
providers: [
MDBSpinningPreloader,
UserService,
ConfigService,
AuthGuard,
{ provide: Http, useClass: AuthenticatedHttpService }
],
bootstrap: [AppComponent],
})
export class AppModule { }
AppModule
#NgModule({
.....
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
CoreModule,
AuthModule,
AppRoutingModule
],
You are loading CoreModule first, so your AppRoutingModule is loaded first and every invalid routes and the routes which are not defined there are being redirected to your widlcard expression.
const appRoutes: Routes = [
{ path: '', redirectTo: 'home' , pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
{ path: '**', redirectTo: '/not-found', pathMatch: 'full'}
];
So either you should load AuthModule before CoreModule in AppModule declarations or remove wildcard expression from AppRoutingModule and put it inside AuthRoutingModule.
I probably have some misconception, so need help with understanding what is exactly wrong.
At analytics.google.com I have two segments they differ by event label but both are from the same event. In analytics interface difference between segments is visible:
When I'm trying to get this same data with tool like query explorer results are also different:
However, when I'm getting this data with reporting API v4, all values are the same between segments. I have also tried it with API v3, which resulted in similar outcomes.
Here is my code:
googleapis.analyticsreporting('v4').reports.batchGet({
'headers': {'Content-Type': 'application/json'},
"auth": oauth2Client,
"resource":{
reportRequests:[
{
"viewId": "ga:"+Meteor.settings.admin.googleAPI.viewID,
"dateRanges":[{
"startDate": '2016-07-01',
"endDate": moment().format('YYYY-MM-DD'),
}],
"metrics": [{"expression":"ga:pageviews"},{"expression":"ga:avgtimeonpage"}],
"dimensions": [{"name":"ga:pagepath"},{"name":"ga:segment"}],
"segments": [{
"dynamicSegment":
{
"name": "version_bw",
"userSegment":
{
"segmentFilters": [
{
"simpleSegment":
{
"orFiltersForSegment": [
{
"segmentFilterClauses": [
{
"dimensionFilter":
{
"dimensionName": "ga:eventAction",
"operator": "EXACT",
"expressions": ["set-visual-code"]
}
},{
"dimensionFilter":
{
"dimensionName": "ga:eventLabel",
"operator": "EXACT",
"expressions": ["bw"]
}
}
]
}]
}
}]
}
}
},{
"dynamicSegment":
{
"name": "version_color",
"userSegment":
{
"segmentFilters": [
{
"simpleSegment":
{
"orFiltersForSegment": [
{
"segmentFilterClauses": [
{
"dimensionFilter":
{
"dimensionName": "ga:eventAction",
"operator": "EXACT",
"expressions": ["set-visual-code"]
}
},{
"dimensionFilter":
{
"dimensionName": "ga:eventLabel",
"operator": "EXACT",
"expressions": ["color"]
}
}
]
}]
}
}]
}
}
}]
}
]
}
}, function(err, response) {
if (err) {
console.log('API Error: '+ err);
return;
}
var rows = response.reports[0].data.rows;
for (var i = 0; i < rows.length; i++) {
console.log(rows[i].dimensions);
console.log(rows[i].metrics);
}
});
Which results in following output:
I20160719-14:09:10.405(2)? [ '/', 'version_bw' ]
I20160719-14:09:10.406(2)? [ { values: [ '373', '174.11977715877438' ] } ]
I20160719-14:09:10.406(2)? [ '/', 'version_color' ]
I20160719-14:09:10.407(2)? [ { values: [ '373', '174.11977715877438' ] } ]
I20160719-14:09:10.407(2)? [ '/portfolio', 'version_bw' ]
I20160719-14:09:10.407(2)? [ { values: [ '468', '126.2876404494382' ] } ]
I20160719-14:09:10.407(2)? [ '/portfolio', 'version_color' ]
I20160719-14:09:10.408(2)? [ { values: [ '468', '126.2876404494382' ] } ]
I20160719-14:09:10.408(2)? [ '/portfolio/', 'version_bw' ]
I20160719-14:09:10.409(2)? [ { values: [ '22', '229.54545454545453' ] } ]
I20160719-14:09:10.410(2)? [ '/portfolio/', 'version_color' ]
I20160719-14:09:10.410(2)? [ { values: [ '22', '229.54545454545453' ] } ]
I20160719-14:09:10.410(2)? [ '/portfolio/graphics', 'version_bw' ]
I20160719-14:09:10.410(2)? [ { values: [ '84', '60.073170731707314' ] } ]
I20160719-14:09:10.410(2)? [ '/portfolio/graphics', 'version_color' ]
I20160719-14:09:10.410(2)? [ { values: [ '84', '60.073170731707314' ] } ]
I20160719-14:09:10.411(2)? [ '/portfolio/graphics/some-graphic', 'version_bw' ]
I20160719-14:09:10.411(2)? [ { values: [ '134', '42.02290076335878' ] } ]
I20160719-14:09:10.411(2)? [ '/portfolio/graphics/some-graphic', 'version_color' ]
I20160719-14:09:10.411(2)? [ { values: [ '134', '42.02290076335878' ] } ]