I am currently working on an Angular2 project with custom modules to keep the code clean. Everything was fine until I copied this module into another project.
Ever since I've copied the module into another project, I get the following error: Uncaught TypeError: Cannot read property 'visitExpression' of undefined.
After hours of googling I found out a couple of possible reasons, which I have all tested (and did not work):
Double comma's (,,) in the routing
Empty selectors in components
Here are some other things I tried:
Look up every import in the module and make sure it is correct.
Build the typescript files with Gulp (build succeeded without warnings/errors)
I am kind of clue less as to what to try next, any suggestions?
Any misplaced commas in Routes array can cause this
const authRoutes: Routes = [, //<--- This was my issue when I faced it
{path: 'signup', component: SignupComponent},
{path: 'signin', component: SigninComponent},
]
This error occurs when there may be a extra comma or different expression in imports.
I got it because of misplacing comma
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent},
{ path: 'login', component: LoginComponent }
];
Related
When using vue-router the standard set up is
main.js requires the routes.js file, which will look something like this
//routes.js
import Register from './components/Register'
import Login from './components/Login'
module.exports = [{
path: `/`,
component: Login,
}, {
path: `/register`,
component: Register,
}]
My question is why can I just do
//routes.js
module.exports = [{
path: `/`,
component: require('./components/Login'),
}, {
path: `/register`,
component: require('./components/Register'),
}]
When I try it, I get this console error
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<App> at src/App.vue
<Root>
**import and require work differently see the link bellow there are good documentation about the topic. **
es6 features
and require how Actually Works
**see the document how node js work under the hood how module.export work what is the nodejs design pattern (how node js wrap our code within Immediately invoked function expression and pass code into v8 engine)
you can simply midify your routes.js file
component:() => import('./components/Register.vue') or
component: require('./components/Login.vue').default
both will work
[{ path: '/', component:() => import('./components/Register.vue') },
{ path: '/register', component: require('./components/Login.vue').default }];
I'm lazy loading an angular module and while trying to open my DatesModal I'm getting this error:
No component factory found for DatesModal. Did you add it to #NgModule.entryComponents?
My lazyModule looks like this:
declarations: [DatesModal]
entryComponents: [DatesModal]
Im definitely adding the DatesModal in the entryComponents array of the lazyModule. Anyone got any idea what I could be missing here?
Please let me know if you need more info to answer this question.
It looks like you want to get/import this module in other modules, however this module is not visible to others. Try to export your module:
exports: [DatesModal]
UPDATE:
As Angular docs says:
For production apps you want to load the smallest code possible. The
code should contain only the classes that you actually need and
exclude components that are never used. For this reason, the Angular
compiler only generates code for components which are reachable from
the entryComponents; This means that adding more references to
#NgModule.declarations does not imply that they will necessarily be
included in the final bundle.
If a component isn't an entry component and isn't found in a template,
the tree shaker will throw it away. So, it's best to add only the
components that are truly entry components to help keep your app as
trim as possible.
To make your module to be lzay loaded, you need to do in routes:
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
},
{
path: 'orders',
loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
Read this docs about how to make your modules to be lazy loaded.
Have you used any third-party library (or yourself) to dynamic create this component in lazy-load module?
If so, you need to add this component in the AppModule's (or up-level non-lazy-load module) entrycomponents.
More detail you can see this issue
I have a feature module that I load in the AppModule, the AppRoutingModule looks like
const appRoutes: Routes = [
...
{
path: 'move-request/:id',
loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
},
...
];
And the configuration of routing for the feature module looks like
const moveRequestRoutes: Routes = [
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
];
I would like to navigate to MoveRequestFormComponent as the default component when move-request/:id is routed to, this works fine, but when I call
this.router.navigate(['/move-request-success', {}]);
In MoveRequestFormComponent after some response from the server, I get
zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;
This configuration was working before I switched to Angular 6, Is it because of the change in the AppModule, where I have excluded this feature module as an import?
Any assistance on what I am missing would be much appreciated. As I have also tried with having a third component which will be the default component and uses the router-outlet to render the children and have a children property on this route to have as children
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
But that also did not work, it stayed on the MoveRequestFormComponent, when 'move-request-success' was navigated to.Or maybe I should change the approach?
You don't have to import the feature module in AppModule as it is lazily-loaded. When you navigate to move-request/:id/move-request-success, the path matches the default route with path:'', and then it will look for and children of that route. You should add pathMatch:'full' to the first route, which is the default in this case. Since the mentioned route matches the first route and is unable to find and match any children, it is showing the error.
this.router.navigate(['/move-request-success', {}]);. If you add a / to a route this means you use absolute path from root. Have you tried without / ?
EDIT:
I think I see your problem. You navigate to a module with multiple components, which means after lazy loading the router configuration from the loaded module is used. This means
move-request/:id
Is the root of your module and every subroute needs to include the modules root in the url:
Your route should be move-request/:id/move-request-success
Urls in lazy loaded modules are:
module root (in your case move-request/:id) + configured route of the specific component (in your case move-request-success)
We're creating a new version of an app, and need to keep legacy routes working. Legacy urls come into our app under a specific route, let's call it legacy.
So, if a route is /legacy/route1, I am going to handle it with a Resolver to tell where it's actually supposed to go within our app (the old url routing scheme is very convoluted and needs quite a bit of logic). However, if it comes in under /legacy/route1/subroute3/somethingelse, I'd like to handle it with the same resolver.
How do I catch all of these routes within a single or a couple of lines in my RouterModule? I've tried all of the below:
{ path: 'legacy', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/*', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/**', component: Legacy, resolve: [LegacyRouteResolver] }
but none of them will give me any routes that come in with multiple slashes, and there are many other circumstances under which they fail (the octothorp seems to throw them off, too)
you can use below,
{
path: 'legacy',
children: [
{path : '**' , component: Legacy}
]
}
this will match all the routes after legacy
Hope this helps!!
Worked on my project 3d ago. after that just pushed it into my repo.
Today i cloned repo and install dependencies.
If early it worked good today i have bunch of errors.
When i trying to get sell <a routerLink="/sell">Sell</a> page by url -> localhost:3000/sell
const appRoutes: Routes = [
{
path: '',
component: MainPageComponent
},
{
path: 'sell',
component: SellComponent }
];
I'm getting this error
error image
Note: It worked till this day.
Thanks for help
You should add , pathMatch: 'full' to the first (empty path) route though if it is not a redirect and doesn't have child routes.