I try to create a new block from SonataBlockBundle, edit the content block and want to save it to database.
in my composer.json, i got:
"sonata-project/admin-bundle": "^2.3.0",
"sonata-project/doctrine-orm-admin-bundle": "^2.3.4",
"sonata-project/media-bundle": "2.3.x-dev",
"sonata-project/core-bundle": "^2.3.0",
"sonata-project/intl-bundle": "^2.3.0",
"doctrine/doctrine-migrations-bundle": "dev-master",
"symfony-cmf/block-bundle": "^1.3.1",
"jackalope/jackalope-doctrine-dbal": "1.2.*",
"sonata-project/doctrine-phpcr-admin-bundle": "^1.2",
"doctrine/doctrine-cache-bundle": "1.0.*"
In the dashboard, i got no menu to create a new block, and i got this error in the console:
The following document types provided in valid_children are invalid: Symfony\Cmf\Bundle\ContentBundle\Doctrine\Phpcr\StaticContent The class names provided could not be loaded
Can i use the symfony-cmf/block-bundle as a standalone without install all the symfony-cmf ?
How to simply create a SonataBlock, and save it to database ?
I'm not sure if you can mix in symfony-cmf/block-bundle with SonataAdminBundle. But I can tell you, how to display Block's (SonataBlockBundle) on your dashboard.
Include the SonataBlockBundle described in SonataBlockBundle's
Installation
Documentation.
Refer to SonataAdminBundle's Dashboard
Documentation
to configure blocks on your dashboard.
In short it's pretty easy to configure more blocks (or even custom ones, just register them):
# app/config/config.yml
sonata_admin:
dashboard:
blocks:
-
position: top
type: sonata.block.service.text
settings:
content: >
<p>My dashboard block</p>
<p>Feel free to extend me</p>
Related
I am trying to use bit.dev for a front-end micro service and I am running into an issue when running bit tag with react 18 I get this error
The following errors were found while running the build pipeline
Failed task 1: "teambit.defender/tester:TestComponents" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select#0.0.1
Error: Cannot find module 'react-dom/client' from 'node_modules/.pnpm/registry.npmjs.org+#testing-library+react#13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/#testing-library/react/dist/pure.js'
Require stack:
node_modules/.pnpm/registry.npmjs.org+#testing-library+react#13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/#testing-library/react/dist/pure.js
node_modules/.pnpm/registry.npmjs.org+#testing-library+react#13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/#testing-library/react/dist/index.js
cagosto48.select-boxes_ui_wizard-select#0.0.1/dist/wizard-select.spec.js
Found 1 errors in 1 components
Failed task 2: "teambit.preview/preview:GeneratePreview" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select#0.0.1
ModuleNotFoundError: Module not found: Error: Can't resolve '#emotion/react' in '/Users/carlosagosto/Library/Caches/Bit/capsules/b89c12b2cff6d117ea54ad5513a8d8d3d0194e16/node_modules/.pnpm/registry.npmjs.org+#mui+styled-engine#5.10.3_react#17.0.2/node_modules/#mui/styled-engine'
ModuleNotFoundError: Module not found: Error: Can't resolve '#emotion/react' in '/Users/carlosagosto/Library/Caches/Bit/capsules/b89c12b2cff6d117ea54ad5513a8d8d3d0194e16/node_modules/.pnpm/registry.npmjs.org+#mui+styled-engine#5.10.3_react#17.0.2/node_modules/#mui/styled-engine'
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/Compilation.js:1773:28
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:811:13
at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:286:22
at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:442:22
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:124:11
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:673:25
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:882:8
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:1002:5
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/neo-async/async.js:6883:13
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:985:45
at finishWithoutResolve (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:386:15
at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:435:5
at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
Found 1 errors in 1 components
✖ Total 7 tasks. 5 succeeded. 2 failed. 0 skipped. Total errors: 2.
I have look at this the docs for react 18 https://bit.cloud/bit-foundations/react/react-version-envs/react-18-env but still having this issue I updated my workspace.jsonc file to be this.
/**
* this is the main configuration file of your bit workspace.
* for full documentation, please see: https://bit.dev/docs/workspace/workspace-configuration
**/ {
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
/**
* main configuration of the Bit workspace.
**/
"teambit.workspace/workspace": {
/**
* the name of the component workspace. used for development purposes.
**/
"name": "my-workspace-name",
/**
* set the icon to be shown on the Bit server.
**/
"icon": "https://static.bit.dev/bit-logo.svg",
/**
* default directory to place a component during `bit import` and `bit create`.
* the following placeholders are available:
* name - component name includes namespace, e.g. 'ui/button'.
* scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
* scope - scope name only, e.g. 'compilation'.
* owner - owner name in bit.dev, e.g. 'teambit'.
**/
"defaultDirectory": "{scope}/{name}",
/**
* default scope for all components in workspace.
**/
"defaultScope": "my-scope"
},
/**
* main configuration for component dependency resolution.
**/
"teambit.dependencies/dependency-resolver": {
/**
* choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
*/
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {
"#bit-foundations/react.react-version-envs.react-18-env": "0.0.3",
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/material": "^5.10.2"
},
"peerDependencies": {
"#testing-library/react": "^13.3.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react-hooks": "^8.0.1",
"#testing-library/user-event": "^14.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
"linkCoreAspects": true
},
/**
* workspace variants allow to set different subsets of configuration for components in your
* workspace. this is extremely useful for upgrading, aligning and building components with a new
* set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
* wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
* see https://bit.dev/docs/workspace/variants for more info.
**/
"teambit.workspace/variants": {
"{ui/**}, {pages/**}": {
"bit-foundations.react/react-version-envs/react-18-env#0.0.3": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
/**
* "*" is a special rule which applied on all components in the workspace.
**/
"*": {
/**
* uncomment to apply the chosen environment on all components.
**/
// "teambit.react/react": { }
}
}
}
I have copied your workspace.jsonc to a new react environment and didn't have any trouble tagging a new component. Maybe updating bit will help.
As August 30th, 2022, the latest version is 0.0.833
bvm upgrade
Afterwards upgrading, make sure you delete pnpm-lock.yaml, node_modules and the capsule. Let's start to spin everything from zero.
rm -rf node_modules pnpm.lock-yaml
And also the capsule:
bit capsule delete
Now, re install and compile (twice):
bit install && bit compile && bit install && bit compile
Check that bit status is clean:
bit status
# fix any potential issue
That might solve it.
Otherwise, your problem comes from #emotion/react requesting react 17 which is not in your node_modules. You can try downgrading the peerDependencies in your policy:
"peerDependencies":{
"react": "^17.0.2"
}
In a CRA based React app I get this error in a webworker file (all code is using Typescript) when I import files that are also imported by normal application code (normal === non-worker) and run the app using the babel dev server in debug mode.
Searching for this error brings me to various module specific issue reports/solutions, which I cannot use, however. But it's clear that this is a React hot reloading problem and I wonder how to solve it, as it keeps me from using my app code also in web workers.
My dev dependencies are:
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.11.11",
"#babel/preset-typescript": "^7.12.7",
"#testing-library/react": "^11.2.3",
"#types/classnames": "^2.2.11",
"#types/color": "^3.0.1",
"#types/d3": "^6.2.0",
"#types/history": "4.7.8",
"#types/jest": "^26.0.20",
"#types/lodash": "^4.14.168",
"#types/node": "^14.14.22",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-test-renderer": "^17.0.0",
"#types/react-window": "^1.8.2",
"#types/resize-observer-browser": "^0.1.5",
"#types/selenium-webdriver": "^4.0.11",
"#types/topojson": "^3.2.2",
"#types/uuid": "^8.3.0",
"#types/ws": "^7.4.0",
"#typescript-eslint/eslint-plugin-tslint": "^4.14.0",
"acorn": "^8.0.5",
"antlr4ts-cli": "^0.5.0-alpha.4",
"eslint": "^7.18.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^31.3.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prefer-arrow": "^1.2.2",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.0",
"jest-transform-stub": "^2.0.0",
"jest-websocket-mock": "^2.2.0",
"mock-socket": "^9.0.3",
"monaco-editor-webpack-plugin": "^1.9.1",
"monaco-typescript": "^4.2.0",
"raw-loader": "^4.0.2",
"react-app-rewired": "^2.1.8",
"react-scripts": "^4.0.3",
"react-test-renderer": "^17.0.1",
"selenium-webdriver": "^4.0.0-beta.1",
"ts-jest": "^26.5.2",
"tslint": "^6.1.3",
"typescript": "^4.1.3",
"typescript-eslint-parser": "22.0.0",
"webdriver-manager": "^12.1.8",
"webpack": "4.44.2",
"webpack-bundle-analyzer": "^4.4.0",
"worker-loader": "^3.0.8",
"ws": "^7.4.3"
},
The only promising solution I also could apply is: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213, but it didn't help. I still get the same error. My web worker code is:
/* eslint-disable no-restricted-globals */
/* eslint-disable no-eval */
/* eslint-disable #typescript-eslint/no-unused-vars */
(window as any).$RefreshReg$ = () => {/**/};
(window as any).$RefreshSig$ = () => () => {/**/};
import { ShellInterfaceSqlEditor } from "../../supplement/ShellInterface";
import { PrivateWorker, ExecutionResultType, IConsoleWorkerData } from "./console.worker-types";
const backend = new ShellInterfaceSqlEditor();
const ctx: PrivateWorker = self as any;
The further discussion there about changing the babel loader config is unfortunately beyond me, as I don't configure that myself (what I'm using, however, is react-app-rewired to configure some custom loaders).
What else could I try to fix the issue?
In my case, this error was happening when overwriting Webpack's mode option. After removing the line below I stopped receiving the error.
webpackConfig.mode = 'none'; // this line caused the bug
I believe this is because react-refresh requires webpack to be in mode: 'development' to function properly.
You may want to read about Webpack's modes here: https://webpack.js.org/configuration/mode/. It is also possible that you are setting Webpack mode from the NODE_ENV environment variable.
I tried many of the solutions in this answer and in various Github issues, but none of them resolved the issue for me. Eventually I found a solution via the Webpack sideEffects optimization and config!
tl;dr:
Ensure your Webpack config has an object optimization set and that the optimization object has an attribute sideEffects set to true. Seems like nx and potentially cra or craco defaults this to false, leading to unused React components being imported in WebWorker bundles if they're exported as part of a "barrel" file
If you're importing your own shared ui package which exports React components and some non-React components, then you need to specify the sideEffects config in your package's package.json file to ensure that the React components are marked as "pure" and safe to prune. See below for more details
After inspecting the bundles of my WebWorker, I realized that some React components were being bundled into the worker bundle from worker-loader, even though they weren't being used in the worker. At least one of these cases was happening in our app because we have a shared package which contained some React components and other normal TS utils.
Our WebWorker was importing a value (named export) from this package and for some reason, the entire package was being included in the WebWorker – including the React components that were not being used anywhere! The React Fast Refresh plugin (which is installed / used by CRA by default) then was augmenting our WebWorker bundle with the changes necessary to support hot refresh / reloading (calls to $RefreshReg$ and co).
Some Github issues regarding this problem referenced a Webpack tree shaking optimization called sideEffects, which you can read more about at https://webpack.js.org/guides/tree-shaking/. Here's the relevant bit:
The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the "sideEffects" package.json property to denote which files in your project are "pure" and therefore safe to prune if unused.
In your package's package.json, you can either specify "sideEffects": false to mark the whole package as "pure" and safe to prune if unused, or you can specify the specific exports / paths that do have side effects, eg for us:
"sideEffects": [
"./src/styles/*"
],
However, setting this value didn't work for our app immediately, which was confusing. Eventually, I ran into a thread about this for nx where a very helpful comment noted that their Webpack config was disabling the sideEffects optimization for Webpack: (https://github.com/nrwl/nx/issues/9717#issuecomment-1163533981)
I found that Nx is passing optimization: { sideEffects: false } to webpack, which explicitly turns off tree shaking regardless of your package.json contents. The library that was not being tree shaken in my original issue (lodash-es) already has it's own package.json where it specifies the required setting to facilitate optimal tree shaking, however Nx was turning off tree shaking in Webpack globally, so that it doesn't happen at all for any library or any code in the project.
I tried explicitly setting webpackConfig.optimization.sideEffects = true in my app and boom! Issue resolved, React components being excluded from the WebWorker bundle.
You can try worker-plugin instead of worker-loader. I have been running into the same issue for a long time before trying worker-plugin.
I've also stumbled on this issue on a CRA project
I'm not using typescript for the Web Worker but adding this helped fix the error. (BTW I've only found it thanks to your question. Thanks!)
web.worker.js
if (process.env.NODE_ENV != 'production') {
global.$RefreshReg$ = () => {};
global.$RefreshSig$ = () => () => {};
}
Maybe if you try (global as any) it would work?
Another thing I'm doing is I only import libraries at the top and any code that is used by both main and the worker is added with a require before the usage
e.g.
web.worker.js
const generateSingle = async (client) => {
const mark = `generate for: ${client.id}`;
performance.mark(mark);
const { BillingReportDocument } = require('../pdf/PdfBillingReport');
/* ... */
}
Otherwise I get a different error like "browser is not defined" it's related to emotion/react being used in that file
First off, I'm new to React/Gatsby. I'm not new to Jekyll, Lando, Drupal, WordPress, basic Git, HTML5/CSS3. I am not strong with JS. Ok, that's out of the way.
I've a got a simple one page site (splash page) that will evolve into a multi-page site. I decided to try Gatsby. The gatsby develop command works well, and I have no es-lint errors for unused variables and such. The gatsby build command produces an error that seems like a super basic thing. There are only two pages in the site — a 404 page and an index. If I remove the 404 page, I get the same error on the index page. Gatsby/Webpack seems to choke on the first piece of content being passed:
JHogue:civicpolicy jhogue$ gatsby build
success open and validate gatsby-configs — 0.006 s
success load plugins — 0.131 s
success onPreInit — 0.166 s
success delete html and css files from previous builds — 0.008 s
success initialize cache — 0.006 s
success copy gatsby files — 0.068 s
success onPreBootstrap — 0.006 s
success source and transform nodes — 0.048 s
success building schema — 0.154 s
success createPages — 0.000 s
success createPagesStatefully — 0.024 s
success onPreExtractQueries — 0.000 s
success update schema — 0.085 s
success extract queries from components — 0.050 s
success run graphql queries — 0.022 s — 4/4 197.54 queries/second
success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s
info bootstrap finished - 3.259 s
error Generating JavaScript bundles failed
Error: ./.cache/async-requires.js 8:11
Module parse failed: Unexpected token (8:11)
You may need an appropriate loader to handle this file type.
| exports.components = {
| "component---src-pages-404-js": function componentSrcPages404Js() {
> return import("/Users/jhogue/github/civicpolicy/src/pages/404.js"
| /* webpackChunkName: "component---src-pages-404-js" */
| );
# ./.cache/production-app.js 18:0-45 21:23-36 26:23-36
Since it is just a splash page, there are no data feeds, no markdown files, no arrays of pages to iterate over. Its very simple.
My dependency list is as follows:
"dependencies": {
"css-mqpacker": "^7.0.0",
"gatsby": "^2.0.117",
"gatsby-cli": "^2.4.9",
"gatsby-plugin-react-helmet": "^3.0.6",
"gatsby-plugin-sass": "^2.0.10",
"gatsby-source-filesystem": "^2.0.20",
"gatsby-transformer-json": "^2.1.8",
"gatsby-transformer-remark": "^2.2.4",
"node-sass": "^4.11.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-helmet": "^5.2.0"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^2.0.1",
"eslint-plugin-react": "^7.12.4",
"prettier-eslint": "^8.8.2"
}
Any pointers would be appreciated. Thanks.
This looks like it might be a Node version issue. Gatsby recommends Node 8 or higher. Can you run node --version and see if you're using a high enough Node version?
If you need a newer version of Node, nvm is a great way to make switching Node versions easier.
I'm working on a project that has pulled in Typescript definitions the deprecated typings way and I would like to now move over to using the #types method instead.
Currently we have a typings.json file in the root of the project like so:
{
"globalDependencies": {
"angular": "registry:dt/angular#1.5.0+20161101124950",
"angular-cookies": "registry:dt/angular-cookies#1.4.0+20160317120654",
"angular-material": "registry:dt/angular-material#1.1.0-rc5.0+20161208205836",
"angular-resource": "registry:dt/angular-resource#1.5.0+20160914132003",
"angular-translate": "registry:dt/angular-translate#2.4.0+20160729132354",
"d3": "registry:dt/d3#0.0.0+20160907005744",
"jquery": "registry:dt/jquery#1.10.0+20160929162922",
"lodash": "registry:dt/lodash#4.14.0+20161110215204",
"moment": "registry:dt/moment#2.11.1+20161010105546",
"require": "registry:dt/require#2.1.20+20160919185614"
},
"resolution": "src/client/typings",
"dependencies": {
"angular-local-storage": "registry:dt/angular-local-storage#0.1.5+20160726182927",
"angular-ui-router": "registry:dt/angular-ui-router#1.1.5+20161222093745",
"requirejs": "registry:npm/requirejs#2.2.0+20160319062357"
}
}
As you can clearly see, these are currently installed as globals and are appearing in a src/client/typings folder in our dir structure.
I can already see I have a #types folder under my node_modules which contains some of the typings I have listed in this typings.json file.
In our tsconfig.json file we have an includes config section:
"include": [
"./typings/index.d.ts",
"./app/**/*.module.ts",
"./app/**/*.run.ts",
"./app/**/*.routes.ts",
"./app/**/*.enum.ts",
"./app/**/*.controller.ts",
"./app/**/*.model.ts",
"./app/**/*.directive.ts",
"./app/**/*.filter.ts",
"./app/**/*.service.ts",
"./app/interfaces/**/*.ts"
],
I have since commented out the ./typings/index.d.ts to be sure none of the older typings (not in the #types folders) are being pulled in.
Now, when I look at an .ts file for some angularjs code, I see the angular object is not being resolved anymore:
Having read around, I can just add an import to the file to resolve this (e.g. import * as angular from 'angular'), but it would mean I would need to add to every one of our .ts files that contain any angular code.
Is there an easy\recommended way I can make the angular reference a global in my project, or is best practice to add these fine grained imports across all the files where needed?
Thanks
Create a common .ts file under 'Typings' folder and add all required reference in that file like below.
After that, only add common .ts file reference to all the place where ever all reference required like below.
/// <reference path="../../typings/common.d.ts" />
Last 2 days I've been looking at the Angular 2, I'm new to it so I went straight "the official documentation" which is the Tour of Heroes example, it's ok "Just ok" tutorial and I followed the steps and I could understand a lot from it, when I reached the HTTP part and how to get access to Data sources issues started to pop up, I'm not sure if it's me very beginner in this OR the documentation is not up-to-date with the final release, :/ Google people, a big company and you guys can not assign this task to a team who take care of the documentation and keeps it updated with the releases? My opinion it's such task is mandatory for some reasons and it's the company responsibility or the Angular 2 project team's responsibility, it's new release and it's completely different from the angularjs 1.x so don't you guys think that you should provide solid reliable support in the form of up-to-date documentation right? Unless you want React to be in the lead ;)
If anyone knows good documentation for http and how to retrieve modify save and delete data and it's compatible with the final release please share it, now the issue that I collided with in the Tour of Heroes tutorial is that I get error because of this line:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
can't find the module 'angular2-in-memory-web-api'
I was ok I'm not gonna use this in memory web Api, so I created asp.net web Api and it works fine and here is the GetHeroes method in the Heroes Controller it's so straight forward:
// GET: api/Heroes
public IQueryable<Hero> GetHeroes()
{
return db.Heroes;
}
of course I test the method and it returns all the heroes so the api working just fine, now this's the method from the hero.service.ts :
getheroes(): Promise<Hero[]>
{
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
}
ok I get no errors but data is nt showing like literally nothing however when I remeove .data as Hero[] part I get enter image description here
and once I click on "one hero" I get nothing as well and the url like this : 4200/details/undefined notice instead of the hero Id I get undefined ?! anyway I noticed that in many videos of some people "tutoring" angular 2 that there is no common steps to work Http for accessing data and doing CRUD operation through api , every one doing it in different way and the thing is when I try to follow it's just not working with what I have and this's from my package.json:
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.15",
"codelyzer": "~0.0.26",
"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",
"protractor": "4.0.5",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}
So anyone can help or share something official and compatible with the final release? I wish the Google people pay attention and take care of the documentations, not everyone is an expert.
You must to fix the line:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
To:
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
You missed the 2 ...
Also in in-memory-data.service.ts file fix it
There is a mistake in documentation