I was doing exercise in Angular 2 routing and was able to create and run the project in Angular-2.
when I run the application it works fine if used 2 layer routing.
but when I increase routing layer to 3 it behaves unexpected.
There is one app module in which I am loading application.
then I have created separate modules for signin, signup and baselayout for others.
after login I want to use base layout as my app layout and want to load everything inside baselayout so that header and footer can be consistent.
and for each functionality I have created separate modules like DivisionModule, OrganizationModule and I want to load these two modules inside baselayout module but when I load any component of DivisionModule it directly loads inside app module not inside baselayout.
here is git url of my project.
https://github.com/sushilraj786/Angular.git
When I access signin or signup it works but when I try to access app/Organization/edit or app/organization/list or app/division/edit or app/division/list it loads under app module not under baseLayout module.
Any help would be appreciated.
Thanks
Sushil
This is because you have only one <router-outlet></router-outlet> inside your app.component.html.
Try adding one into your base-layout.component.html
Angular routing will look into your last router-outlet to load the template call by the routing. (also i saw you used only lazy loading, why ? is it something your exercice is about ?
EDIT :
Since you use lazy load module your routing file (in your lazy module) should not define the root path:
example :
const routes: Routes = [
{
path: '',
component: IndexComponent,
children: [
{
path: '',
component: BaseLayoutComponent
},
{
path: 'organization', loadChildren: 'app/organization/organization.module#OrganizationModule'
},
{
path: 'division', loadChildren: 'app/division/division.module#DivisionModule'
}
]
}
];
Related
I've tried different approaches but all are problematic.
So first of all I was using webview, but as per electron documentation, this tag is undergoing major architectural changes and it's recommended to use iframe or other alternatives. Furthermore, the webview tag gives me a warning while used alongside VueJS that the component is not registered. I understand this component doesn't exist within HTML standards and is something specific to electron, so I am not sure how to tell Vue to ignore or recognize it in the use case of an electron app.
Coming to the iframe problem, approach one of loading the file directly via src, gives me the obvious error Not allowed to load local resource:. Turning off webSecurity though allows the file to load but I read it's not recommended to turn it off. I am not sure if there are specific use case where it's safe to turn it off or shouldn't be at all.
I decided to try via file protocol as I already have it in place. The protocol code:
protocol.registerFileProtocol('downloads', (request, callback) => {
const url = request.url.substring('downloads:///'.length)
const location = path.normalize(paths.downloads(url))
callback({ path: location })
})
Though when I load the file this way, the renderer process crash without errors. Is there something in addition to the above which would help loading local files via iframe?
Edit 1
My use case is the following: I have a typical entry point to an index.html which contains code for a VueJS app.
if (app.isPackaged) {
window.loadFile(join(__dirname, '../renderer/index.html'))
} else {
// 🚧 Use ['ENV_NAME'] avoid vite:define plugin
const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`
window.loadURL(url)
window.webContents.openDevTools()
}
Inside that VueJS app, I require to list html files from a directory. I am able to achieve so via webview but I have tried to move away from it for the reason mentioned above. I tried using iframe but encountered issues as well. If there's a setting that doesn't turn off all security and allows me to load the file via iframe, that would be ideal.
This is kind of the reverse of this question where they're using an iframe, running into the "not allowed to load local resource" and being told to use a <webview> instead.
The <webview> docs list BrowserView as another alternative which is what I would recommend here. That should be much easier to work with than an iframe.
const { app, BrowserView, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow()
const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadFile('<yourFile>')
})
Even though it is not recommended to use webview tag, I decided to go forward as it's the only thing that works for me. The only issue then was this error where Vue does not recognize the tag. To work around that error/warning, I had to update my vite.js config:
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === 'webview'
}
}
}),
// ...
The issue I am having is that I am not able to navigate to the new component that I created using the routes. It was working and still works fine with other components.
Here is the file where I create the outlet
<router-outlet></router-outlet>. Then I have multiple routing variable that will navigate to the needed parts of the website. With the new component, I am not able to access it. I created a new component and named it RegisterPageComponent. In my app.routing.ts I added a new field to appRouteswith the following format
{
path: 'register',
component: RegisterPageComponent
}
When I try to access localhost:4200/register, I don't get anything. My RegisterPageComponent holds a default works! value
Please read below link and try to implement same solutions.
https://coryrylan.com/blog/introduction-to-angular-routing
Normally if I click link on home link to detail link, like <a routerLink="/detail/{{record.TA001}}">,it work well and css file got very well.
As only I refresh this detail page, like localhost:3000/detail/0006
it got data ok, but get CSS file change the directory to the detail instead root directory, could not get the CSS file. My detail component is in app/content directory.
My index.html and CSS file in project root directory.
router :
const appRoutes: Routes = [
{
path: 'contact',
component: Contactcomponent
},
{
path: 'detail/:id',
component: Detailcomponent
},
{ path: '',
component: Contentcomponent
}
My project directory is like this:
i have known how to resolve this problem ,just router directive /detail/0005 change /0005, it woke fine . i think it was if router for root so you just can use one level just fine .it could not use two level approch , if u router not for root ,it can use it .
If you want to use relative path instead of calculating every time the absolute one (with ../ ../../ etc.) you should use moduleID property in your component declaration as explained here.
Check If u include base href="/" in index.html before including css/stylesheet
Still in my fresh beginning with meteor, I'm having troubles setting up useraccounts:bootstrap with flowrouter.
So far, I was using accounts-ui for prototyping and all worked perfectly.
I've then modify the following packages:
remove accounts-ui
add useraccounts:bootstrap
add useraccounts:flow-routing
I also (still) have :
accounts-password
kadira:flow-router
arillo:flow-router-helpers
There seem to be no error in the console, regarding any eventual missing package.
let me know if you need to know more about the packages I'm using.
My problem is :
When I try to go to the route localhost:3000/signin or join, it loads for few seconds and then redirects me to localhost:3000 without displaying any auth related content.
I presume it might be my routes which are wrong.
here they are :
FlowRouter.route('/', {
name: 'App.home',
action(params, queryParams) {
BlazeLayout.render('App_body', {main: 'signin'});
},
});
AccountsTemplates.configure({
showForgotPasswordLink: true,
defaultTemplate: 'Auth_page',
defaultLayout: 'App_body',
defaultContentRegion: 'main',
defaultLayoutRegions: {}
});
// Define these routes in a file loaded on both client and server
AccountsTemplates.configureRoute('signIn', {
name: 'signin',
path: '/signin'
});
AccountsTemplates.configureRoute('signUp', {
name: 'join',
path: '/join'
});
AccountsTemplates.configureRoute('forgotPwd');
AccountsTemplates.configureRoute('resetPwd', {
name: 'resetPwd',
path: '/reset-password'
});
note: the "/" route above is my last trial, with direct link to the signin route. No success.
Also, when I try to insert the {{> atForm}} nothing displays, but I see that an empty div is created with a class="at-form".
Would really appreciate some help on this one, really stucked right now.
hmm, well. Found the answer and might be useful for beginners like me.
I was still logged in (while I was using accounts-ui), that's the reason why it wouldn't display any of the template to log in or sign up.
After clearing my browser cache (which logged me out) it solved the issue.
I can now see the login and signup forms as it should be.
I'm trying to localize my app with angular translate.
here are my modules :
angular.module('myapp', [
'angular-meteor',
'ui.router',
'ngMaterial',
'ngMessages',
'ngAnimate',
'ngCookies',
'pascalprecht.translate'
]);
Then my config :
angular.module('myapp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'client/lib/translation/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
}]);
my en-US.json file content :
{
"TITLE" : "hello"
}
And I'm testing it with this html :
<h1> {{"TITLE" | translate}}</h1>
I tested it with a table in a variable and it works well, the issue seems to be that my .json is not found or ignore, because it display
TITLE
instead of
hello
I'm currently working on the same issue. What it seems to be is that the digest cycle is running too early due to the external file/s being loading asynchronously.
A workaround: In your HTML use the attribute directive instead.
Example:
<p data-translate="TITLE"></p>
Disclaimer: This may not be the best solution, I am still learning AngularJS myself!
Actually I found the issue, I had to put my locales files in the public folder. So this is fixed.
This is a fully working example:
http://plnkr.co/edit/Ibq4EaFcvyUPGpqb81Jo?p=preview
To use a translation one can also use something like
{{"TITLE" | translate}}
or:
<h2 translate="TITLE"></h2>
I also had issues with loading the files, I eventually found the starting path seems to be the www folder.
Then in the config start without a forward slash, so this is what works for me in my app config:
.config(function ($translateProvider) {
//$translateProvider.fallbackLanguage("en");
$translateProvider.determinePreferredLanguage();
$translateProvider.useStaticFilesLoader({
prefix: 'js/translations/locale-',
suffix: '.json'
});
$translateProvider.use('en_US');
$translateProvider.preferredLanguage('en_US');
})
I found it by using the chrome debugger (chrome://inspect), it shows errors in the console that are not showing up in the usual terminal when running ionic with -lc.
I hope that helps anyone :)!