I want to refer to my earlier question: Meteor Dynamic Template not working
Using components in my app is working just fine on all other pages except on the root path:
FlowRouter.route('/', {
action() {
BlazeLayout.render('mainLayout', { content: 'home' });
},
});
The same components are working just fine here.
FlowRouter.route('/dashboard', {
action() {
BlazeLayout.render('mainLayout', { content: 'dashboard' });
},
});
I have imported the same components in both home.js and dashboard.js. The location of the files are the same and the imports are identical. My components work on all pages, but not if is root path.
Any help will be greatly appreciated. Thank you!
This was actually solved by a complete reboot. I tried restarting the application multiple times without luck.
Related
I've just upgraded my project to Meteor v2.6 along with all packages. Everything runs smoothly on local so I pushed to Galaxy where I'm promptly met by this error when trying to load my app:
Nothing in the codebase itself was changed, needless to say the routes have been defined and have been working fine before.
Here's an excerpt of the code:
import "/imports/ui/layouts/dashboardLayout/dashboardLayout";
import "/imports/ui/layouts/landingLayout/landingLayout";
import "/imports/ui/pages";
import "/imports/ui/pages/landing/landingHeader/landingHeader";
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
Router.configure({
trackPageView: true,
});
Router.onAfterAction(() => {
window.scrollTo(0, 0);
});
Router.route("/", {
name: "landing",
layoutTemplate: "landingLayout",
action: function () {
this.render("landingHeader", { to: "header" });
this.render("landingContent", {
to: "content",
data: { signUp: !!this.params.query.signUp },
});
},
});
Below the diff in the versions file>
Given it runs fine locally but has issues in Production, I wonder whether the problem is this bit of code here:
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
I don't know why it's there (it's not my code originally) but I've noticed that the reywood:iron-router-ga version seems to have been downgraded for some reason during the upgrade:
When I try to force an update to reywood:iron-router-ga in the vain hope that by getting it back to v2.0.1 it will start working again, I get the message that "The specified packages are at their latest compatible versions".
Has anyone encountered this before/any idea what's going on? I'm not a fan of forcing different behaviour in Production from Dev as that obviously makes testing difficult/pointless - unless there's a good reason for it. Can anyone shed any light?
Hi I just started playing around with nextjs to see if it fits my use case. I wanted to export the site with some dynamic routes.
My pages folder structure is like below
page
locales
[locale]
[slug].js
When I run next develop I can access the page at http://localhost:3000/locales/de-DE/summer-dress-f.
So now im trying to export the page with next.config.js like
module.exports = {
exportPathMap: function() {
return {
"/locales/de-DE/summer-dress-f": {
page: "/locales",
query: { locale: "de-DE", slug: "summer-dress-f" }
}
};
}
};
next build runs fine but when I run next export I get the error
Error: Cannot find module for page: /locales
at pageNotFoundError (/Users/bmathew/Desktop/workspace/next-demo/node_modules/next-server/dist/server/require.js:13:17)
Any ideas what am I missing here?
Running npm install seems to fix this.
Finally figured it out. The pathmap should look like
module.exports = {
exportPathMap: function() {
return {
"/locales/de-DE/summer-dress-f": {
page: "/locales/[locale]/[slug]",
query: { locale: "de-DE", slug: "summer-dress-f" }
}
};
}
};
Page component naming should be unique.
So I had about.tsx with name: AboutPage and faqs.tsx with name: AboutPage as well, amending faqs.tsx to be unique fixed it :)
I just hit a similar error, and I had simply forgotten to run next build before next export!
In my case, I solved a similar issue by deleting 'node_modules' by running rm -rf node_modules and installed the packages again.
In my case, I was using getStaticProps and getStaticPaths. fallback prop was set to false. Changing it to true fixed the issue.
I had this vague error message when I had capitals in the file name WIP-sidebar.js.
In my case, running:
npm i --save --legacy-peer-deps
fixed the issue.
Sometimes the problem happens when we are building and we have another terminal running yarn dev
I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.
Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as stand alone angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file(file name based on Angular 2 documentation). main.ts file contains the code to bootstrap the application (sample code below) so there will be a main.ts file for each .aspx page.
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';
import {HomeComponent} from './home.component';
bootstrap(HomeComponent, [HTTP_BINDINGS])
.catch(err => console.error(err));
There will be one app.component.ts(named it home.component.ts for my home.aspx) file for each aspx page.
Now in the config file which contains Sytem.config details i defined new map and package entry for my home.aspx as shown below:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
app: '../../Javascript/angular/app',
home: '../../Javascript/angular/home'
},
packages: {
app: { main: './main.ts', defaultExtension: 'ts'},
home: { defaultExtension: 'ts' }
}
});
And finally I moved the System.import code part to .aspx page(code below). Each page will import its own package defined in sytem.config.
<script>
System
.import('home/main-home')
.catch(console.error.bind(console));
</script>
here i have named my main.ts as main-home.ts.
Hopefully this helps you and others. Also i am open for suggestion and review/alternate solution of this approach.
For reference please see: bootstrapping-multiple-angular-2-applications-on-the-same-page
I totally agree with #pawan's answer but yes #pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.
We don't need to create main.ts and AppComponent.ts for each and every page.
We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.
Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent
I am doing it by implementing ngDoBootstrap method as following.
export class AppModule {
url : string;
constructor(#Inject(DOCUMENT) private document: any){
this.url = this.document.location.href.toLowerCase();
}
ngDoBootstrap(app:ApplicationRef){
if(this.url.indexOf("home.aspx") > 0){
app.bootstrap(HomeComponent);
}
else if(this.url.indexOf("about.aspx") > 0){
app.bootstrap(AboutComponent);
}
}
}
This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.
For this, you need to add entry for each component into entryComponents array of NgModule as below:
#NgModule({
entryComponents : [
HomeComponent,
AboutComponent,
]
})
Hope this helps.
change your index.html base route to your webpage
<base href="/YourWebPageRoute">
include the page inside the webform
<% Response.WriteFile("index.html"); %>
I know that there are a lot of duplicates of this topic and I've found some articles which explain how to implement angularjs routeProvider with .cshtml, but it didn't help me. Here, in stackoverflow, there were some similar problems that I've looked at but it didn't help me either. Could you help me please.
Here is my angular module:
QuizApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/home/index',
controller: 'QuizController' //new
}).
when('/quiz', {
templateUrl: '/home/quiz',
controller: 'QuizController' //new
}).
otherwise({
redirectTo: '/index'
});
}]);
If i join localhost:port/home/quiz - it works
If i join localhost:port/#/quiz - it is just show me default page (index).
ps. Guys, if you need some more information, just tell me please.
UPDATE 2.
Add a bit more code witch comments //new
Also I've found one defect that when i'm adding to my page:
<div ng-view></div>
Page just freeze, and I can't make anything on it.
I want to serve a static HTML file from MeteorJS's public folder (as is possible with Rails and Express). The reason I'm doing this is because I have one template for the dynamic "admin" part of my webapp and another for the sales-y "frontend" part of the app.
I don't want this file to be wrapped in a Meteor template as suggested in this answer as it will automatically bring in the minified CSS, etc... that the dynamic pages use.
Is there a way I can setup the public folder (and all its subfolders) so that it serves index.html? This way http://app.com/ will load public/index.html?
You could use the private folder instead and then use Assets.getText to load the contents of the file, then serve it with a server-side router from iron-router.
So off the top of my head the code would look something like this:
if (Meteor.isServer) {
Router.map(function() {
this.route('serverRoute', {
path: '/',
where: 'server',
action: function() {
var contents = Assets.getText('index.html');
this.response.end(contents);
}
});
});
}
this is what I put in bootstrap.js
Router.route('/', {
where: 'server'
}).get(function() {
var contents;
contents = Assets.getText('index.html');
return this.response.end(contents);
});