I am using angular-cli and lazyloader for routing.
ng serve works for me, but after building project as Production mode, then it does not work at all.
Here is my app.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { MainComponent } from './main/main.component';
import { AuthGuard } from './core/guards/index';
//Layouts
import { LoginComponent } from './login/login.component';
export const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '',
component: MainComponent,
children: [
{
path: '',
loadChildren: './main/main.module#MainModule'
}
],
canActivate: [AuthGuard]
},{
path: '**',
redirectTo: 'login'
}
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
And this is error I got after ng build --prod --aot or ng serve --prod.
ERROR Error: Uncaught (in promise): Error: Cannot find module './app/main/main.module'.
Error: Cannot find module './app/main/main.module'.
at t (main.1f6da18….bundle.js:1)
at t.loadAndCompile (vendor.490f84a….bundle.js:379)
at t.load (vendor.490f84a….bundle.js:379)
at t.loadModuleFactory (vendor.490f84a….bundle.js:428)
at t.load (vendor.490f84a….bundle.js:428)
at e.project (vendor.490f84a….bundle.js:428)
at e.XO5T.e._tryNext (vendor.490f84a….bundle.js:897)
at e.XO5T.e._next (vendor.490f84a….bundle.js:897)
at e.next (vendor.490f84a….bundle.js:897)
at e.RRVv.e._subscribe (vendor.490f84a….bundle.js:736)
at t (main.1f6da18….bundle.js:1)
at t.loadAndCompile (vendor.490f84a….bundle.js:379)
at t.load (vendor.490f84a….bundle.js:379)
at t.loadModuleFactory (vendor.490f84a….bundle.js:428)
at t.load (vendor.490f84a….bundle.js:428)
at e.project (vendor.490f84a….bundle.js:428)
at e.XO5T.e._tryNext (vendor.490f84a….bundle.js:897)
at e.XO5T.e._next (vendor.490f84a….bundle.js:897)
at e.next (vendor.490f84a….bundle.js:897)
at e.RRVv.e._subscribe (vendor.490f84a….bundle.js:736)
at u (polyfills.1e19b2c….bundle.js:43)
at u (polyfills.1e19b2c….bundle.js:43)
at polyfills.1e19b2c….bundle.js:43
at t.invokeTask (polyfills.1e19b2c….bundle.js:36)
at Object.onInvokeTask (vendor.490f84a….bundle.js:365)
at t.invokeTask (polyfills.1e19b2c….bundle.js:36)
at r.runTask (polyfills.1e19b2c….bundle.js:36)
at o (polyfills.1e19b2c….bundle.js:36)
Here is screenshot of browser console.
What is wrong on my routing configuration? PP : ng serve is working with out any errors.
This issue is coming from angular2-busy module.
https://www.npmjs.com/package/angular2-busy
Removing this from project solved issue.
Related
I'm having some issues with installing vue-router with laravel. Laravel 9, Vue.js 3
routes.js
import AllBooks from './components/AllBooks.vue';
import CreateBook from './components/CreateBook.vue';
import EditBook from './components/EditBook.vue';
export const routes = [
{
name: 'home',
path: '/',
component: AllBooks
},
{
name: 'create',
path: '/create',
component: CreateBook
},
{
name: 'edit',
path: '/edit/:id',
component: EditBook
}
];
Here's my config:-
resources/js/app.js
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({})
import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router'; // problem!!
import axios from 'axios';
import { routes } from './routes';
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes,
})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
package.json
"devDependencies": {
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.0.1",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.56.1",
"vite": "^4.0.0",
"vue": "^3.2.37"
},
"dependencies": {
"vue-axios": "^3.5.2",
"vue-router": "^4.1.6"
}
If you could help me with vue-router doesn't provide an export?
import VueRouter from '/node_modules/.vite/deps/vue-router.js?v=05a616f1';
In my case, look out for duplicated entries for our vue libraries. I had:-
resources/views/layouts/app.blade.php
<script src="https://unpkg.com/vue#3"></script>
<script src="https://unpkg.com/vue-router#4"></script>
AND
package.json
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.1.6"
}
also, my config changed in:-
resources/js/app.js
import './bootstrap';
import * as Vue from 'vue';
import * as VueRouter from 'vue-router'; // alternative ways of importing
import LoginComponent from "./components/LoginComponent.vue";
import TestComponent from "./components/TestComponent.vue";
const Home = { template: '<div>Home</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/login', name: "Login", component: LoginComponent },
{ path: '/test', name: "Test", component: TestComponent },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
If this helps you, well keep truckin. :)
Considering the image, I have a component (1) + module (2) + routing (3)(in "app-routing.module.ts"). To avoid too much code in "app-routing.module.ts", I want to move the routing code (3) in other file (suppose "product.routes.ts"). How can I do this considering I'm using Angular 2? Thanks!
This would be the AppComponentRoutingModule which I use, which can be extended with further files, usually that is one routes file per nested routing (to be imported in the corresponding module). The components and routes may vary, but it generally works alike this (guards skipped for the sake of brevity):
Create src/app/routes/app.routes.ts with content alike:
import { Routes } from '#angular/router';
import { ErrorPage } from 'src/app/pages/error/error.page';
export const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, // main entry point.
{ path: 'home', loadChildren: () => import('src/app/pages/home/home.module').then(m => m.HomeModule) },
{ path: 'error/:id', component: ErrorPage, pathMatch: 'full' },
{ path: '**', redirectTo: '/error/404' }
];
The nested routes don't look much different, for example src/app/routes/home.routes.ts:
export const homeRoutes: Routes = [{
path: '',
component: HomePage,
children: [
...
]
}];
Create src/app/app.component.routing.module.ts with content alike:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule } from '#angular/router';
import { appRoutes } from './routes/app.routes';
#NgModule({
imports: [
RouterModule.forRoot(appRoutes,{preloadingStrategy: PreloadAllModules})
],
exports: [ RouterModule ]
})
export class AppComponentRoutingModule {}
Then import AppComponentRoutingModule in app.module.ts:
import { RouterModule } from '#angular/router';
import { AppComponent } from 'src/app/app.component';
import { AppComponentRoutingModule } from 'src/app/app.component.routing.module';
...
#NgModule({
declarations: [ AppComponent ],
imports: [
RouterModule,
AppComponentRoutingModule,
...
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
In order to enable verbose logging, enableTracing: true is your friend.
I want to eager load a component MyComponent.
AppModule imports SharedModule and AppRoutingModule,
SharedModule declares MyComponent,
AppComponent is bootstrapped.
app-routing.module.ts
const routes: Routes = [
{ path: home/comp, component: MyComponent }
{ path: home, loadChildren: () => import('./mymodule/mymodule.module')
.then(x => x.MyModule)},
]
#NgModule({
imports: [
RouterModule.forRoot(routes)
]
MyComponent is also a childroute in MyModule:
#NgModule({
imports: [
SharedModule,
RouterModule.forChild([
{
path: 'home/comp',
component: MyComponent
}
]
}
But MyComponent is not eager loaded. As I am also mixing with lazy loading certain modules, is it possible I am overwriting things?
Official documentation is not too clear to me.
I have tried
adding:
data:{preload:true}
to the paths declared in routermodule
used:
loadChildren: () => import('./mycomponent/mycomponent.cmpnt').then(x => x.MyComponent)
both in AppModule as in MyComponent it was not successful. What am I doing wrong? Thanks
I'm trying to get Material 2 to work with Angular 4.4.6 using webpack in an ASP.NET Core 2 web application. I get no errors but I currently get no styling and the mat-button attribute has no effect on the output DOM.
I have done the following:
Environment is as follows:
Visual Studio (Professional) 2017 version 15.4.0
ASP.NET Core 2 web application with Angular, from VS template
Update #angular packages to ^4.4.6 in NPM and restore packages
"#angular/animations": "^4.4.6",
"#angular/common": "^4.4.6",
"#angular/compiler": "^4.4.6",
"#angular/compiler-cli": "^4.4.6",
"#angular/core": "^4.4.6",
"#angular/forms": "^4.4.6",
"#angular/http": "^4.4.6",
"#angular/platform-browser": "^4.4.6",
"#angular/platform-browser-dynamic": "^4.4.6",
"#angular/platform-server": "^4.4.6",
"#angular/router": "^4.4.6",
Per the Material guide, run the following command in the project directory:
npm install --save #angular/material #angular/cdk
Update webpack.config.vendor.js to add the following lines to the treeShakableModules array, just after '#angular/router':
'#angular/material',
'#angular/material/prebuilt-themes/deeppurple-amber.css',
In app.module.browser.ts, import the module:
import { MatButtonModule } from '#angular/material';
#NgModule({
bootstrap: [ AppComponent ],
imports: [
BrowserModule,
MatButtonModule,
AppModuleShared
],
providers: [
{ provide: 'BASE_URL', useFactory: getBaseUrl }
]
})
In home.component.html, add the following line at the end of the file:
<button mat-raised-button>This is a button</button>
From the project directory, run webpack to update the vendor files:
webpack --config webpack.config.vendor.js
Build and run the application
Observe the home page button is not styled. There are no errors in the console suggesting missing styles or invalid attributes.
I have the following configuration:
Angular 4.4.6
Material 2.0.0-beta.12
Windows 10 Professional
TypeScript 2.4.1 (NPM)
Chrome Version 61.0.3163.100 (Official Build) (64-bit)
Verified the styles do exist, as specifying class="mat-raised-button" on the button has an effect (though it does not look like the raised button) it does change the interior styling of the button.
I note that the attribute does not appear to have any effect on the styling or content of the output HTML (versus what I see when inspecting the elements on the guide website), suggesting that something has gone wrong with the setup of the module, but I can't for the life of me figure out what that might be.
EDIT: By request, here is the webpack.config.vendor.js up to the boilerplate:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'#angular/animations',
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/forms',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'#angular/cdk',
'#angular/material',
'#angular/material/button',
'#angular/material/prebuilt-themes/deeppurple-amber.css',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\#angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)#angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
... boilerplate follows this ...
So somewhat counterintuitively, the solution requires that the module importing be done in app.module.shared.ts, not app.module.browser.ts. If you are using the default Angular template, use the same steps as above, except for step 5, do the following:
Edit app.module.shared.ts to add the MatButtonModule module as an import, as follows:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { MatButtonModule } from '#angular/material/button';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
MatButtonModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
Note also it is not necessary to add #angular/cdk or #angular/material/button to the modules list in webpack.config.vendor.js. It is sufficient to add the ones described in the guide.
See: https://github.com/angular/material2/issues/7997
According to official docs Here
You've to Import theming to your Global style file this is as simple as including one line in your styles.css file:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
or Alternatively, you can just reference the file directly.
Available pre-built themes:
deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css
I'm usung Angular 2 Universal:
I have a service:
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { Page } from './page';
#Injectable()
export class MyService {
constructor(private http: Http) { }
getPage(id: number): Observable<Page> {
return null;
}
}
Unit test:
import { TestBed, async, inject } from '#angular/core/testing';
import { PageService } from './workflow.service';
describe('Service: Workflow', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [WorkflowService]
});
});
it('should ...', inject([PageService], (service: PageService) => {
expect(service).toBeTruthy();
}));
});
My app module:
#NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
HomeComponent,
WorkflowComponent
],
imports: [
HttpModule,
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'workflow/:id', component: WorkflowComponent }
])
]
})
export class AppModule {
}
When I run unit test I get: Error: No provider for Http!
UniversalModule in app.module should import http module already as indicated in the comments.
I'm using the latest Angular universal.
Should I add http in the test?
This article gave me an idea how to fix it:
http://chariotsolutions.com/blog/post/testing-angular-2-0-x-services-http-jasmine-karma/