cant import routing modules in angular 2 - angularjs

i have tried importing routing classes like this :
import {Route, RouterModule} from '#angular/router';
but it seems they don't exist to be more specific "myapp/node_modules/Angular/router has no exported member Route" the same when i hover over "RouterModule" the same happens for many other modules.i'm using angular-cli for creting my project. is there any fix for this?

the problem was with the angular-cli so i created a project manually based on angular 2 documentation and the problem was gone

Related

Module not found: Can't resolve './AppAPI' in project folder

I have done everything right when setting up my react app and for some reason I'm getting this error.
All my code is in a .js file called App.API.js which is located in the src folder.
The error is coming from the index.js which has the code: import App from './AppAPI';
I've gone through several guides and other posts with similar questions but no solution is working. I have created a whole new react app and tried again but have had no luck.
change :
import App from './AppAPI'
to :
import App from "./App.API";

How to use typeface-open-sans with styled-components sheet.collectStyles?

I have a create-react-app React app configured for SSR using sheet.collectStyles.
How can add CSS from typeface-open-sans so it is collected by sheet.collectStyles?
import "typeface-open-sans"
I was approaching this problem from the wrong angle...
create-react-app already adds styles from import "typeface-open-sans" to *.chunk.css by default (which means they are available to the browser even when JavaScript is disabled).
No need to use sheet.collectStyles.

React - Import a file from Node_Modules

I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.

How to use the #salesforce/design-system-react package in my Create-React-App

I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)

Using #types/angular as global

I'm currently trying to update my angular 1 application from typings to #types.
First I got following error message:
Identifier 'angular' must be imported from a module
After some searching I found out, that angular isn't accessible globally anymore. Or anleast I didn't find out how...
With typings, angular was global and I could use it without imports or anything. My problem is, that an import of angular, like this:
import * as angular from 'angular';
breaks my application: Unfortunately SystemJS is now trying to load angular and because of this it's not available when ui-bootstrap and other libs are loaded with script tags.
To fix this, I would have to rewrite a huge part of the build-pipeline. So I'm asking again: Is there another way to use angular with TypeScript 2 and #types, that doesn't end in a require('angular')?
I found the answer. Do this and everything will work finr.
import * as _angular_ from 'angular';
declare global {
const angular: typeof _angular_;
}

Resources