I migrated my server-side rendering (SSR) working app to version 5 of MUI. I followed the official procedure, but when I disabled JavaScript, I received a raw HTML page (without CSS). You can see it here (sorry if it's down; I’m redeploying often to test).
run codemod (v5.0.0/preset-safe and link-underline-hover)
changed the makeStyles calls to use tss-react
modified my _app and _document files according to the MUI example with Next.js
I launched the official SSR Next.js implementation. It showed it doesn't work either.
For more details, here are the key files in my project:
_app.js
import * as React from 'react';
import Head from 'next/head';
import {ThemeProvider} from '#mui/material/styles';
import CssBaseline from '#mui/material/CssBaseline';
import {CacheProvider} from '#emotion/react';
import theme from '../components/theme';
import createEmotionCache from "../lib/createEmotionCache";
import {StyledEngineProvider} from '#mui/material/styles';
import {ApolloProvider} from "#apollo/client";
import {SessionProvider} from "next-auth/react"
import {appWithTranslation} from "next-i18next";
import {useApollo} from "../apollo/client";
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
//followed example: https://github.com/mui/material-ui/tree/master/examples/nextjs
function App(props) {
const {Component, emotionCache = clientSideEmotionCache, pageProps} = props;
const apolloClient = useApollo(pageProps)
return (
<CacheProvider value={emotionCache}>
<StyledEngineProvider injectFirst>
<ApolloProvider client={apolloClient}>
<SessionProvider session={pageProps.session}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width"/>
<title>WeAlly</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
<link rel="manifest" href="/images/site.webmanifest"/>
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline/>
<Component {...pageProps} />
</ThemeProvider>
</SessionProvider>
</ApolloProvider>
</StyledEngineProvider>
</CacheProvider>
);
}
export default appWithTranslation(App);
_document.js
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '#emotion/server/create-instance';
import theme from '../components/theme';
import createEmotionCache from "../lib/createEmotionCache";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/static/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;700&display=swap"
rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;1,400&display=swap"
rel="stylesheet"/>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
media="screen"/>
{/* Inject MUI styles first to match with the prepend: true configuration. */}
{this.props.emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
const originalRenderPage = ctx.renderPage;
// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
(function EnhanceApp(props) {
// console.log( 'enhancing app with cache: ', cache )
return <App emotionCache={cache} {...props} />;
}),
});
const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents emotion from rendering invalid HTML.
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
const emotionStyles = extractCriticalToChunks(initialProps.html);
// console.log('emotion style count: ', emotionStyles.styles.length)
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(' ')}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
emotionStyleTags,
};
};
**package.json**
{
"name": "we-ally-org",
"version": "1.0.0",
"scripts": {
"dev": "next",
"back": "node ./server/starter.js",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#apollo/client": "^3.4.17",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#google/maps": "^1.1.3",
"#hapi/iron": "6.0.0",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styles": "^5.5.1",
"#next-auth/mongodb-adapter": "^1.0.3",
"#next/bundle-analyzer": "^11.1.0",
"#prisma/client": "2.16.1",
"apollo-server-micro": "^3.5.0",
"axios": "^0.21.1",
"body-parser": "^1.19.0",
"classnames": "^2.3.1",
"cookie": "^0.4.1",
"cors": "^2.8.5",
"deepmerge": "4.2.2",
"ejs": "^3.1.6",
"express-graphql": "^0.12.0",
"express-jwt": "^6.0.0",
"express-session": "^1.17.2",
"google-map-react": "^2.1.9",
"graphql": "^15.5.1",
"graphql-tools": "^8.1.0",
"graphql-ws": "^5.4.0",
"http-proxy": "^1.18.1",
"image-type": "^4.1.0",
"jodit-react": "^1.1.1",
"jsonwebtoken": "^8.5.1",
"linkify-react": "^3.0.4",
"linkifyjs": "^3.0.5",
"lodash": "^4.17.21",
"micro": "^9.3.4",
"moment": "^2.29.1",
"mongodb": "^4.4.1",
"next": "12",
"next-auth": "^4.3.1",
"next-compose-plugins": "^2.2.1",
"next-i18next": "^8.5.1",
"node-fetch": "^3.0.0",
"passport": "^0.4.1",
"passport-facebook": "^3.0.0",
"pino": "^6.11.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-image-gallery": "^1.2.7",
"react-moment": "^1.1.1",
"react-player": "^2.9.0",
"react-share": "^4.4.0",
"react-use": "^17.2.4",
"sanitize-html": "^2.4.0",
"subscriptions-transport-ws": "^0.9.19",
"tss-react": "^3.6.0"
},
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.15.5",
"#emotion/server": "^11.4.0",
"babel-plugin-styled-components": "^2.0.6",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0"
}
}
Also, a dependency library was broken: react-image-gallery displays incorrectly since the upgrade, but I still didn't dig into that.
Issue for me was React 18. Reverted back to React 17 in package.json \
"dependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
I solve this problem with a loading splash screen
when the splash screen is destroyed everything is ok and styles are entirely loaded
an article about splash screen in nextjs
Today, I have been working on this same issue on my side and I found the solution. You should remove your StyledEngineProvider from the app and modify your emotion Cache to:
import createCache from '#emotion/cache';
// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
export const createEmotionCache = () =>
createCache({ key: 'css', prepend: true });
I didn't understand what StyledEngineProvider was doing before, but it is changing the CSS order and adding the MUI styles to the top of the header, but if you add prepend=true in your cache solution you won't need this anymore. See this link.
It was a Next.js issue that have been resolved since 12.1.7-canary.4 and up.
Related
I have a code like below, initially I used this code for iOS and Android applications, now I want the application to run on the web, but when I run I get this error
runZonedGuarded: Caught error in my root zone.
pluginConstants['isCrashlyticsCollectionEnabled'] != null is not true
someone suggested using kisweb, I've used it, but I still get the same error, please help, here's my code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
if(!kIsWeb) {
await Firebase.initializeApp();
}
runZonedGuarded(() async {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
}else{
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
runApp(App(
authenticationRepository: AuthenticationRepository(),
userRepository: UserRepository(),
));
}, (error, stackTrace) async {
print('runZonedGuarded: Caught error in my root zone. $error');
});
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx,
databaseURL: "xxx",
projectId: "xxxx",
storageBucket: "xxx,
messagingSenderId: "xxx",
appId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="cashbac_biz">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>cashbac_biz</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Replace:
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
with:
if (!kIsWeb) {
if (kDebugMode) {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
} else {
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
}
Calling setCrashlytics() will produce the error because Crashlytics is not supported on web.
I had the same problem. I solved it by following the install directions here, specifically these steps to add a build phase into XCode:
From Xcode select Runner from the project navigation.
Select the Build Phases tab, then click + > New Run Script Phase.
Add ${PODS_ROOT}/FirebaseCrashlytics/run to the Type a script... text box.
Optionally you can also provide your app's built Info.plist location to the build phase's Input Files field: For example:
$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)
I'm building a chrome devtools extension with TypeScript + React
My Steps
loaded unpacked dist on chrome://extensions
open a new tab with devtools page(and the window alerts "this is content script")
clicked my extension panel
the error appears on chrome://extensions
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Context
devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#a6b12dfad6663f13a7e16e9a42a6a4975374096b/&can_dock=true&dockSide=undocked
Stack Trace
index.html:0 (anonymous function)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/sidebar.2001c5a3.chunk.css" rel="stylesheet">
<link href="/static/css/devtools.2001c5a3.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/runtime-index.d09d0bdd.js"></script>
<script src="/static/js/index.chunk.js"></script>
<script src="/static/js/runtime-sidebar.7a085c24.js"></script>
<script src="/static/js/0.chunk.js"></script>
<script src="/static/js/sidebar.chunk.js"></script>
<script src="/static/js/runtime-devtools.f0ac3d91.js"></script>
<script src="/static/js/devtools.chunk.js"></script>
<script src="/static/js/runtime-background.c42f91dc.js"></script>
<script src="/static/js/background.chunk.js"></script>
<script src="/static/js/runtime-contentScript.7cf7a071.js"></script>
<script src="/static/js/contentScript.chunk.js"></script>
</body>
</html>
But if I click the "inspect views background page` manually before step 2, everything works well.
I think the background should start up automatically in production. Did I miss something?
index.tsx
chrome.devtools.panels.create("Garbanzo",
"favicon.ico",
"devtools.html",
function (panel) {
// code invoked on panel creation
let backgroundPageConnection: chrome.runtime.Port
panel.onShown.addListener(function (window) {
// when the user switches to the panel, check for an elements tab
// selection
backgroundPageConnection = chrome.runtime.connect({
name: "devtools-page"
});
});
panel.onHidden.addListener(function () {
backgroundPageConnection.disconnect()
});
}
);
contentScript.chunk.js
alert("this is content script")
background.chunk.js
chrome.runtime.onConnect.addListener((port) => {
alert("OK");
})
manifest.json
{
...
"devtools_page": "index.html",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"static/js/content_script.js"
]
}
],
"background": {
"scripts": [
"static/js/background.js"
],
"persistent": true
},
"permissions": [
"storage",
"declarativeContent",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
...
}
I've a flutter web app that'll run on the localhost perfectly but when I deploy it to firebase I get a blank page. In setting up firebase hosting I selected build/web as my public directory. I ran flutter build web which compiles the app. The build directory is created. My firebase.json file looks fine.(pos-ap/build/web for the public directory is correct)
{
"hosting": {
"public": "pos-app/build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="pos">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>pos</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx",
databaseURL: "xxxxxxxxx",
projectId: "xxxxxx",
storageBucket: "sxxxxxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxxxx7bc",
measurementId: "G-xxxxxxxxx"
};
// Initialize Firebase
// firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I'm not really familiar with web stuff. And apologies I can't really offer any more info. I suppose the only clue is that it works on localhost but not when deployed.
My root directory is..
|-pos-app
|-consumer-app
|-firebase.json
I'm trying to deploy pos-app which is a flutter app.
I am simply trying to understand react components.
I know I am doing something wrong but I dont know what.
I am just trying to get a navbar component to show up on the test page of the Create-React-App Boilerplate.
Here is my Package JSON:
{
"name": "Test_WebSite",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.8.4"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-bootstrap": "^0.30.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
}
// ...
"eslintConfig": {
"extends": "react-app"
},
}
Here is my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
const MenuBar =({name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
{name}
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">{Link1}</NavItem>
<NavItem eventKey={2} href="#">{Link2}</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<MenuBar name="WTF"/>
</div>
</div>
);
}
}
export default App;
After adding import { Navbar, Nav, NavItem } from 'react-bootstrap'and creating the Menubar Component I get this error:
Failed to compile.
Error in ./src/App.js
Module not found: Syntax/Volumes/Main Drive/Test_WebSite/package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 411
# ./src/App.js 21:22-48
I dont think it is JSON related though because if I remove everything I added the test page renders correctly.
I have no doubt it is something simple but I ca not see it. Any help would greatly be appresated
You are trying to resolve Link1, Link2 from props in your MenuBar component which are just not there. Try passing these props to the MenuBar component
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
const MenuBar =({name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
{name}
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">{Link1}</NavItem>
<NavItem eventKey={2} href="#">{Link2}</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<MenuBar name="WTF" Link1="abc" Link2="xyz"/>
</div>
</div>
);
}
}
export default App;
Package.json
{
"name": "Test_WebSite",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.8.4"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-bootstrap": "^0.30.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
// } <<<<<<< Extra Curly brace was here causing an issue
// ...
"eslintConfig": {
"extends": "react-app"
}, <<<<<<<<<< dont need a comman here as this is the last entry, remove it.
}
Here is how I got it to work:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'bootstrap/dist/css/bootstrap.css' //<< added this css file
import { Navbar, Nav, NavItem } from 'react-bootstrap';
const MenuBar =({Name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
{Name}
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">{Link1}</NavItem>
<NavItem eventKey={2} href="#">{Link2}</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<MenuBar Name="Am I a Fool" Link1="Foo" Link2="Bar" />
</div>
</div>
);
}
}
export default App;
I've started to learn ionic framework recently. I created below files, but result is blank page. nothing shows in the developer tools in Google Chrome too.
app.js
var app = angular.module('sheikhsafi', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
views: {
home: {
templateUrl: 'templates/home.html',
}
}
})
$urlRouterProvider.otherwise('/')
});
app.controller('HomeController', function ($scope, $stateParams) {
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sheikhsafi">
<ion-nav-view></ion-nav-view>
</body>
</html>
templates/home.html
<script id="templates/home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content>
<ion-pane>Hi</ion-pane>
</ion-content>
</ion-view>
<script>
what's the problem?
Working plunker.
Wrong code in config section of app.js. The correct is:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise('/')
})
instead of your:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
views: {
home: {
templateUrl: 'templates/home.html',
}
}
})
$urlRouterProvider.otherwise('/')
});
In your case you're trying to add to home view a template, that has sense when you have an abstract view. Take a look to the ionic-starter-sidemenu, that could be a nice way to discover some things.
Also, if you're learning ionic, please read the getting started guide, and use one of them ready-made app templates.